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

PARK JISUN, 2018.11.14.WED
디자이너의
(👀)과 (💭) 빌리기
개발자를 위한 디자인 특강
공유용

안녕하세요,
Full stack designer 박지선입니다.
• 現 Haezoom Product designer
• 前 Spoqa Product designer
• 5년 이상 웹/앱 프로젝트 참여
• UI 디자인, 브랜딩, UX 플로우, 퍼블리싱(HTML/CSS), 컨텐츠 작성, 퍼포먼스 마케팅 경험

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

강연을 하게 된 배경
디자인에 대해
알고 싶어하는
개발자가 많아요 오,
안그래도
최근에..!

강연을 하게 된 배경: 코딩하는 디자이너
~2012
• HTML & CSS 기본 지식
• 실무 경험 없음
• Indexihit
• 1차 구현된 버전을 웹 브라우저의 Inspector로 스타일을 수정해보며 수정사항을 개발자에게
전달하면서 커뮤니케이션 시작
• 코딩을 했다고 하기에는 애매, 거의 숫자만 수정하는 식
2013

강연을 하게 된 배경: 코딩하는 디자이너
• 답답해서 프로덕트의 코드를 직접 건들기 시작
• 사소한 디자인 버그였지만 찝찝해서 개발자가 수정할 때까지 기다릴 수 없었다.
• 내부용 서비스의 초간단 디자인 버그부터 해결하기 시작
2014
• 외부 공개하는 프로젝트에도 코드 기여
• 프로덕션 레벨의 코드[HTML, CSS(SCSS)] 퍼블리싱 가능
• Pull Request의 디자인 리뷰를 볼 때, 왜 이게 안 되어있지? 싶은 것들이 보이기 시작
2015~현재

강연을 하게 된 배경: PR 코멘트

Pull Request 속
나의 디자인 코멘트 유형
모아보기 시작

CASE 1) PR 속 나의 디자인 코멘트?
12,000원(2×6,000원)

A Label B Label
C Label D Label

Button LanguageService name Menu1 Menu2

Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt.
Button

강연 들어가기 전에
• UI 디자인 내 그래픽 디자인 개념 × CSS 위주
• 디자인 소양을 높여줄, 쉽고 실용적인 이야기들 위주
• 디자이너라면
• UI디자인에 대한 기본 상식을 정리하는 시간
• 디자이너와 협업하는 분이라면
• 디자이너와의 소통에 도움이 될 것
• 디자인을 해보고 싶어하는 개발자라면
• 앞으로 어떻게 디자인을 보고 지식을 쌓아갈 수 있는지 알 수 있을 것

디자이너의
(👀) 빌리기
CHAPTER 01

“미적 감각은 어떻게 기를 수 있나요?”
# $

“미적 감각은 어떻게 기를 수 있나요?”
# $
원리 × 좋은 레퍼런스를 많이 × 고민

“어떻게 해야 디자인을
일관적으로 완성도 있게 할 수 있나요?”
# $

“어떻게 해야 디자인을
일관적으로 완성도 있게 할 수 있나요?”
# $
원리 × 디테일

그리드 (grid)
• 건축, 편집 디자인 등에서도 널리 쓰이고 있는 개념
• UI 요소들을 배치할 때 기본적인 기준이 되는 시스템
• 디지털 환경 디자인에서 12 컬럼 그리드 시스템은 표준 (예. Bootstrap)
• 1, 2, 3, 4, 6, 12로 나뉘어 유연하게 대응
• 이해하기 쉬움
• 기기 환경에 맞는 그리드 활용 필요

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 incididunt.
Button

정렬 (text-align)
Left Center Right Justify
• Left: 대부분의 언어문화권에서 친숙, 눈 움직임이 편함, 컨텐츠 양에 관계 없이 OK!
• Center: 서커스 레이아웃으로 가독성 저하 가능성, 컨텐츠 양이 적을 때 적절히 사용!

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: hsla(20, 100%, 80%, 0.2);

컬러: 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가지 이상의 색상 이름

컬러: 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

컬러: 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는 색상의 투명도

컬러: 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는 색상의 투명도

🧐
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기반으로 기억해야 함
• RGB모델의 컬러 > HSB의 컬러×5 라서 1:1 호환 안됨

CASE 2) PR 속 나의 디자인 코멘트!(컬러)
A Label B Label
C Label D Label

타이포그래피?
• 활판으로 하는 인쇄술
• 문자 배열, 문자 디자인과 문자 상형을 수정하는 기술과 예술
• 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성
하고 표현하는 일을 가리키는 용어.
• 서체의 선택, 크기, 선 길이, 선 간격, 문장 사이의 간격 맞춤과
단어 사이의 간격 맞춤을 포함한 글자 정돈
https://ko.wikipedia.org/wiki/타이포그래피

타이포그래피
• 개념적, 시각적 요소
• 글자 크기/두께/사이, 커닝
• 글줄 높이/길이, 줄바꿈

타이포그래피의 개념적 요소
점
(=낱자, 단어)
가
선
(=글줄)
면
(=단락)

타이포그래피의 시각적 요소
회색 효과
색
시각적 촉각 포맷, 레이아웃 페이지, 책
질감 형태 크기

글자 크기 (font-size)
• 크기에 따라 가독성과 중요도(위계) 결정
• 글자 크기(본문 크기)에도 트렌드가 있다
• 1990년대 픽셀 단위로 변환
• 1990년대 후반 ~ 2000년대 초반 웹사이트 본문 텍스트 9-14px
• 2011년~ 최소 16px, 20-24px, 34px 정도 되는 사이트들도 등장
• 원인
• 다양한 크기(반응형 개발)와 초고화질 디스플레이에 대응하기 위해서
(큰 디스플레이, 스마트 TV 등)
• 스크롤 문제가 없어짐
https://blog.marvelapp.com/body-text-small/

글자 크기 (font-size): 본문 크기 변화
• 왜 키워야 하나?
• 디지털 환경에서 집중해서 읽는 경우가 줄어들고 있음
• 시력 및 나이 상관 없이 가독성 향상
• 가독성이 향상되면 사용자가 제시한 컨텐츠를 읽을 확률이 높아지고 집중할 필요가 줄어짐
• 컨텐츠의 메시지가 분명해짐
• 글자 크기가 커지면 폰트 완성도에 따른 차이가 커지기 때문에 폰트 사용 적절히!
https://blog.marvelapp.com/body-text-small/

글자 두께 (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)
• 같은 스타일을 가진 폰트의 묶음
• 획의 굵기·기울기 등의 변형으로 각각
다른 폰트로 나뉨
• 다양한 폰트 굵기 사용은 지양

글자 사이 (letter-spacing)
• Tracking과 동일
• 텍스트 낱자 사이를 조정하는 것
• 시각적으로 일관되게 글자 사이의 공간이
늘어나는 정도

• 글자 그룹이나 글줄의 시각적 밀도에
영향을 미침

0

-

커닝 (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 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

CASE 1) PR 속 나의 디자인 코멘트!(글줄높이&정렬)
12,000원(2×6,000원)

글줄 길이 (text width)
• 디지털 환경에서의 글줄 길이는 container 박스의 너비에 따라 결정됨
• 글줄 길이가 길면 읽기에 부적합

줄바꿈 (word-break)
• word-break : normal;
• word-break : break-all;
• 단어 중간에 잘리면서 줄바꿈
• word-break : keep-all;
• 단어 중간이 잘리지 않으면서 줄이 바뀌어
외톨이 글자가 생기지 않음
• 언어에 따라 활용 가능

https://spoqa.github.io/2017/01/17/policy.html

Word-break: keep-all; 을 쓰시면 조금은 덜 괴 로워질 것입니다

종합: 디자이너의 👀으로 연습하세요.
• 그리드
• 정렬과 여백
• 컬러
• HSB
• 타이포그라피
• 글자 크기/두께/사이, 커닝
• 글줄 높이/길이, 줄바꿈

🎉
당신은 이제 디자이너의 (👀)으로
디자인을 볼 수 있습니다!

디자이너의
(💭) 빌리기
CHAPTER 02

“어떻게 해서 그런 디자인이 나오는 거예요?”
# $

“어떻게 해서 그런 디자인이 나오는 거예요?”
# $
이것 저것을 고려합니다.

“이것 저것?”
# $
이것 저것을 고려합니다.

# $
앞서 말한 그리드, 여백, 정렬, 컬러, 타이포그래피는 물론이고
화면 간의 이동이 얼마나 자연스러운지, 어포던스가 충분한지

# $
첫 입문자에게도 서비스를 사용하는데 어려운 부분은 없는지...
‘UI디자인 패턴’이라는 친구가 요런 문제를 빠르게 도와줍니다!

Q1. 다음은 어떤 웹페이지일까요?
A) 설정
B) 서비스 사용후기
Flowchart kit for Sketch - Designed by Greg Dlubacz

A) 대시보드
B) FAQ

A) 대시보드
B) 서비스 소개

당신은 이미 디자인 패턴 천재!
😎

디자인 패턴 참고서
• 바이블
• 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/

팁! 디자인 패턴 참고서, 활용은 이렇게
• 특정한 페이지를 어떻게 디자인해야할지 모르겠다면
• 특정 패턴 관련 디자인 검색
• 실제 서비스 참고
• 자신의 상황에 맞는 조건에 부합하는 레퍼런스 모으기
• 디자인 포트폴리오 사이트를 챙겨보신다면?
• 비주얼만을 위한 디자인 작업물은 디지털 제품 참고용이 아닌 시각적인 R&D로만 받아들이기

“디자이너의 사고 방식을 더 잘 알고 싶어요.”
# $

Refactoring UI
• 캐나다의 UI디자이너인 Steve Schoger의
프로젝트
• Twitter, Medium, Youtube를 통해서 UI
리디자인 꿀팁 게재
• UI디자이너가 화면의 디테일을 작업할 때의
의식의 흐름을 굉장히 잘 알 수 있음

🎉
당신은 이제 디자이너의 (👀)과 (💭)을
빌릴 수 있게 되셨습니다!

감사합니다.
jisunjessica.design@gmail.com

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

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