(DAY21) 피그마 Variables 다뤄보기 + 앱 UI 클론 최종과제

안녕하세요 :)

오늘은 피그마 베리어블(Variables)기능을 활용하는 법을 배웠습니다.

그리고 Prototype으로 라이트모드/다크모드 전환하는 법을 배웠습니다.

추석연휴 끝나고 첫수업이다보니 정신이 하나도 없네요ㅠㅜ

 

---

 

 

✏️오늘의 수업

토스, 배달의 민족, 오일나우 아티클 살펴보기

피그마 Variables 기능 써보기

실습 1) 앱 화면 5개 클론하기 (베리어블 기능 위주로 활용)

실습 2) 라이트 모드/ 다크모드 변환 설정해보기

 

 

 

 

 

 

 

 

 

📝수업 내용 메모장

 

 

토스

https://www.youtube.com/watch?v=qgt_pJhJZ5w

 

 

배달의 민족 - 함께 주문하기 

https://techblog.woowahan.com/10232/

함께 배달주문할 때는? 함께주문! (함께주문 오픈 이야기) | 우아한형제들 기술블로그

 

 

오일나우 - 프로모션없이 UX만으로 신규가입유저를 늘리는 방법

https://medium.com/%EC%98%A4%EC%9D%BC%EB%82%98%EC%9A%B0-%ED%8C%80-%EB%B8%94%EB%A1%9C%EA%B7%B8/%ED%94%84%EB%A1%9C%EB%AA%A8%EC%85%98-%EC%97%86%EC%9D%B4-ux%EB%A7%8C%EC%9C%BC%EB%A1%9C-%EC%8B%A0%EA%B7%9C-%EA%B0%80%EC%9E%85-%EC%9C%A0%EC%A0%80%EB%A5%BC-235-%EB%8A%98%EB%A6%AC%EB%8A%94-%EB%B0%A9%EB%B2%95-128dac4f92b0

프로모션 없이 UX만으로 신규 가입 유저를 235% 늘리는 방법

 

 

 

 

Persona 제작 프로세스

 

 

★ 퍼소나 예시

- 현재 예시에는 유저저니맵을 같이 넣음, 유저저니맵 불필요해서 생략하는 경우도 있음

- 저니맵 필요한지 판단하는 기준 : 여정 스텝별로 페인포인트가 많을때

- (홍예나)를 대표할 수 있는 대표 VOC를 함께 넣는게 좋다. (면접관은 세세하게 잘 안읽음)

 

 

 ★ 잘만든 Persona 특징

- 실제 사용자 데이터(인터뷰, 설문, 로그 등)를 기반으로 작성

- 너무 이상화되지 않고 현실적인 고민과 목표를 반영

- 서비스 기획과 직접적으로 의사결정에 도움이 되는 정보를 포함

- 1~2명 이내의 대표적인 페르소나로 압축 (너무 많으면 초점이 흐려짐)

 

 

 

 

IA 정보구조

 

 

 

 

 

 

수업 실습

 

베리어블 설정 화면, 버튼 실습

 

Prototype 기능을 이용한 라이트모드/다크모드 전환

 

 

 

 

 

실습 1) 앱 화면 클론디자인 하기 

저는 그동안 배웠던 것들을 제 수준에서 활용하기 적당한 난이도인 당근마켓으로 골랐습니다.

 

실습 결과물

베리어블 셋팅한 화면

작업하며 나온 컴포넌트들

 

 

💡 베리어블 기능이 엄청 유용하다.

개인적으로는 추석연휴 시작 전 마지막 수업 때 배운 Style설정하는 것보다 Variables 설정해서 활용하는게 손에 더 잘감겼다. 하다보니 컬러 위주로만 설정해서 활용하게 됐는데, 라이트모드/다크모드 색상 설정하는게 은근히 재밌었다. 팔레트에 물감짜듯 색상 선정하는 기분이 꽤 좋았다. 이럴때 보면 난 천상 디자이너 재질인 것 같기도..ㅎ.ㅎ

 

 

 

 

실습 2) 라이트모드 / 다크모드 변환 설정해보기

 

수업 때는 로빈후드 서비스를 예시로 배웠는데, 나는 당근마켓으로 실습했다.

 

실습 결과물

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

💡 Prototype 기능을 처음 써봤다.

정적인 피그마 화면만 보다가 피그마를 공부한 지 처음으로 동적인 화면을 봤더니 재밌었다. 그동안 건너 들었던 기능들을 오늘 직접 써볼 수 있는 시간을 가졌더니 재밌었다. 하지만 아직 너무 초짜라 큰일이다..