본문 바로가기

Product Management & UX

패스트캠퍼스 학습 일지] 4주 차 : UX/UI 디자인 (올인원 패키지)

작성일 : 2019. 10. 4. 15:30

 

스벅은 먹으러 가는 것인가 공부하러 가는 것인가..ㅎ

 

패스트 캠퍼스 학습 일지 4주 차입니다!

요즘에는 UX/UI 기본에 대한 강의와 XD 툴 사용법에 대한 강의를 병행하며 듣고 있어요.

노트북으로 강의를 들을 때는 아이패드로 필기를 하고, 아이패드로 들을 때는 노트북으로 실습을 병행하며 학습 중입니다.

이번 주에 배운 내용은 GUI 트렌드에 대한 것이었는데요, 대화형 GUI, 듀오톤 이미지, 카드/리스트형 GUI, 그리고 Text 필드에 대해 알게 되었습니다.

카톡에서 매일 보는 대화형 GUI를 직접 만들어보니, 말풍선 끝에 꼬다리(?) 하나 달고 안 달고에 따라 느낌이 다르고,

단순한 사진도 옅은 듀오톤 이미지를 씌웠더니 텍스트가 더 선명히 보이고, 전체적인 분위기가 달라진다는 것이 신기했습니다.

다음 사진은 카드/리스트형 GUI를 직접 실습하는 도중에 찍은 화면입니다.

#대화형 GUI

- 쉽게 말해 메신저입니다. 채팅 인터페이스라고 생각하면 되죠!

- 구성요소 : 말풍선, Text 창, 키보드

- 모양 : 일반형, 말풍선형

- 필수 요소 : 말풍선의 최대 길이 & 텍스트 최대 길이 지정하기

#듀오톤

듀오톤은 말그대로 두 가지의 톤을 사진에 씌우는 것인데요, 굳이 두 가지만 사용할 필요는 없지만 적절한 컬러를 뽑아 듀오톤을 구성하여 텍스트를 부각하고 전체적인 컬러 무드를 형성하는데 사용합니다.

다음 사진에 보시는 것처럼 두 가지 정도를 실습해보았습니다.

#카드/리스트형 GUI

- 카드, 리스트형은 많은 콘텐츠를 정리해서 보여주기 적합합니다.

- 중요한 것은 바닥과 콘텐츠를 구분하는 것인데 보통 쉐도우나 컬러로 구분합니다.

- 콘텐츠별 덩어리를 제작하고 작업하면 수월하고, 가로/세로 리스팅을 적절히 활용합니다.

- 카드 UI는 콘텐츠가 엉키지 않게 관리만 잘하면 깔끔하게 구성할 수 있습니다.

여기까지 이번 주 배운 내용의 간단한 요약이었습니다.

더 많은 내용을 다룬 강의를 들었지만, 한 번에 담기가 어려워 가장 기억에 남고 인상적인 내용 위주로 학습 일지를 작성하게 되네요.