오즈코딩스쿨 새싹반 - 모든 표현의 기본은 프레임이다 (1회차)

 

 

오늘은 듣기보다 만드는 시간이 많았다. 지난 시간에 배운 게슈탈트 이론을 가볍게 복습하고, 거기서부터 디자인의 진짜 기초로 들어갔다. 글자를 어떻게 다루는지(타이포그래피), 그리고 색이 뭔지(컬러)까지. 그런데 수업 내내 강사님은 계속 같은 말로 돌아왔다. 디자인은 결국 "이걸 어떻게 읽게 만들까"를 푸는 일이라는 것. 화려한 기술 이야기인 줄 알았는데, 끝까지 남은 건 의외로 단순하고 묵직한 문장이었다.

게슈탈트, 우리가 무언가를 "읽는" 방식

먼저 게슈탈트 이론을 다시 짚었다. 이름은 어렵지만, 사람 눈이 여러 개를 어떻게 묶어서 보는지에 대한 원리다. 쉽게 말하면 "우리 뇌가 알아서 정리해서 보는 습관"이라고 생각하면 된다.

원리쉽게 말하면예시

유사성의 원리	비슷하게 생긴 것끼리 한 덩어리로 본다	같은 색 점들은 한 무리로 보임
근접성의 원리	가까이 붙어 있으면 같은 그룹으로 본다	가까운 글자들은 한 줄로 읽힘
연속성의 원리	쭉 이어지면 하나의 흐름으로 본다	점이 늘어서면 선처럼 보임

신기했던 건 연속성의 원리였다. 사실은 없는 모양도 우리 눈이 알아서 만들어낸다는 것. 네 귀퉁이에 점만 찍어둬도 거기 사각형이 "있다"고 느낀다. 실제로는 아무 선도 없는데 말이다. 거기에 더해서, 어디에 초점을 두느냐에 따라 같은 그림도 다르게 읽힌다.

그래서 강사님이 정리해준 디자인의 정의가 인상 깊었다.

디자인이라는 건 이 원리들을 이용해서, 사람이 가장 이해하기 편한 모양으로 대상을 만드는 일이다.

예쁘게 만드는 게 먼저가 아니라, 잘 읽히게 만드는 게 먼저라는 얘기. 사진 여러 장을 늘어놓고 "이걸 어떤 순서로 읽게 할까"를 생각하면서 배치하는 게 디자인의 출발점이었다. 그리고 이렇게 글과 그림을 화면에 배치하는 작업을 레이아웃이라고 부른다.

레이아웃의 목적은 딱 하나다. "이걸 어떻게 읽게 만들 것인가"를 해결하는 과정이다.

(나중에 그리드라는 걸 배워서 더 정교하게 배치하게 된다는데, 그건 다음 기회로 넘어갔다.)

디자인이 다루는 건 결국 글과 그림, 두 가지뿐

여기서 머리가 한 번 정리됐다. 우리가 화면에서 읽는 모든 걸 콘텐츠라고 부르는데, 이 콘텐츠를 쪼개면 딱 두 가지밖에 없다는 것.

• 글(텍스트) — 디자인에서 이걸 다루는 방식이 타이포그래피다
• 그림(이미지) — 사진, 그래픽, 그리고 움직이는 이미지인 영상까지 다 여기 포함된다

소리는? 그래픽 디자인이니까 당연히 빠진다. 결국 디자인은 글과 그림, 이 두 가지를 어떻게 다루느냐의 싸움이었다. 오늘은 그중에서 글, 타이포그래피를 집중적으로 배웠다. (이미지를 다루는 건 다음 시간 몫이라고 했다.)

모든 글자는 자기 역할이 있다 — 하이어라키

타이포그래피에서 제일 중요한 한 가지. 화면에 있는 모든 글자는 각자 "역할"을 가지고 있다는 것이다. 그 역할은 보통 네 가지로 나뉜다.

역할무슨 글자인가

타이틀	제목. 제일 크고 눈에 먼저 들어오는 글자
부제	제목 밑에 붙는 보조 설명
본문	실제 내용이 담긴 글
캡션	사진 밑 설명이나 주석처럼 작게 붙는 글

이 네 가지를 묶어서 부르는 말이 하이어라키(hierarchy), 우리말로는 계층이다. 단어는 어려워 보이지만 뜻은 단순하다. "글자마다 중요한 정도가 다르니까, 그게 눈에 보이게 구분해줘라"는 것. 제목은 크고 굵게, 캡션은 작고 연하게. 이렇게 차이를 줘야 사람이 어디부터 읽어야 할지 헷갈리지 않는다.

그럼 이 차이를 어떻게 만드냐면, 보통 네 가지를 조절한다.

요소쉽게 말하면

패밀리	글씨체 종류 (어떤 폰트를 쓸지)
웨이트	글자 굵기 (얇게 / 굵게)
크기	글자 크기 (픽셀 단위로 조절)
줄 간격	줄과 줄 사이의 간격

기본값도 알려주셨다. 본문 글자 크기는 보통 16픽셀이 기본이고, 줄 간격은 **150%**를 기본으로 쓴다. (왜 하필 16픽셀인지는 나중에 따로 알려주신다고 했다.)

이 대목에서 간호사 시절이 떠올랐다. 약 라벨이나 처방 차트도 결국 하이어라키다. 약 이름은 크게, 용량은 또렷하게, 주의사항은 눈에 띄게 — 이렇게 역할별로 구분이 안 돼 있으면 바쁜 와중에 잘못 읽기 십상이다. 글자 크기와 굵기 하나가 실수를 막는다는 게, 디자인에서도 똑같이 중요하다는 게 묘하게 반가웠다.

세리프와 산세리프, 삐침이 있고 없고의 차이

글씨체 이야기를 하면서 세리프와 산세리프라는 말이 나왔다. 처음 들으면 어려운데, 알고 보면 별거 아니었다.

• 세리프(serif) — 글자 끝에 작은 삐침(장식 같은 꼬리)이 달린 글씨체. 우리말 명조체가 여기에 가깝다
• 산세리프(sans-serif) — 그 삐침이 없는 깔끔한 글씨체. "sans"가 영어로 "없다"는 뜻이라, 말 그대로 "삐침 없는" 글씨다

요즘 디자이너들은 대부분 산세리프를 많이 쓴다고 한다. 의외로 디자이너 중에도 세리프와 산세리프가 정확히 뭔지 헷갈려하는 사람이 많다는 얘기도 했다.

<!-- [필기 끊김] 세리프 / 산세리프의 더 깊은 '느낌'과 분위기 차이는 이번 수업에서 시간상 건너뛰었음. 다음 시간에 다룬다고 함 -->

실습: 같은 글자도 어디에 두느냐로 느낌이 달라진다

이론을 듣고 바로 피그마로 실습했다. 제목·부제·본문·캡션을 만들고, 굵기와 글씨체를 바꿔가며 나만의 형식을 만드는 작업. 그리고 그걸 오토레이아웃이라는 기능으로 묶어서 이리저리 배치를 바꿔봤다.

(실습 팁: 피그마에서 네 개를 선택하고 Shift+A를 누르면 오토레이아웃이 만들어진다. Alt(맥은 Option) 키를 누른 채 드래그하면 개체가 복제된다.)

직접 해보니 두 가지가 확 와닿았다.

첫째, 글자의 역할을 어떻게 표현했느냐가 읽는 순서를 가장 먼저 결정한다. 제목을 크게 키우고 본문을 작게 하면, 사람은 자동으로 큰 글자부터 읽는다. 우리가 읽는 순서는 사실 내 마음대로가 아니라, 글자 크기와 굵기에 의해 "강제되고" 있던 거였다. 그 뒤에 숨은 게 바로 아까 배운 게슈탈트 원리고.

둘째, 여백과 위치가 글의 분위기, 즉 여운을 바꾼다. 같은 글자라도 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬, 왼쪽 아래로 옮겼을 때 느낌이 전부 다르다. 우리는 한국어를 왼쪽에서 오른쪽으로 읽으니까, 글자를 어디에 두고 어디를 비우느냐에 따라 시선의 흐름과 끝맛이 달라진다. 이 미묘한 차이를 알아보는 게 핵심이었다.

근데 솔직히 처음엔 "이게 무슨 여운이 다르다는 거지?" 싶었다. 강사님 말로는, 그건 아직 많이 안 봐서 그렇단다.

배치의 차이가 잘 안 느껴지는 건 아직 인풋 경험이 적어서다. 좋은 걸 많이 봐야 감각이 생긴다.

day6에서 "레퍼런스 보는 눈"을 길러야 한다고 배웠는데, 그 얘기가 여기서도 그대로 이어졌다. 결국 많이 보고 모으는 사람이 잘 만든다는 것. 강사님이 카페 포스터를 추천했다. 디자이너들이 작정하고 퀄리티 높게 만든 결과물이라, 우습게 보면 안 된다고.

색은 빛이고, 빛은 의미다

수업 후반은 색(컬러) 이야기였다. 출발점은 "색이 어떻게 생기는가"였는데, 답은 빛이었다. 물체가 빛을 받아서 특정 색만 반사하고, 우리는 그 반사된 빛을 색으로 인식하는 거다. 우리가 보는 빨간 사과는, 사과가 빨간색만 튕겨내고 나머지를 흡수해서 빨갛게 보이는 것.

그리고 색은 단순히 예쁘라고 있는 게 아니라 의미를 가진다. 빨강, 주황, 노랑, 초록, 파랑처럼 색마다 우리가 떠올리는 느낌이 다르다. 그래서 무슨 의미를 전하고 싶으냐에 따라 색을 확실하게 골라 써야 한다는 게 포인트였다.

문제는 색을 말로 정확히 가리키기가 너무 어렵다는 것. "빨간색" 해도 다홍색인지 진빨강인지 사람마다 다르게 떠올린다. 그래서 색을 정확하게 지정하는 국제 표준 방식이 있고, 거기서 꼭 알아야 할 건 딱 세 가지다.

요소쉽게 말하면

색상	색의 종류 (빨강이냐 파랑이냐 노랑이냐)
명도	밝기 (밝으냐 어두우냐)
채도	색의 순수함·선명함 (쨍하냐 탁하냐)

채도가 좀 헷갈렸는데, 쉽게 말하면 색이 얼마나 "순수한가"다. 빨주노초파처럼 쨍한 색은 채도가 높은 거고, 거기에 흰색이나 검은색을 섞을수록 색이 탁해지면서 채도가 낮아진다. 이건 사실 옛날 미술 시간에 배운 그 개념이었는데, 디자인에서 다시 만나니 새삼 정리가 됐다.

톤 — 색의 분위기를 결정하는 것

채도와 명도를 합쳐서 부르는 말이 **톤(tone)**이다. 즉 톤은 밝기와 선명함을 한꺼번에 가진 개념이다. 같은 색상이라도 톤에 따라 완전히 다른 분위기가 난다.

톤어떤 느낌만드는 법

파스텔 톤	부드럽고 연한 느낌	명도 높고 채도 낮게
비비드 톤	쨍하고 강한 느낌	채도 높게

여기서 신기했던 건, 톤은 색상과 상관이 없다는 것이다. 빨강이든 파랑이든 파스텔로 만들면 다 부드러워지고, 비비드로 만들면 다 강해진다. 그래서 전체 분위기를 결정하고 싶을 때 이 톤을 조절하면 된다. 결국 색에서 우리가 다루는 건 색상·명도·채도, 이 세 가지가 전부였다.

(색을 어떻게 조합하는지, 즉 배색까지는 이번 시간에 못 갔다. 다음에 이어서 배울 듯하다.)

이번 과제

오늘은 과제가 두 개 나왔다. 둘 다 "직접 눈으로 모으는" 숙제다.

• 타이포그래피 관찰 — 주변 사물에서 글자가 잘 배치된 걸 사진 3장 이상 찍기. 오늘 보기에 좋아 보인 걸로. (카페 포스터 추천)
• 컬러 추출 — 마음에 드는 이미지나 사물 3개를 골라서, 그 느낌을 담은 색을 피그마 스포이드(I 키)로 뽑아보기

정리하며

오늘 손은 바빴지만, 머릿속에 남은 건 결국 한 문장이었다. 디자인은 "이걸 어떻게 읽게 만들까"를 푸는 일이라는 것. 글자도, 색도, 결국은 사람이 잘 읽고 잘 느끼게 하려고 조절하는 거였다.

디자인의 거의 모든 기초와 끝은 시선의 흐름, 여백, 그리고 콘텐츠 영역으로 끝난다. 이게 안 되면 나중에 뭘 만들어도 어딘가 어색한데 왜 그런지 모르는 일이 계속 반복된다.

이 말이 제일 무겁게 남았다. 화려한 기술보다, 기본기가 안 잡히면 계속 발목을 잡힌다는 것. 간호사 때도 결국 기본 술기가 탄탄한 사람이 응급 상황에서 흔들리지 않았는데, 디자인도 똑같은 것 같다.

그리고 "잘 안 느껴지면 아직 적게 봐서 그렇다"는 말. 조급해하지 말고 좋은 걸 많이 보고 모으는 수밖에 없다는 게 오늘의 결론이다. 당장 멋진 걸 못 만들어도 괜찮으니, 오늘부터 길에서 본 좋은 포스터나 색 조합은 그냥 지나치지 말고 사진으로 남겨두는 습관을 들여봐야겠다. 과제도 그래서 나온 거겠지.