Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
PARK JISUN, 2018.11.14.WED
디자이너의
(👀)과 (💭) 빌리기
개발자를 위한 디자인 특강
공유용
안녕하세요,
Full stack designer 박지선입니다.
• 現 Haezoom Product designer
• 前 Spoqa Product designer
• 5년 이상 웹/앱 프로젝트 참여
• UI 디자인, 브...
Dodo Manager

(2017)
Carry Protocol
(2018)
Meetgo

(2018)
사기 높은 팀을 만드는 해피아워,
슬랙봇, 어디까지 만들어봤니?,
Sublime Text 빠르게 적응하기 등…

(2015~)
강연을 하게 된 배경
디자인에 대해
알고 싶어하는
개발자가 많아요 오,
안그래도
최근에..!
강연을 하게 된 배경: 코딩하는 디자이너
~2012
• HTML & CSS 기본 지식
• 실무 경험 없음
• Indexihit
• 1차 구현된 버전을 웹 브라우저의 Inspector로 스타일을 수정해보며 수정사항을 개발...
강연을 하게 된 배경: 코딩하는 디자이너
• 답답해서 프로덕트의 코드를 직접 건들기 시작
• 사소한 디자인 버그였지만 찝찝해서 개발자가 수정할 때까지 기다릴 수 없었다.
• 내부용 서비스의 초간단 디자인 버그부터 해결하...
강연을 하게 된 배경: PR 코멘트
Pull Request 속
나의 디자인 코멘트 유형
모아보기 시작
CASE 1) PR 속 나의 디자인 코멘트?
12,000원(2×6,000원)
CASE 2) PR 속 나의 디자인 코멘트?
A Label B Label
C Label D Label
CASE 3) PR 속 나의 디자인 코멘트?
Button LanguageService name Menu1 Menu2
CASE 4) PR 속 나의 디자인 코멘트?
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incidi...
강연 들어가기 전에
• UI 디자인 내 그래픽 디자인 개념 × CSS 위주
• 디자인 소양을 높여줄, 쉽고 실용적인 이야기들 위주
• 디자이너라면
• UI디자인에 대한 기본 상식을 정리하는 시간
• 디자이너와 협업하는 ...
디자이너의
(👀) 빌리기
CHAPTER 01
“미적 감각은 어떻게 기를 수 있나요?”
# $
“미적 감각은 어떻게 기를 수 있나요?”
# $
원리 × 좋은 레퍼런스를 많이 × 고민
“어떻게 해야 디자인을
일관적으로 완성도 있게 할 수 있나요?”
# $
“어떻게 해야 디자인을
일관적으로 완성도 있게 할 수 있나요?”
# $
원리 × 디테일
원리(&개념) = 👀!
# $
READY
# $
그리드 (grid)
• 건축, 편집 디자인 등에서도 널리 쓰이고 있는 개념
• UI 요소들을 배치할 때 기본적인 기준이 되는 시스템
• 디지털 환경 디자인에서 12 컬럼 그리드 시스템은 표준 (예. Bootstrap)
...
1 1 1 1 1 1 1 1 1 1 1 1
3
4
5
6
8
9
12
3 3 3
4 4
7
6
4
3
1 1 1 1 1 1 1 1 1 1 1 1
3
4
5
6
8
9
12
3 3 3
4 4
7
6
4
3
• 히어로 섹션이나 컨텐츠가 1가지일 때
1 1 1 1 1 1 1 1 1 1 1 1
3
4
5
6
8
9
12
3 3 3
4 4
7
6
4
3
• 이미지와 텍스트 중 어느 한쪽의 비중이 클 때
1 1 1 1 1 1 1 1 1 1 1 1
3
4
5
6
8
9
12
3 3 3
4 4
7
6
4
3
• 한 섹션에 2~4개의 컨텐츠가 있을 때
1 1 1 1 1 1 1 1 1 1 1 1
3
4
5
6
8
9
12
3 3 3
4 4
7
6
4
3
• 모바일에서 자주 쓰는 레이아웃
여백 (padding, margin)
• 구성 요소들 간의 관계를 잘 드러나게 도와줌
• 섹션간 구분, 포함 혹은 제외 관계, 요소간 구별
• 올바른 사용은
• 가독성 및 사용성 향상에 도움
• 시각적 무게에 따른 안정감
여백 (padding, margin)
• 구성 요소들 간의 관계를 잘 드러나게 도와줌
• 섹션간 구분, 포함 혹은 제외 관계, 요소간 구별
• 올바른 사용은
• 가독성 및 사용성 향상에 도움
• 시각적 무게에 따른 안정...
여백 (padding, margin): 시각적 무게
빡빡한 모달
Button
Label
Label
여유로운 모달
Button
Label
Label
*Desktop view
CASE 4) PR 속 나의 디자인 코멘트?
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incidi...
CASE 4) PR 속 나의 디자인 코멘트!(여백)
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor in...
정렬 (text-align)
Left Center Right Justify
• Left: 대부분의 언어문화권에서 친숙, 눈 움직임이 편함, 컨텐츠 양에 관계 없이 OK!
• Center: 서커스 레이아웃으로 가독성 저하...
정렬 (text-align)
Left Center Right Justify
• Left: 대부분의 언어문화권에서 친숙, 눈 움직임이 편함, 컨텐츠 양에 관계 없이 OK!
• Center: 서커스 레이아웃으로 가독성 저하...
CASE 3) PR 속 나의 디자인 코멘트?
Button LanguageService name Menu1 Menu2
CASE 3) PR 속 나의 디자인 코멘트!
(정렬)
Button LanguageService name Menu1 Menu2
“컬러는 어떻게 고르세요?”
# $
“컬러는 어떻게 고르세요?”
# $
의미 × 위계× 상태 × 색 모델
컬러: 의미
뭔가 잘못되었나?
찝찝한 완료
안심할 수 있는 완료
컬러: 위계
컬러: 상태
NORMAL
HOVER
ACTIVE
DISABLED
Spoqa BI guidelines
컬러: CSS
color: red;
color: #192837;
color: rgb(50, 115, 220);
color: rgba(0, 0, 0, 0.5);
color: hsl(17, 80%, 50%);
color: ...
컬러: Color name
color: red;
color: #192837;
color: rgb(50, 115, 220);
color: rgba(0, 0, 0, 0.5);
color: hsl(17, 80%, 50%);
...
컬러: HEX
color: red;
color: #192837;
color: rgb(50, 115, 220);
color: rgba(0, 0, 0, 0.5);
color: hsl(17, 80%, 50%);
color: ...
컬러: RGB
color: red;
color: #192837;
color: rgb(50, 115, 220);
color: rgba(0, 0, 0, 0.5);
color: hsl(17, 80%, 50%);
color: ...
컬러: HSL
color: red;
color: #192837;
color: rgb(50, 115, 220);
color: rgba(0, 0, 0, 0.5);
color: hsl(17, 80%, 50%);
color: ...
🧐
Q. ‘#DC767F’ 는 무슨 색?
A.
맞추었다면
HEX 천재 인정
컬러: 인간의 멘탈모델에 가까운 HSL와 HSB
HSL HSB(=HSV)
https://en.wikipedia.org/wiki/HSL_and_HSV
컬러: 색 변화 제어에 용이한 HSB
• 색상Hue, 채도Saturation, 명도Brightness를 조절하여 색을 표현하는 모델
PPP3 by ustwo
컬러: RGB VS HSB
R
G
B
60
152
199
194
231
249
134
190
218
31
74
96
컬러: RGB VS HSB
R
G
B
H
S
B
60
152
199
200
70
78
194
231
249
200
22
98
134
190
218
200
39
85
31
74
96
200
68
38
“그럼, 이걸 어떻게 활용하나요?”
# $
컬러: 디자이너의 컬러피커
Adobe Photoshop Adobe Illustrator Sketch
컬러: 모두를 위한 HSB
Sketch Chrome - Inspector
컬러: 모두를 위한 HSB
HSL HSB(=HSV)
팁! 컬러 고르기 훈련은 HSB모델로
• 웹서핑 중 만나게 되는 컬러를 HSB모델을 기반으로 눈 훈련하기
• 어느 정도의 채도(S)와 명도(B)일 때 이런 컬러가 표현되는지 분석해보는 훈련
• 하지만 색상 코드는 RGB...
CASE 2) PR 속 나의 디자인 코멘트?
A Label B Label
C Label D Label
CASE 2) PR 속 나의 디자인 코멘트!(컬러)
A Label B Label
C Label D Label
타이포그래피?
• 활판으로 하는 인쇄술
• 문자 배열, 문자 디자인과 문자 상형을 수정하는 기술과 예술
• 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성
하고 표현하는 일을 가리키는 용어.
• 서체의 선택...
타이포그래피
• 개념적, 시각적 요소
• 글자 크기/두께/사이, 커닝
• 글줄 높이/길이, 줄바꿈
타이포그래피의 개념적 요소
점
(=낱자, 단어)
가
선
(=글줄)
면
(=단락)
타이포그래피의 시각적 요소
회색 효과
색
시각적 촉각 포맷, 레이아웃 페이지, 책
질감 형태 크기
글자 크기 (font-size)
• 크기에 따라 가독성과 중요도(위계) 결정
• 글자 크기(본문 크기)에도 트렌드가 있다
• 1990년대 픽셀 단위로 변환
• 1990년대 후반 ~ 2000년대 초반 웹사이트 본문 텍스트...
글자 크기 (font-size): 본문 크기 변화
• 왜 키워야 하나?
• 디지털 환경에서 집중해서 읽는 경우가 줄어들고 있음
• 시력 및 나이 상관 없이 가독성 향상
• 가독성이 향상되면 사용자가 제시한 컨텐츠를 읽을...
글자 두께 (font-weight)
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ult...
글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침
글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침
글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침
글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침
글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침
글자 사이 (letter-spacing)
0
글자 사이 (letter-spacing)
-
커닝 (font-kerning)
• 글자의 모양 때문에 활자가 고르게 배열되지
않은 것처럼 보이는 것을 글자 모양에 따라
적당한 간격을 두게 조정하여 시각적으로
매끄럽고 자연스럽게 보이게 하는 것
커닝 (font-kerning)
• 글자의 모양 때문에 활자가 고르게 배열되지
않은 것처럼 보이는 것을 글자 모양에 따라
적당한 간격을 두게 조정하여 시각적으로
매끄럽고 자연스럽게 보이게 하는 것
커닝 (font-kerning)
• 글자의 모양 때문에 활자가 고르게 배열되지
않은 것처럼 보이는 것을 글자 모양에 따라
적당한 간격을 두게 조정하여 시각적으로
매끄럽고 자연스럽게 보이게 하는 것
커닝 (font-kerning)
• 글자의 모양 때문에 활자가 고르게 배열되지
않은 것처럼 보이는 것을 글자 모양에 따라
적당한 간격을 두게 조정하여 시각적으로
매끄럽고 자연스럽게 보이게 하는 것
커닝 연습 (https://type.method.ac)
글줄 높이 (line-height)
• 텍스트 한 줄의 높이로 Leading을 의미
• 폰트 사이즈와 상대적인 관계
• 글줄 사이의 선이 넓어질수록 회색도가 밝아짐
글줄 높이 (line-height)
Typography is the art and technique of setting
written subject matter in type using a
combination of t...
CASE 1) PR 속 나의 디자인 코멘트?
12,000원(2×6,000원)
CASE 1) PR 속 나의 디자인 코멘트!(글줄높이&정렬)
12,000원(2×6,000원)
글줄 길이 (text width)
• 디지털 환경에서의 글줄 길이는 container 박스의 너비에 따라 결정됨
• 글줄 길이가 길면 읽기에 부적합
글줄 길이 (text width)
글줄 길이 (text width)
글줄 길이 (text width)
글줄 길이 (text width)
줄바꿈 (word-break)
• word-break : normal;
• word-break : break-all;
• 단어 중간에 잘리면서 줄바꿈
• word-break : keep-all;
• 단어 중간이 잘리지 ...
줄바꿈 (word-break)
https://spoqa.github.io/2017/01/17/policy.html
줄바꿈 (word-break)
Word-break: keep-all; 을 쓰시면 조금은 덜 괴 로워질 것입니다
종합: 디자이너의 👀으로 연습하세요.
• 그리드
• 정렬과 여백
• 컬러
• HSB
• 타이포그라피
• 글자 크기/두께/사이, 커닝
• 글줄 높이/길이, 줄바꿈
🎉
당신은 이제 디자이너의 (👀)으로
디자인을 볼 수 있습니다!
디자이너의
(💭) 빌리기
CHAPTER 02
“어떻게 해서 그런 디자인이 나오는 거예요?”
# $
“어떻게 해서 그런 디자인이 나오는 거예요?”
# $
이것 저것을 고려합니다.
“이것 저것?”
# $
이것 저것을 고려합니다.
“이것 저것?”
# $
앞서 말한 그리드, 여백, 정렬, 컬러, 타이포그래피는 물론이고
화면 간의 이동이 얼마나 자연스러운지, 어포던스가 충분한지
“이것 저것?”
# $
첫 입문자에게도 서비스를 사용하는데 어려운 부분은 없는지...
‘UI디자인 패턴’이라는 친구가 요런 문제를 빠르게 도와줍니다!
Q1. 다음은 어떤 웹페이지일까요?
A) 설정
B) 서비스 사용후기
Flowchart kit for Sketch - Designed by Greg Dlubacz
Q1. 다음은 어떤 웹페이지일까요?
A) 설정
B) 서비스 사용후기
Flowchart kit for Sketch - Designed by Greg Dlubacz
Q2. 다음은 어떤 웹페이지일까요?
A) 대시보드
B) FAQ
Flowchart kit for Sketch - Designed by Greg Dlubacz
Q2. 다음은 어떤 웹페이지일까요?
A) 대시보드
B) FAQ
Flowchart kit for Sketch - Designed by Greg Dlubacz
A) 대시보드
B) 서비스 소개
Q3. 다음은 어떤 웹페이지일까요?
Flowchart kit for Sketch - Designed by Greg Dlubacz
A) 대시보드
B) 서비스 소개
Q3. 다음은 어떤 웹페이지일까요?
Flowchart kit for Sketch - Designed by Greg Dlubacz
당신은 이미 디자인 패턴 천재!
😎
ui-patterns.com
디자인 패턴 참고서
• 바이블
• Google Material design: https://material.io/design
• Apple HCI Guidelines: https://developer.apple.com/...
팁! 디자인 패턴 참고서, 활용은 이렇게
• 특정한 페이지를 어떻게 디자인해야할지 모르겠다면
• 특정 패턴 관련 디자인 검색
• 실제 서비스 참고
• 자신의 상황에 맞는 조건에 부합하는 레퍼런스 모으기
• 디자인 포트폴...
“디자이너의 사고 방식을 더 잘 알고 싶어요.”
# $
Refactoring UI
• 캐나다의 UI디자이너인 Steve Schoger의
프로젝트
• Twitter, Medium, Youtube를 통해서 UI
리디자인 꿀팁 게재
• UI디자이너가 화면의 디테일을 작업할 때의
...
🎉
당신은 이제 디자이너의 (👀)과 (💭)을
빌릴 수 있게 되셨습니다!
감사합니다.
jisunjessica.design@gmail.com
Prochain SlideShare
Chargement dans…5
×

[GDG seoul] 디자이너의 눈과 생각 빌리기: 개발자를 위한 디자인 특강

2 304 vues

Publié le

2018년 11월 14일
GDG 밋업 특강 발표 자료

Publié dans : Design

[GDG seoul] 디자이너의 눈과 생각 빌리기: 개발자를 위한 디자인 특강

  1. 1. PARK JISUN, 2018.11.14.WED 디자이너의 (👀)과 (💭) 빌리기 개발자를 위한 디자인 특강 공유용
  2. 2. 안녕하세요, Full stack designer 박지선입니다. • 現 Haezoom Product designer • 前 Spoqa Product designer • 5년 이상 웹/앱 프로젝트 참여 • UI 디자인, 브랜딩, UX 플로우, 퍼블리싱(HTML/CSS), 컨텐츠 작성, 퍼포먼스 마케팅 경험
  3. 3. Dodo Manager
 (2017)
  4. 4. Carry Protocol (2018)
  5. 5. Meetgo
 (2018)
  6. 6. 사기 높은 팀을 만드는 해피아워, 슬랙봇, 어디까지 만들어봤니?, Sublime Text 빠르게 적응하기 등…
 (2015~)
  7. 7. 강연을 하게 된 배경 디자인에 대해 알고 싶어하는 개발자가 많아요 오, 안그래도 최근에..!
  8. 8. 강연을 하게 된 배경: 코딩하는 디자이너 ~2012 • HTML & CSS 기본 지식 • 실무 경험 없음 • Indexihit • 1차 구현된 버전을 웹 브라우저의 Inspector로 스타일을 수정해보며 수정사항을 개발자에게 전달하면서 커뮤니케이션 시작 • 코딩을 했다고 하기에는 애매, 거의 숫자만 수정하는 식 2013
  9. 9. 강연을 하게 된 배경: 코딩하는 디자이너 • 답답해서 프로덕트의 코드를 직접 건들기 시작 • 사소한 디자인 버그였지만 찝찝해서 개발자가 수정할 때까지 기다릴 수 없었다. • 내부용 서비스의 초간단 디자인 버그부터 해결하기 시작 2014 • 외부 공개하는 프로젝트에도 코드 기여 • 프로덕션 레벨의 코드[HTML, CSS(SCSS)] 퍼블리싱 가능 • Pull Request의 디자인 리뷰를 볼 때, 왜 이게 안 되어있지? 싶은 것들이 보이기 시작 2015~현재
  10. 10. 강연을 하게 된 배경: PR 코멘트
  11. 11. Pull Request 속 나의 디자인 코멘트 유형 모아보기 시작
  12. 12. CASE 1) PR 속 나의 디자인 코멘트? 12,000원(2×6,000원)
  13. 13. CASE 2) PR 속 나의 디자인 코멘트? A Label B Label C Label D Label
  14. 14. CASE 3) PR 속 나의 디자인 코멘트? Button LanguageService name Menu1 Menu2
  15. 15. CASE 4) PR 속 나의 디자인 코멘트? Modal title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Button
  16. 16. 강연 들어가기 전에 • UI 디자인 내 그래픽 디자인 개념 × CSS 위주 • 디자인 소양을 높여줄, 쉽고 실용적인 이야기들 위주 • 디자이너라면 • UI디자인에 대한 기본 상식을 정리하는 시간 • 디자이너와 협업하는 분이라면 • 디자이너와의 소통에 도움이 될 것 • 디자인을 해보고 싶어하는 개발자라면 • 앞으로 어떻게 디자인을 보고 지식을 쌓아갈 수 있는지 알 수 있을 것
  17. 17. 디자이너의 (👀) 빌리기 CHAPTER 01
  18. 18. “미적 감각은 어떻게 기를 수 있나요?” # $
  19. 19. “미적 감각은 어떻게 기를 수 있나요?” # $ 원리 × 좋은 레퍼런스를 많이 × 고민
  20. 20. “어떻게 해야 디자인을 일관적으로 완성도 있게 할 수 있나요?” # $
  21. 21. “어떻게 해야 디자인을 일관적으로 완성도 있게 할 수 있나요?” # $ 원리 × 디테일
  22. 22. 원리(&개념) = 👀! # $
  23. 23. READY # $
  24. 24. 그리드 (grid) • 건축, 편집 디자인 등에서도 널리 쓰이고 있는 개념 • UI 요소들을 배치할 때 기본적인 기준이 되는 시스템 • 디지털 환경 디자인에서 12 컬럼 그리드 시스템은 표준 (예. Bootstrap) • 1, 2, 3, 4, 6, 12로 나뉘어 유연하게 대응 • 이해하기 쉬움 • 기기 환경에 맞는 그리드 활용 필요
  25. 25. 1 1 1 1 1 1 1 1 1 1 1 1 3 4 5 6 8 9 12 3 3 3 4 4 7 6 4 3
  26. 26. 1 1 1 1 1 1 1 1 1 1 1 1 3 4 5 6 8 9 12 3 3 3 4 4 7 6 4 3 • 히어로 섹션이나 컨텐츠가 1가지일 때
  27. 27. 1 1 1 1 1 1 1 1 1 1 1 1 3 4 5 6 8 9 12 3 3 3 4 4 7 6 4 3 • 이미지와 텍스트 중 어느 한쪽의 비중이 클 때
  28. 28. 1 1 1 1 1 1 1 1 1 1 1 1 3 4 5 6 8 9 12 3 3 3 4 4 7 6 4 3 • 한 섹션에 2~4개의 컨텐츠가 있을 때
  29. 29. 1 1 1 1 1 1 1 1 1 1 1 1 3 4 5 6 8 9 12 3 3 3 4 4 7 6 4 3 • 모바일에서 자주 쓰는 레이아웃
  30. 30. 여백 (padding, margin) • 구성 요소들 간의 관계를 잘 드러나게 도와줌 • 섹션간 구분, 포함 혹은 제외 관계, 요소간 구별 • 올바른 사용은 • 가독성 및 사용성 향상에 도움 • 시각적 무게에 따른 안정감
  31. 31. 여백 (padding, margin) • 구성 요소들 간의 관계를 잘 드러나게 도와줌 • 섹션간 구분, 포함 혹은 제외 관계, 요소간 구별 • 올바른 사용은 • 가독성 및 사용성 향상에 도움 • 시각적 무게에 따른 안정감(?)
  32. 32. 여백 (padding, margin): 시각적 무게 빡빡한 모달 Button Label Label 여유로운 모달 Button Label Label *Desktop view
  33. 33. CASE 4) PR 속 나의 디자인 코멘트? Modal title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Button
  34. 34. CASE 4) PR 속 나의 디자인 코멘트!(여백) Modal title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. Button
  35. 35. 정렬 (text-align) Left Center Right Justify • Left: 대부분의 언어문화권에서 친숙, 눈 움직임이 편함, 컨텐츠 양에 관계 없이 OK! • Center: 서커스 레이아웃으로 가독성 저하 가능성, 컨텐츠 양이 적을 때 적절히 사용!
  36. 36. 정렬 (text-align) Left Center Right Justify • Left: 대부분의 언어문화권에서 친숙, 눈 움직임이 편함, 컨텐츠 양에 관계 없이 OK! • Center: 서커스 레이아웃으로 가독성 저하 가능성, 컨텐츠 양이 적을 때 적절히 사용!
  37. 37. CASE 3) PR 속 나의 디자인 코멘트? Button LanguageService name Menu1 Menu2
  38. 38. CASE 3) PR 속 나의 디자인 코멘트! (정렬) Button LanguageService name Menu1 Menu2
  39. 39. “컬러는 어떻게 고르세요?” # $
  40. 40. “컬러는 어떻게 고르세요?” # $ 의미 × 위계× 상태 × 색 모델
  41. 41. 컬러: 의미 뭔가 잘못되었나? 찝찝한 완료 안심할 수 있는 완료
  42. 42. 컬러: 위계
  43. 43. 컬러: 상태 NORMAL HOVER ACTIVE DISABLED Spoqa BI guidelines
  44. 44. 컬러: CSS color: red; color: #192837; color: rgb(50, 115, 220); color: rgba(0, 0, 0, 0.5); color: hsl(17, 80%, 50%); color: hsla(20, 100%, 80%, 0.2);
  45. 45. 컬러: Color name color: red; color: #192837; color: rgb(50, 115, 220); color: rgba(0, 0, 0, 0.5); color: hsl(17, 80%, 50%); color: hsla(20, 100%, 80%, 0.2); 140가지 이상의 색상 이름
  46. 46. 컬러: HEX color: red; color: #192837; color: rgb(50, 115, 220); color: rgba(0, 0, 0, 0.5); color: hsl(17, 80%, 50%); color: hsla(20, 100%, 80%, 0.2); • Red(1-2번째 텍스트) • Green(3-4번째 텍스트) • Blue(5-6번째 텍스트)를 16진법으로 나타내는 방법 • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
  47. 47. 컬러: RGB color: red; color: #192837; color: rgb(50, 115, 220); color: rgba(0, 0, 0, 0.5); color: hsl(17, 80%, 50%); color: hsla(20, 100%, 80%, 0.2); • 빛의 삼원색인 Red, Green, Blue의 값으로 색상 표현 • RGB 각각 0~255의 범위를 가짐 • a는 색상의 투명도
  48. 48. 컬러: HSL color: red; color: #192837; color: rgb(50, 115, 220); color: rgba(0, 0, 0, 0.5); color: hsl(17, 80%, 50%); color: hsla(20, 100%, 80%, 0.2); • Hue(색상, 0~360) • Saturation(채도, 0~100) • Luminosity(명도, 0~100)의 값으로 색상 표현 • a는 색상의 투명도
  49. 49. 🧐 Q. ‘#DC767F’ 는 무슨 색?
  50. 50. A. 맞추었다면 HEX 천재 인정
  51. 51. 컬러: 인간의 멘탈모델에 가까운 HSL와 HSB HSL HSB(=HSV) https://en.wikipedia.org/wiki/HSL_and_HSV
  52. 52. 컬러: 색 변화 제어에 용이한 HSB • 색상Hue, 채도Saturation, 명도Brightness를 조절하여 색을 표현하는 모델 PPP3 by ustwo
  53. 53. 컬러: RGB VS HSB R G B 60 152 199 194 231 249 134 190 218 31 74 96
  54. 54. 컬러: RGB VS HSB R G B H S B 60 152 199 200 70 78 194 231 249 200 22 98 134 190 218 200 39 85 31 74 96 200 68 38
  55. 55. “그럼, 이걸 어떻게 활용하나요?” # $
  56. 56. 컬러: 디자이너의 컬러피커 Adobe Photoshop Adobe Illustrator Sketch
  57. 57. 컬러: 모두를 위한 HSB Sketch Chrome - Inspector
  58. 58. 컬러: 모두를 위한 HSB HSL HSB(=HSV)
  59. 59. 팁! 컬러 고르기 훈련은 HSB모델로 • 웹서핑 중 만나게 되는 컬러를 HSB모델을 기반으로 눈 훈련하기 • 어느 정도의 채도(S)와 명도(B)일 때 이런 컬러가 표현되는지 분석해보는 훈련 • 하지만 색상 코드는 RGB기반으로 기억해야 함 • RGB모델의 컬러 > HSB의 컬러×5 라서 1:1 호환 안됨
  60. 60. CASE 2) PR 속 나의 디자인 코멘트? A Label B Label C Label D Label
  61. 61. CASE 2) PR 속 나의 디자인 코멘트!(컬러) A Label B Label C Label D Label
  62. 62. 타이포그래피? • 활판으로 하는 인쇄술 • 문자 배열, 문자 디자인과 문자 상형을 수정하는 기술과 예술 • 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성 하고 표현하는 일을 가리키는 용어. • 서체의 선택, 크기, 선 길이, 선 간격, 문장 사이의 간격 맞춤과 단어 사이의 간격 맞춤을 포함한 글자 정돈 https://ko.wikipedia.org/wiki/타이포그래피
  63. 63. 타이포그래피 • 개념적, 시각적 요소 • 글자 크기/두께/사이, 커닝 • 글줄 높이/길이, 줄바꿈
  64. 64. 타이포그래피의 개념적 요소 점 (=낱자, 단어) 가 선 (=글줄) 면 (=단락)
  65. 65. 타이포그래피의 시각적 요소 회색 효과 색 시각적 촉각 포맷, 레이아웃 페이지, 책 질감 형태 크기
  66. 66. 글자 크기 (font-size) • 크기에 따라 가독성과 중요도(위계) 결정 • 글자 크기(본문 크기)에도 트렌드가 있다 • 1990년대 픽셀 단위로 변환 • 1990년대 후반 ~ 2000년대 초반 웹사이트 본문 텍스트 9-14px • 2011년~ 최소 16px, 20-24px, 34px 정도 되는 사이트들도 등장 • 원인 • 다양한 크기(반응형 개발)와 초고화질 디스플레이에 대응하기 위해서 (큰 디스플레이, 스마트 TV 등) • 스크롤 문제가 없어짐 https://blog.marvelapp.com/body-text-small/
  67. 67. 글자 크기 (font-size): 본문 크기 변화 • 왜 키워야 하나? • 디지털 환경에서 집중해서 읽는 경우가 줄어들고 있음 • 시력 및 나이 상관 없이 가독성 향상 • 가독성이 향상되면 사용자가 제시한 컨텐츠를 읽을 확률이 높아지고 집중할 필요가 줄어짐 • 컨텐츠의 메시지가 분명해짐 • 글자 크기가 커지면 폰트 완성도에 따른 차이가 커지기 때문에 폰트 사용 적절히! https://blog.marvelapp.com/body-text-small/
  68. 68. 글자 두께 (font-weight) 100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold • 자족(font-family) • 같은 스타일을 가진 폰트의 묶음 • 획의 굵기·기울기 등의 변형으로 각각 다른 폰트로 나뉨 • 다양한 폰트 굵기 사용은 지양
  69. 69. 글자 사이 (letter-spacing) • Tracking과 동일 • 텍스트 낱자 사이를 조정하는 것 • 시각적으로 일관되게 글자 사이의 공간이 늘어나는 정도 • 글자 그룹이나 글줄의 시각적 밀도에 영향을 미침
  70. 70. 글자 사이 (letter-spacing) • Tracking과 동일 • 텍스트 낱자 사이를 조정하는 것 • 시각적으로 일관되게 글자 사이의 공간이 늘어나는 정도 • 글자 그룹이나 글줄의 시각적 밀도에 영향을 미침
  71. 71. 글자 사이 (letter-spacing) • Tracking과 동일 • 텍스트 낱자 사이를 조정하는 것 • 시각적으로 일관되게 글자 사이의 공간이 늘어나는 정도 • 글자 그룹이나 글줄의 시각적 밀도에 영향을 미침
  72. 72. 글자 사이 (letter-spacing) • Tracking과 동일 • 텍스트 낱자 사이를 조정하는 것 • 시각적으로 일관되게 글자 사이의 공간이 늘어나는 정도 • 글자 그룹이나 글줄의 시각적 밀도에 영향을 미침
  73. 73. 글자 사이 (letter-spacing) • Tracking과 동일 • 텍스트 낱자 사이를 조정하는 것 • 시각적으로 일관되게 글자 사이의 공간이 늘어나는 정도 • 글자 그룹이나 글줄의 시각적 밀도에 영향을 미침
  74. 74. 글자 사이 (letter-spacing) 0
  75. 75. 글자 사이 (letter-spacing) -
  76. 76. 커닝 (font-kerning) • 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽고 자연스럽게 보이게 하는 것
  77. 77. 커닝 (font-kerning) • 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽고 자연스럽게 보이게 하는 것
  78. 78. 커닝 (font-kerning) • 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽고 자연스럽게 보이게 하는 것
  79. 79. 커닝 (font-kerning) • 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽고 자연스럽게 보이게 하는 것
  80. 80. 커닝 연습 (https://type.method.ac)
  81. 81. 글줄 높이 (line-height) • 텍스트 한 줄의 높이로 Leading을 의미 • 폰트 사이즈와 상대적인 관계 • 글줄 사이의 선이 넓어질수록 회색도가 밝아짐
  82. 82. 글줄 높이 (line-height) Typography is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form. Typography is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or
  83. 83. CASE 1) PR 속 나의 디자인 코멘트? 12,000원(2×6,000원)
  84. 84. CASE 1) PR 속 나의 디자인 코멘트!(글줄높이&정렬) 12,000원(2×6,000원)
  85. 85. 글줄 길이 (text width) • 디지털 환경에서의 글줄 길이는 container 박스의 너비에 따라 결정됨 • 글줄 길이가 길면 읽기에 부적합
  86. 86. 글줄 길이 (text width)
  87. 87. 글줄 길이 (text width)
  88. 88. 글줄 길이 (text width)
  89. 89. 글줄 길이 (text width)
  90. 90. 줄바꿈 (word-break) • word-break : normal; • word-break : break-all; • 단어 중간에 잘리면서 줄바꿈 • word-break : keep-all; • 단어 중간이 잘리지 않으면서 줄이 바뀌어 외톨이 글자가 생기지 않음 • 언어에 따라 활용 가능
  91. 91. 줄바꿈 (word-break) https://spoqa.github.io/2017/01/17/policy.html
  92. 92. 줄바꿈 (word-break) Word-break: keep-all; 을 쓰시면 조금은 덜 괴 로워질 것입니다
  93. 93. 종합: 디자이너의 👀으로 연습하세요. • 그리드 • 정렬과 여백 • 컬러 • HSB • 타이포그라피 • 글자 크기/두께/사이, 커닝 • 글줄 높이/길이, 줄바꿈
  94. 94. 🎉 당신은 이제 디자이너의 (👀)으로 디자인을 볼 수 있습니다!
  95. 95. 디자이너의 (💭) 빌리기 CHAPTER 02
  96. 96. “어떻게 해서 그런 디자인이 나오는 거예요?” # $
  97. 97. “어떻게 해서 그런 디자인이 나오는 거예요?” # $ 이것 저것을 고려합니다.
  98. 98. “이것 저것?” # $ 이것 저것을 고려합니다.
  99. 99. “이것 저것?” # $ 앞서 말한 그리드, 여백, 정렬, 컬러, 타이포그래피는 물론이고 화면 간의 이동이 얼마나 자연스러운지, 어포던스가 충분한지
  100. 100. “이것 저것?” # $ 첫 입문자에게도 서비스를 사용하는데 어려운 부분은 없는지... ‘UI디자인 패턴’이라는 친구가 요런 문제를 빠르게 도와줍니다!
  101. 101. Q1. 다음은 어떤 웹페이지일까요? A) 설정 B) 서비스 사용후기 Flowchart kit for Sketch - Designed by Greg Dlubacz
  102. 102. Q1. 다음은 어떤 웹페이지일까요? A) 설정 B) 서비스 사용후기 Flowchart kit for Sketch - Designed by Greg Dlubacz
  103. 103. Q2. 다음은 어떤 웹페이지일까요? A) 대시보드 B) FAQ Flowchart kit for Sketch - Designed by Greg Dlubacz
  104. 104. Q2. 다음은 어떤 웹페이지일까요? A) 대시보드 B) FAQ Flowchart kit for Sketch - Designed by Greg Dlubacz
  105. 105. A) 대시보드 B) 서비스 소개 Q3. 다음은 어떤 웹페이지일까요? Flowchart kit for Sketch - Designed by Greg Dlubacz
  106. 106. A) 대시보드 B) 서비스 소개 Q3. 다음은 어떤 웹페이지일까요? Flowchart kit for Sketch - Designed by Greg Dlubacz
  107. 107. 당신은 이미 디자인 패턴 천재! 😎
  108. 108. ui-patterns.com
  109. 109. 디자인 패턴 참고서 • 바이블 • Google Material design: https://material.io/design • Apple HCI Guidelines: https://developer.apple.com/design/human-interface- guidelines • 각종 UI pattern 아카이브 사이트 • http://ui-patterns.com , https://pttrns.com , https://onepagelove.com/ • 디자인 포트폴리오 사이트 • https://www.behance.net/ , https://dribbble.com/
  110. 110. 팁! 디자인 패턴 참고서, 활용은 이렇게 • 특정한 페이지를 어떻게 디자인해야할지 모르겠다면 • 특정 패턴 관련 디자인 검색 • 실제 서비스 참고 • 자신의 상황에 맞는 조건에 부합하는 레퍼런스 모으기 • 디자인 포트폴리오 사이트를 챙겨보신다면? • 비주얼만을 위한 디자인 작업물은 디지털 제품 참고용이 아닌 시각적인 R&D로만 받아들이기
  111. 111. “디자이너의 사고 방식을 더 잘 알고 싶어요.” # $
  112. 112. Refactoring UI • 캐나다의 UI디자이너인 Steve Schoger의 프로젝트 • Twitter, Medium, Youtube를 통해서 UI 리디자인 꿀팁 게재 • UI디자이너가 화면의 디테일을 작업할 때의 의식의 흐름을 굉장히 잘 알 수 있음
  113. 113. 🎉 당신은 이제 디자이너의 (👀)과 (💭)을 빌릴 수 있게 되셨습니다!
  114. 114. 감사합니다. jisunjessica.design@gmail.com

×