IT개발자를 위한 눈높이 디자인 강좌. 나의 업무에서 당장 써 먹을 수 있는 ‘기본 디자인 법칙’에 대해 굉장히 친근하게 설명한다. 저자가 직접 그린 손 그림을 통해 ‘비주얼 씽킹’ 방식으로 설명하기 때문에, 평소 디자인에 문외한인 사람도 쉽게 이해할 수 있다. 기본 문법만 잘 지키면 버튼 하나, 배너 하나를 만들더라도 내가 원하는 감성을 사용자에게 잘 전달할 수 있다.

 

소스 코드를 읽듯
디자인도 읽을 수 있어야 한다!

디자인은 어려운 것이 아니다. 프로그래밍에도 문법이 있듯이 디자인에도 문법이 있다. 기본 문법만 잘 지키면 버튼 하나, 배너 하나를 만들더라도 내가 원하는 감성을 사용자에게 잘 전달할 수 있다. 이 책을 통해 디자인 감각을 갖춘 개발자로 업그레이드 해 보자! 여러분도 디자인을 잘 할 수 있다!


Part 1. 디자인 감각을 갖춘 개발자를 위한 첫걸음
디자인도 일종의 언어다. 따라서 프로그래밍을 공부하는 것처럼 연습한다면 개발자도 디자인을 잘 할 수 있다.

Part 2. 좋은 디자인의 기본 법칙_색과 형태
디자인을 이루는 기본 요소인 밝기, 맑기, 색상, 형태의 특성에 대해 알아본다. 기본만 알아도 절반은 성공한다.

Part 3. 좋은 디자인을 만드는 색상 표현 법칙
바탕색은 골랐는데 버튼 색을 못 고르겠다면 색상이 주는 느낌부터 알아야 한다. 특별히 앱 디자인에 바로 적용할 수 있는 배색 레이아웃 샘플을 소개한다.

Part 4. 좋은 디자인을 만드는 표현 법칙
사용자를 고려한 디자인의 숨은 법칙을 비주얼 씽킹 방식으로 설명한다. 마치 만화를 읽듯 술술 이해할 수 있다.

Part 1. 디자인 감각을 갖춘 개발자를 위한 첫걸음
Chapter 1 디자인과 마주하기
01 디자인을 잘하고 싶은 개발자, 그건 바로 나
02 디자인에 대한 5가지 오해
03 디자인\u003d언어
04 개발자도 디자인을 잘 할 수 있다

Chapter 2 디자인 감각을 키우는 방법
01 다양한 각도에서 관찰하기
02 디자이너 마인드 갖기
03 색 감각을 키우는 연습하기
04 단순한 도형으로 그리는 연습하기
05 사람의 인지 시스템 이해하기
06 그림 문자 쓰는 연습하기

Chapter 3 디자인을 시작하는 법
01 [ ], 제목 없음
02 연관 단어 나열하기
03 연관 단어로 유스케이스 작성하기


Part 2 좋은 디자인의 기본 법칙_색과 형태
Chapter 1 색의 밝기
01 남이 하면 심플, 내가 하면 허전
02 색의 본연의 밝기
03 색의 밝기가 만드는 느낌
04 밝기 차이가 만드는 흐름
05 바탕색 밝기로 결정하는 스타일
06 깜깜한 밤에 더욱 빛나는 별
07 모바일 화면에서 사진이 더 선명해 보이는 이유

Chapter 2 색의 맑기
01 꽃보다 화사한 개발자
02 순도 100%, 진한 맛의 원색
03 강렬하거나 화려한 색_원색
04 가장 먼저 보이는 색_원색
05 무료함을 확 깨우는 색_원색
06 흔한 강조는 무의미
07 맑기 차이주고 화사함 몰아주기
08 모태형광_노란색 원색
09 멈추시오!_빨간색 원색
10 긍정의 메시지_녹색 원색
11 쉿! 종용한 강조_파란색 원색

Chapter 3 색상
01 사물이 반사하는 빛의 파장
02 RGB, CMYK, HSB 색 모드
03 지금 RGB 색 모드인지 확인하기
04 물감으로 색 만들기_HSB
05 찬란하게 빛나는 색 모드_RGB
06 인쇄용 색 모드_CMYK
07 빛을 스펙트럼해 보여 주는 먼셀 색상표
08 색의 하모니, 색상 설계
09 솔직한 돌직구 스타일, 단색 설계법
10 우린 같은 편_비슷한 색 설계
11 밀당의 재미_약한 반대색 설계

Chapter 4 형태
01 점을 찍어야 선을 긋지
02 한 줄로 나란히 위치한 점의 집합_선
03 색을 담는 그릇_도형
04 견고한 사각형
05 주목! 삼각형
06 평등과 순환_원형
07 선으로 만드는 무늬_글꼴
08 점, 선, 면의 조합 이미지


Part 3, 좋은 디자인을 만드는 색상 표현 법칙
Chapter 1 빨간색
01 색 중의 색_빨간색 원색
02 빨간색을 돋보이게 하는 색_하얀색
03 하얀색과 퓨전_코랄핑크색
04 빨간색을 맑게 보이게 하는 색_은빛회색
05 빨간색을 산뜻하게 하는 색_녹색
06 빨간색을 상쾌하게 하는 색_하늘색
07 빨간색을 발랄하게 하는 색_짙고 푸른 어둠색
08 빨간색을 강하고 무겁게 하는 색_검은색
09 부드러운 맛이 느껴지는 색_인디핑크색
10 옛 도시의 낭만을 담은 빨간색_붉은 갈색

Chapter 2 오렌지색과 노란색
01 에너지를 충전해 주는 색_오렌지색
02 명랑한 색_오렌지색
03 부드럽고 따뜻한 색_노란색
04 원색을 고급스럽게 하는 색_초콜릿색
05 상큼한 느낌을 주는 색_레몬색

Chapter 3 녹색
01 자연의 색_녹색
02 하얀색과 함께 하면 순수한 느낌을 갖는 색_녹색
03 바탕색 용도로 쓰이는 색_녹색
04 만능 바탕색_칠판녹색
05 강조할 부분에 적절한 색_형광 녹색
06 그리움이 느껴지는 색_민트색
07 햇살 담은 색_올리브녹색
08 새내기처럼 풋풋한 색_연두색
09 녹색을 은은하고 우아하게 하는 배색_녹색과 회색 배색
10 생긴 건 엄마 닮았는데 성격은 아빠인 색_에메랄드녹색
11 청량한 느낌의 색_아쿠아마린색

Chapter 4 파란색
01 하늘색은 진리
02 글과 아이콘에 쓰는 색_진한 하늘색
03 창밖의 하늘은 왜 이리도 맑고 푸른지_하늘색 원색
04 마음을 진정시키는 색_파란색
05 더운 여름에 더 생각나는 색_파란색
06 지식과 권력을 상징하는 색_깊은바다색
07 ‘산토리니’ 하면 떠오르는 색_코발트색

Chapter 5 보라색
01 미치거나 혹은 예쁘거나_보라색
02 겉은 차가워도 속은 따뜻한 색_라벤더꽃색
03 봄바람이 부는 듯한 색_진달래꽃색
04 고귀한 귀족의 색_로얄 보라색


Part 4 좋은 디자인을 만드는 표현 법칙
Chapter 1 이미지로 설명하기
01 이미지로 보여 주기
02 느낌으로 알려 주기
03 정보의 뜻에 맞는 표현하기
04 각 나라마다 다른 이미지 표현 방식
05 이미지로 여러 말을 대신하기
06 익숙한 정보에 비교하기
07 표현을 반복해서 규칙 보여 주기
08 이미지로 움직임을 보여 주기
09 선과 도형으로 관계 표현하기
10 진행 절차 표현하기
11 표로 데이터를 분류하고 정리하기
12 그래프로 차이를 비교하기
13 비율로 보여 주기
14 위치 보여 주기

Chapter 2 착시를 이용한다
01 두뇌는 착각의 왕
02 화면을 창문이라 착각
03 평면 이미지를 입체 이미지로 착각
04 화면을 얼굴로 착각
05 기본 도형으로 결합한 그림
06 사각형보다 작아 보이는 원형과 삼각형
07 실제와 달라 보이는 간격과 너비

Chapter 3 전체 모양을 다듬다
01 의식이 한 곳에 집중할 때 무의식이 보는 영역
02 불안감을 싫어하는 무의식
03 그림이 여백이고 여백이 그림
04 길을 따라가는 시선

Chapter 4 정보를 분류하여 정렬한다
01 정보에 순서 매기기
02 정보를 주제별로 정리하기
03 같은 주제는 하나로 뭉쳐 보이게 하기
04 정보를 작게 잘라 나누기
05 정보 사이사이에 빈 공간 두기
06 일의 부담을 줄이기
07 확실한 차이 보여 주기
08 리듬 살리기
09 무게 균형 맞추기

Chapter 5 글과 그림이 어우러지도록 한다
01 이미지를 배치해 이야기 만들기
02 크기와 비율 유지하기
03 글을 그림의 일부로 만들기
04 다크 모드에서는 짙은 회색 사용하기