오즈코딩스쿨 디자인 캠프 - 예쁜 글자, 예쁜 색이 전부가 아니었다 — 타이포·컬러·위계를 배우며 (day2)

후하... 포스팅이 늦어버렸다. 하지만 더 잊어버리기 전에 기록하기로 한다. 

그리고 그날 한 과제를 피드백 받았는데 피드백 받고 수정은 추후 아마 3일 뒤? 공휴일때 다시 추가로 올릴 예정이다.

 

 

이번 수업에서는 디자인의 기본기라 할 수 있는 타이포그래피, 컬러, 시각적 위계를 배웠다. 솔직히 처음엔 폰트 고르고 색 고르는 게 뭐 그리 대단한 일일까 싶었다. 그런데 수업을 듣고 나니 생각이 완전히 바뀌었다. 글자도 색도, 결국은 "

 

사용자가 무엇을 먼저 보고 어떻게 읽을까"를 설계하는 일이었다

들어가기 전에 강사님이 강조한 말이 있다. 여기서 배우는 공식들은 절대적인 규칙이 아니라는 것. 디자인엔 정답이 없어서 상황에 따라 규칙을 깰 수도 있다. 다만 어떤 규칙이 있는지 먼저 알아야, 깰 때도 근거를 가지고 깰 수 있다고 한다. 이 말이 묘하게 안심이 됐다. 무작정 감으로 하는 게 아니라 기준이 있다는 거니까.

1. 타이포그래피 — 보기 좋게가 아니라 기억하기 쉽게

가장 인상 깊었던 말은 이거였다. "폰트를 보기 좋게 쓰는 것보다, 기억하기 쉽게 배치하는 게 더 중요하다." 같은 문장이라도 무엇을 강조하느냐에 따라 사용자의 행동 흐름이 바뀐다는 것이다. 타이포그래피가 단순히 예쁜 글씨가 아니라 행동을 설계하는 일이라는 게 새삼 와닿았다.

폰트는 크게 두 종류로 나뉜다. 장식이 없는 산세리프(우리로 치면 고딕체)는 현대적이고 직관적이라 IT·디지털 화면에 많이 쓰인다. 특히 작은 모바일 화면에서 글자 끝이 깨지지 않아 명확하게 읽힌다. 반대로 글자 끝에 장식이 있는 세리프(명조체)는 전통적이고 고급스러운 느낌이라 패션이나 하이엔드 브랜드에서 헤드라인이나 로고에 많이 쓴다.

수업에서 배운 일곱 가지 공식 중 기억에 남는 건 이런 것들이다.

• 폰트 종류는 최소한으로. 요소마다 다른 폰트를 쓰면 공간이 비좁고 불안해 보인다. 한 종류만 쓰고 두께만 조절해도 충분히 위계를 만들 수 있다.
• 행간은 글자 크기의 1.5~1.75배. 웹 접근성 가이드(WCAG 2.1)에서도 1.5배를 가장 보기 편한 간격으로 제안한다.
• 자간은 보통 -1~-2%. 좁히면 가독성이 좋아지지만 너무 좁으면 오히려 떨어진다. 한글은 영어보다 빽빽해 보여서 더 좁혀준다는 점도 새로 알았다.
• 글자색은 배경과 충분히 대비되게. 명암비는 4.5:1을 권장하고, 큰 글자는 3:1 이상이면 된다. 색약자 같은 시각적 약자도 함께 고려해야 한다는 점이 인상 깊었다.
• 위계는 3~4단계로. 두께·색상·간격으로 계층을 만드는데, 단계가 너무 많으면 오히려 중요도 전달이 어려워진다.
• 성격에 맞는 폰트 선택. 10대 타깃 서비스에 딱딱한 명조체를 쓰면 고루해 보이고, 신뢰가 중요한 서비스에 통통 튀는 서체를 쓰면 가벼워 보인다. 상황에 맞는 옷을 입어야 하는 것과 같다.

폰트는 어디서 받는지도 배웠다. 영문은 라이선스 걱정이 거의 없는 구글 폰트, 한글은 상업용 무료 폰트가 모여 있는 눈누를 우선 보면 된다고 한다. 서체는 일단 프리텐다드부터 깔고 시작해서 넓혀가라고 하셨다. 어디에 있어도 무난한 기본 서체라고. 나도 일단 프리텐다드로 시작해볼 생각이다.

2. 컬러 — 브랜드와 시스템의 언어

색은 그냥 예쁜 걸 고르는 줄 알았는데, 색에도 역할과 문법이 있었다. 색은 크게 색상(Hue)·명도·채도로 나뉘는데, 특히 채도가 흥미로웠다. 채도가 높으면 강하고 즉각적이라 CTA 버튼이나 경고에 쓰고, 낮으면 차분해서 배경이나 비활성 요소에 쓴다. 같은 색이라도 어디에 쓰느냐가 정해져 있는 셈이다.

색마다 주는 느낌도 다르다. 빨강은 "지금 당장 봐!" 하는 주목성이 있어 미디어에, 파랑은 신뢰감이 있어 IT·금융에, 초록은 건강함이 있어 웰니스에 많이 쓰인다. 내가 가고 싶은 헬스케어 쪽에서 파랑과 초록이 왜 그렇게 많이 보였는지 이제야 이해가 됐다.

색을 조합하는 방법도 세 가지를 배웠다. 강한 대비가 필요하면 색상환에서 마주 보는 보색, 조화롭고 부드러운 인상이 필요하면 인접한 유사색, 다채롭고 활기찬 느낌이 필요하면 120도 간격의 삼각색을 쓴다. 보색은 잘못 쓰면 촌스러워지기 쉬워서, 메인 색을 정하고 포인트로만 쓰는 게 좋다고 한다.

그중 가장 실무적이라 느낀 건 시스템 컬러였다. 브랜드를 표현하는 색이 아니라, 사용자의 상태를 알려주는 기능적인 색이다.

상태컬러의미

에러(Error)	레드	문제를 인지하고 수정해야 하는 상태
석세스(Success)	그린	정상적으로 완료됐음을 확인시키는 상태
인포메이션(Information)	블루	다음 행동을 판단하는 데 필요한 정보 제공

재미있던 건, 브랜드 컬러가 빨강이어도 에러용 빨강은 그와 구분되는 다른 빨강을 쓴다는 점이다. 색 하나에도 이렇게 의도가 들어간다는 게 신기했다.

참고로 팬톤이 매년 발표하는 올해의 컬러가 있는데, 2026년은 부드러운 흰색 계열인 '클라우드 댄서'라고 한다. 트렌드를 무조건 따를 필요는 없지만 흐름은 알아두면 좋다고 하셨다.

3. 시각적 위계 — 무엇을 먼저 보게 할까

마지막은 화면 안에서 중요도를 만드는 법이다. 모든 디자인은 점·선·면이라는 조형에서 출발하는데, 이걸 어떻게 다루느냐로 위계가 생긴다. 위계를 만드는 방법은 네 가지로 정리됐다.

• 크기 차이. 요소 크기가 다르면 큰 쪽으로 시선이 먼저 간다. 차이가 없으면 강조하고 싶은 게 묻혀버린다.
• 색의 대비. 색은 크기보다 빠르게 인식된다. 그래서 로그인이나 주요 CTA 버튼처럼 꼭 봐야 하는 곳에 선택적으로 쓴다.
• 공간감. 원근감이나 그림자로 깊이를 줘서 위계를 만든다. 카드 UI나 FAB 버튼에 그림자를 주는 게 그 예다.
• 형태. 스큐어모피즘처럼 입체감을 살려 요소를 도드라지게 만든다.

생각해보니 세 가지 주제가 결국 같은 곳을 향하고 있었다. 타이포도, 컬러도, 위계도 전부 "사용자가 무엇을 먼저 보고, 어떻게 읽고, 무엇을 눌러야 할지 헷갈리지 않게 만드는 일"이었다.

 

이번 과제는 배운걸 바탕으로 적용하고 포스터를 만들어 보는 것이였다. 

내가 좋아하는 사진에서 색상을 추출한뒤 적어보고 그 색상을 바탕으로 포스터를 만들어 보는것..!

공개적인 공간에 사적인 사진을 올리는게 그래서 못올리지만, 요 근래 서울 이태원에 갔던 세이투셰 인테리어소품샵에서 찍은 사진을 바탕으로 추출했다. 

 

색상 코드	색이 주는 느낌 및 시스템적 역할 (예시)
#05C7F2	사진 속 스테인드글라스에서 추출. 다른 차분한 색들과 달리 튀는 색. 주황색과 보색으로 시각적 긴장을 만들어 위트 있는 세이투셰의 키치함을 표현. (고명도/고채도)
#64732F	공간을 가득 채운 식물에서 추출. 자연과 빈티지함을 표현하는 색. 식물의 생기를 불어넣어 줌. 클래식하고 진중한 무드를 위해 채도와 명도가 낮음. (저명도/저채도). 메인 컬러.
#F28705	하늘색과 보색 관계. 올리브 그린과 브라운을 자연스럽게 연결하는 중간색. 중명도/고채도
#A67B56	거울속 창문 셔터에서 추출. 올리브 그린과 달리 흙, 가죽, 오래된 것을 떠올리게 함. 진중한 빈티지 무드. (중명도/저채도)
#D9C6BA	사진 속 벽면에서 추출. 팔레트의 텍스트 색으로 사용. 어두운 배경 위에서 부드럽고 클래식한 느낌을 줌. (고명도/저채도)

 

 

< 작업한 포스터 >

 

폰트: Playfair Display

• 해당 브랜드의 클래식, 빈티지 무드에 맞는 Playfair Display을 사용했습니다.
• 통일성을 주기 위해 해당 포스터에는 한가지의 폰트만 사용했습니다.

헤드라인

• 팔레트 컬러 중 포인트 되는 주황색(#F28705 )을 사용하여 시각적 집중을 이끌어 냈습니다.
• 폰트는 64pt 크기로 다른 텍스트 보다 크게 하여 보다 강조하였습니다
• 굵기는 black
• 행간은 헤드라인이 시각적으로 한눈에 분산되어 보이제 않게 하기위해 1.1배율로 설정했습니다
• 자간은 너무 좁거나 넓게 하는 것보단 0이 가장 적절하여 건드리지 않았습니다.

서브타이틀

• 배경색( 올리브색, #64732F )에 튀지 않고 자연스럽게 묻어가기 위해 채도가 낮은 #D9C6BA 색으로 선택했습니다.
• 헤드라인을 부가적으로 설명해주는 역할이기에 굵기는 미디엄으로 했습니다.

일정 및 장소

• 헤드라인을 시각적을 본 후 그 다음에 볼 수있도록 헤드라인 아래에 배치하였습니다
• date, place 는 미디엄으로 굵기를 설정하였고 정보텍스쳐는 더 강조하기 위해 black 으로 설정하였습니다.
• date 정보는 날짜와 시간을 두 줄로 나누어 한눈에 들어올 수 있도록 하였고 행간을 25로 설정하여 정보가 분리되어 읽을 수 있도록 하였습니다.

 

- 아직 많이 부족한 실력, 피드백으로 흑백으로 하면 더 선명하게 나올꺼라고 해주셨다 또한 헤드라인을 크게 해도 괜찮을꺼 같다고 하심.  밑에 일정이나 이런 부분 중간으로 다 맞추고...! 지금은 바빠서 못하지만 곧 공휴일이니 피드백 받은걸로 다시 고쳐서 와야겠다. 

 

+ 26 / 6 / 3

피드백을 반영해서 수정한 걸 가지고 왔습니다~~~ 

53 Noksapyeong-daero 32-gil, Yongsan-gu, Seoul

배경과 폰트의 명도가 비슷해 배경색의 명도를 낮춰 폰트의 색이 강조되게 변경, 헤드라인 크기를 더 키우고 오른쪽 데코레이션 줄, 녹색과 갈색의 구분을 위해 외각선 생성함.