커리어/프로덕트 디자이너

디자인 기초, 레이아웃과 글자 꾸미기

nerina0201 2026. 2. 25. 10:04


[디자인 기초] 보기 좋은 떡이 먹기도 좋다!
레이아웃과 글자 꾸미기

멋진 디자인을 완성하려면 물건을 어디에 놓을지(레이아웃)와 글자를 어떻게 쓸지(타이포그래피)가 정말 중요합니다. 사람들이 편안하게 볼 수 있는 디자인의 비밀을 알아볼까요?

1. 레이아웃: 물건을 놓는 '정해진 자리'
그림이나 글을 아무렇게나 던져두면 보기에 어지럽습니다. 그래서 우리는 **'그리드(Grid)'**라는 투명한 줄무늬 판을 사용합니다.

* 그리드 시스템: 바둑판처럼 미리 선을 그어두고 그 선에 맞춰 그림을 놓는 방법입니다. 이렇게 하면 눈이 편안해지고 정돈된 느낌을 줍니다.

* 정렬과 간격: 물건들을 왼쪽이나 가운데로 나란히 맞추고(정렬), 물건 사이에 적당한 숨구멍(간격)을 만들어 주는 것입니다.

* 반응형 디자인: 컴퓨터로 보든, 핸드폰으로 보든 화면 크기에 맞춰 그림들이 알아서 자리를 잡는 똑똑한 디자인 방식입니다.

2. 타이포그래피와 색상: 글자에도 표정이 있어요

글자 꾸미기 (타이포그래피)
글자는 단순히 정보를 전달하는 것 이상으로, 디자인의 분위기를 결정합니다.
* 계층 구조: 중요한 제목은 크고 굵게, 설명하는 본문은 보통 크기로 써서 무엇이 중요한지 한눈에 알게 합니다.
* 가독성: 글자 사이(자간)와 줄 사이(행간)를 적당히 띄워주어 읽기 편하게 만드는 것이 핵심입니다.

색상 활용
* 조화와 대비: 비슷한 색끼리 모아 부드럽게 만들거나, 반대되는 색으로 시선을 확 끌어당길 수 있습니다.
* 심리 효과: 파란색은 시원하고 신뢰감을, 노란색은 밝고 즐거운 느낌을 줍니다. 상황에 맞는 색을 고르는 것이 중요합니다.

피그마 실습: 직접 만들어보기
실습 1: 나만의 기준선 만들기
피그마에서 커다란 종이(프레임)를 꺼내고,
그 위에 투명한 기둥(컬럼 그리드)을 세워 보았습니다.
이제 이 기둥에 맞춰 그림을 그리면 절대 삐뚤어지지 않습니다.

실습 2: 글자 힘주기
제목은 크게, 본문은 읽기 좋게 스타일을 바꿔보았습니다. 글자 크기만 조절해도 무엇을 먼저 읽어야 할지 확실히 보입니다.

실습 3: 나만의 색깔 접시 만들기
좋아하는 색깔 3~5가지를 골라 팔레트를 만들었습니다. 이 색깔들로 버튼도 만들고 카드도 만드니 디자인에 통일감이 생겼습니다.