디자인하는 개발자, 개발하는 디자이너를 일컬어 소위 ‘개자이너’, ‘디발자’라고 한다. 우스갯소리지만, 그만큼 개발과 디자인은 교집합이 많다. 하지만 평생 프로그래밍만 배운 사람이 갑자기 디자인을 하려면 막막하다. 포토샵이나 일러스트레이터 같은 그래픽 툴 사용법을 배운다고 해결되는 일이 아니다. 그렇다고 앱 하나 만들기 위해 미술 이론을 알아야 하는 것도 아니다.

이 책은 나의 업무에서 당장 써 먹을 수 있는 ‘기본 디자인 법칙’에 대해 굉장히 친근하게 설명한다. 저자가 직접 그린 손 그림을 통해 ‘비주얼 씽킹’ 방식으로 설명하기 때문에, 평소 디자인에 문외한인 사람도 쉽게 이해할 수 있다.

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

우리는 순수 미술 작가와 컴퓨터 그래픽 디자이너이다. 이십여 년 동안 프랑스를 오가며 작품 활동과 디자인 및 일러스트 작업을 해 왔다. 문득 우리의 그림들이 살아 움직이면 재미있겠다는 생각이 들었다. 캐릭터가 말하고 움직이는 앱을 서너 개 만들었다. 힘들게 프로그래밍을 공부해 보니 디자인을 독학하는 개발자도 우리만큼 힘들겠다는 생각이 들었다.
나름 대학교를 미술대학부 전체 수석으로 졸업하고 석사를 마치고 프랑스에서 공부를 한 작가도 미술 용어와 이론이 여전히 쉽게 와 닿지 않는다. 그래서 디자인을 공부하는 개발자에게 도움을 주고 싶다는 마음으로 디자인 법칙을 쉽게 풀어 쓰는 노력을 하고 있다.

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

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

CHAPTER 3 디자인을 시작하는 법
Section 01 ( ) 제목 없음
Section 02 연관 단어 나열하기
Section 03 연관 단어로 유스케이스 작성하기

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

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

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

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

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

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

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

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

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

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

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

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

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

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