UX Design Read Report #

목차 #

1. 디자인 언어
2. 사람의 인지 시스템
3. 디자인 기초 작업
4. 좋은 디자인의 기본 법칙
5. 색의 맑기
6. 좋은 디자인 만드는 색상 표현 법칙
7. 정리

디자인 언어 #

디자인에 대한 오해 #

• 어도비 XD, 피그마, 제플린 등 툴을 익히는 것과 디자인을 잘 하는 것은 다르다. 툴은 포토샵을 익히는 것과 디자인을 잘하는 것은 다름.
• 책에 나온 예시 디자인을 따라한다고 실력이 늘지 않는다. 디자인 분석할 줄 모르면 응용할 수 없다.
• 그림을 잘 그리는 것과 디자인을 잘하는 것은 별개이다.
• 화려하게 꾸민다고 디자인을 잘 하는 것이 아니다. 앱 계획, 설계, 순서 모든 것을 잘하는 것이 UX, UI 디자인이 잘 된 앱이다.

디자인 감각 상승 #

디자인 감각을 키우려면 주변을 관찰하는 것부터 시작이다. 그리고 디자이너처럼 생각해야 한다.바로 HEX 코드로 몇 번인지 고민하기보다는 디자이너들처럼 코드보다는 색의 종류를 생각하고 그 색의 세부적 분류화를 진행하는 것이 감각 키우기이다. 따라서 다양한 색상을 자주 보고 다른 사람이 작업한 배색을 따라 하며 디자인에 적용하는 것이 중요하다. 간단하게 연습할 방법은 디자인 이론서보다 최신 인테리어, 홈 데코, 패션 잡지를 보고 텍스트에 집중하기보다는 색상이 풍부한 사진을 집중해서 보는 것이다. 아니면 피그마, 제플린에 있는 색상의 Hex 코드를 보지 말고 한 번 찍어보면서 맞춰보는 것이다. 이런 식으로 연습하면 충분히 색상에 대한 감각이 많이 상승할 것이다.

단순한 도형으로 그려기 #

개발자들이 디자인을 연습할 수 있는 쉬운 연습 중의 하나는 사진을 플랫 디자인으로 변경하는 것이다. 위 사진은 스큐어모피즘(입체화)된 사진을 플랫화 시킨 것이다. 플랫 디자인은 앱 디자인에 잘 적용하면 매우 세련된 디자인이라 많은 도움이 된다. 완전한 형태가 나온 사진을 고르면 아이패드와 같은 테블릿 PC 혹은 종이에 한 번 그려본다. 두꺼운 펜을 선택하고 형태에 따라 선을 그려 윤곽을 잡는다. 그리고 사진의 색 중에서 가장 큰 비중을 차지하는 색으로 이어진 선에 색을 덧붙인다.

사람의 인지 시스템 이해 #

• 글은 복잡한 인지 과정을 거친다. 선의 생김새를 먼저 보고 그것을 단어로 인식한다. 그리고 문맥에 맞춰 단어의 뜻을 파악한다. 마지막으로 문장의 의미를 이해한다.
• 이미지는 동시다발적으로 병렬 처리한다. 즉 직관적으로 처리하고 기본 도형으로 단순화하고 패턴화하여 하나로 묶어 인식한다. 따라서 글보다 인지하는 속도가 빠르다.

디자인 기초 작업 #

1. 디자인의 시작은 제목 정하기이다. 이름, 주제, 제목은 디자인의 목적을 명확하게 밝힌다.
2. 연관 단어를 나열한다. 다이어트 앱이면 다이어트와 연관된 여러 단어를 생각나는 대로 나열한다.
3. 나열한 단어와 앱을 사용할 사용자를 생각해 본다. 타겟 사용자의 나이, 성별, 취미등 앱에 필요한 조건과 나열한 단어를 비교한다.
4. 연관 단어로 유스케이스를 작성한다. 단어들의 느낌을 생각해 보고 대표색을 지정한다.

좋은 디자인의 기본 법칙 #

• 글자 색은 통일한다. 한 페이지에 알록달록한 색을 쓰기보다는 통리하는 것이 눈에 편하다.
• 색은 밝기에 따라 느낌이 달라진다. 파스텔 톤같은 밝은색은 부드러운 느낌을, 중간 밝기의 톤들은 활기차고 산뜻한 느낌이 들고 어두운색은 중후하고 우아하다.
• 중요한 정보일수록 폰트를 크고 두껍게하기보다는 중요 정보는 검은색, 보통 정보는 밝은 회색, 소소한 정보는 투명도를 조절한다.
• 배경색 지정 시 중요 정보는 바탕색과 밝기 차이를 크게, 보조 정보는 밝기 차이를 작게, 비활성 정보는 미미하게 구성해야 한다.

색의 맑기 #

• 원색은 강렬하고 화려하다. 따라서 눈이 금방 피곤해진다. 그리고 가장 눈에 먼저 띈다. 검은색으로 지정된 중요 정보보다 빨간색인 강조 정보가 있으면 눈에 먼저 띈다. 강한 밝기 대비 색상보다 채도가 높은 색상이 더 띄인다.
• 하나의 페이지에서 여러 원색을 쓰면 본연의 의미(강조 정보)가 퇴색된다. 최대한 페이지에 하나만 사용하는 것을 추천한다.
• 바탕색으로 원색을 쓰는 것은 최대한 피해야 한다. 원색이 갖는 의미도 있기 때문에 사람들의 인지에 방해된다. (ex: 빨간색 = no, 초록색 = yes)

좋은 디자인 만드는 색상 표현 법칙 #

단색 설계 #

색상 하나만 설정하여 이것을 앱 전체에 적용한다. 이 디자인 방법은 단순 명로해서 정보 전달력이 좋지만 느낌이 단순하고 심심하다. 하지만 반대로 단순 명료하고 순수한 느낌을 주고 색상을 줄여 콘텐츠에만 집중할 수 있게 한다. 주의할 점은 대표 색상이 강렬한 원이면 안 된다. 최대한 눈이 편한 색을 대표 색상으로 지정해야 한다.

비슷한 색 설계 #

디자인 주제에 맞는 대표 색상을 고른 후 대표 색상과 이웃 색을 보조 색상을 지정한다. 비슷한 배색은 색상 간 차이가 작아 거슬림이 없다. 그리고 조화롭고 안정된 느낌을 준다.

결론 #

디자인 기초 작업의 시작은 제목 정하기이다. 제목을 정하고 연관된 단어를 'Brain Storming'을 진행한 후 앱의 타겟 사용자의 특성을 고려하여 연관성이 가장 높은 단어를 추출한다. 그 후 대표색을 지정한다. 그리고 단색 설계를 할 지 아니면 비슷한 색을 연관시켜 앱을 표현할 지 생각한다. 그 후 대표 색상과 앱에 사용할 색상을 선정한다.