EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.디자인 색 조합, 어떻게 고를까 — 배색의 기본과 색 스타일design11디자인 폰트 고르기와 글자 배치 — 타이포그래피의 기본design12디자인 레이아웃의 기본 — 정렬·여백·그룹·그리드design13인스타그램 카드뉴스 디자인, 처음부터 끝까지design14상세페이지 디자인, 팔리는 흐름으로 짜는 법design1512345...12 디자인 폰트 고르기와 글자 배치 — 타이포그래피의 기본디자인에서 글자는 생각보다 많은 자리를 차지합니다. 포스터의 제목, 카드뉴스의 문장, 앱 화면의 단추 이름, 상세페이지의 설명까지, 대부분의 디자인은 결국 글자를 읽히게 만드는 일입니다. 그런데 사진과 색에는 오래 공을 들이면서도 글자는 기본 글꼴로 적어 두고 넘어가는 경우가 많습니다. 디자인이 어딘가 아마추어처럼 보인다면, 그 원인은 색보다 글자에 있는 경우가 의외로 많습니다.타이포그래피는 글꼴을 고르는 일에서 끝나지 않습니다. 몇 가지 글꼴을 쓸지, 크기를 몇 단계로 나눌지, 줄 사이와 글자 사이를 얼마나 둘지, 한 줄을 얼마나 길게 둘지가 모두 읽는 경험을 바꿉니다. 반가운 점은 이 결정들에 비교적 분명한 기준이 있다는 것입니다. 기준을 알고 나면 글자만 다듬어도 디자인이 한 단계 정돈되어 보입니다.이 글에서는 디자인 작업에서 글자를 다루는 기본을 순서대로 살펴봅니다.1.글꼴 고르기 — 명조와 고딕, 그리고 몇 가지를 섞을지 봅니다.2.글자의 위계 — 크기와 굵기로 읽는 순서를 만드는 법을 봅니다.3.행간·자간·줄 길이 — 한글을 편하게 읽히게 하는 간격을 봅니다.4.글자 다루기 실제 — 디자인 툴에서 글상자·단락 스타일을 쓰는 법을 봅니다.5.아웃라인과 글꼴 라이선스 — 넘기기 전에 챙길 것을 정리합니다.글꼴은 두 가지면 충분합니다한글 글꼴은 크게 명조(세리프)와 고딕(산세리프)으로 나뉩니다. 명조는 붓글씨에서 온 획의 강약이 있어 차분하고 문학적인 인상을 주고, 긴 글을 종이에서 읽을 때 편합니다. 고딕은 획의 굵기가 고르고 단정해서 화면에서 또렷하게 읽히며, 정보 전달과 현대적인 인상에 잘 맞습니다. 요즘 화면용 디자인 대부분이 고딕을 기본으로 쓰는 이유입니다.초보자가 가장 흔히 하는 실수는 글꼴을 너무 많이 섞는 것입니다. 제목은 손글씨체, 부제목은 명조, 본문은 고딕, 강조는 또 다른 굵은 글꼴처럼 섞다 보면, 각각은 예뻐도 전체는 산만해집니다. 대부분의 디자인은 글꼴 두 가지면 충분하고, 하나만으로도 충분한 경우가 많습니다. 한 글꼴 가족 안에서 굵기(Regular·Medium·Bold)만 바꿔 써도 위계는 얼마든지 만들 수 있습니다.글꼴을 두 가지 쓴다면 서로 분명히 달라야 합니다. 비슷한 고딕 두 개를 섞으면 의도한 대비가 아니라 실수처럼 보입니다. 제목은 개성 있는 글꼴, 본문은 무난하고 잘 읽히는 고딕처럼 역할을 나누면 자연스럽습니다.크기와 굵기로 읽는 순서를 만듭니다사람은 글을 처음부터 끝까지 읽기 전에, 먼저 크고 굵은 것부터 훑어봅니다. 이 훑어보는 순서를 설계하는 것이 글자의 위계입니다. 위계가 분명한 디자인은 몇 초만 봐도 무엇에 관한 것인지 알 수 있고, 위계가 없는 디자인은 어디서부터 읽어야 할지 몰라 그냥 지나치게 됩니다.위계를 만드는 기준 단계는 세 개 정도로 시작합니다. 제목·소제목·본문이면 대부분의 디자인을 감당할 수 있습니다. 단계 사이의 크기 차이는 분명하게 둡니다. 본문이 16이라면 소제목은 20~24, 제목은 32 이상처럼 확실히 커야 위계로 읽힙니다. 크기만으로 부족하면 굵기와 색으로 거듭니다. 본문을 진한 회색으로, 제목을 검정에 가까운 색과 굵은 두께로 두면 대비가 커집니다. 강조는 한 가지 방법만 씁니다. 굵게, 색, 밑줄을 한꺼번에 쓰면 강조가 아니라 소음이 됩니다.행간·자간·줄 길이가 읽기 편함을 정합니다글꼴과 크기를 정했는데도 글이 답답해 보인다면 간격을 의심해 보십시오. 한글은 네모난 글자가 빽빽하게 이어지는 글자라서, 간격에 따라 읽기 편함이 크게 달라집니다.행간은 줄과 줄 사이의 간격입니다. 본문은 글자 크기의 160~170% 정도가 편하게 읽히고, 제목처럼 크고 짧은 글은 120~130% 정도로 좁혀야 덩어리로 보입니다. 큰 제목에 본문과 같은 행간을 주면 줄 사이가 지나치게 벌어져 두 개의 제목처럼 읽힙니다.자간은 글자 사이의 간격입니다. 큰 제목은 글자 사이가 실제보다 넓어 보이기 때문에 자간을 조금 좁히면 단단해 보이고, 작은 본문은 기본값이나 아주 살짝 좁힌 정도가 알맞습니다. 반대로 아주 작은 글자나 영문 대문자 장식은 자간을 넓혀야 또렷합니다.줄 길이도 중요합니다. 한 줄이 너무 길면 줄 끝에서 다음 줄 처음을 찾기 어렵고, 너무 짧으면 시선이 자꾸 끊깁니다. 한글 본문은 한 줄에 대략 25~40자 정도가 편안합니다. 화면 폭이 넓더라도 글상자의 폭을 좁혀 줄 길이를 지키는 편이 좋습니다.디자인 툴에서 글자를 다루는 법옵클 에디터에서 글자를 쓰는 방법은 세 가지입니다. 텍스트(T)를 고르고 누르면 한 줄 글자가, 끌면 글상자가 됩니다. 제목처럼 짧은 글은 한 줄 글자로, 설명문처럼 긴 글은 글상자로 쓰면 관리가 쉽습니다. 원을 따라 도는 로고 글자처럼 선을 따라 쓰고 싶다면 패스 위 글자를 고르고 패스나 도형을 누르면 됩니다.글자를 고르면 오른쪽 문자 칸에서 글꼴과 크기, 굵기, 색을 정하고, 그 아래 단락 칸에서 행간과 자간, 문단 위아래 여백, 정렬을 정합니다. 글상자의 크기 방식도 단락 칸에서 고르는데, 내용이 자주 바뀌는 글상자는 자동 높이로 두면 글이 늘어나도 잘리지 않습니다. 가지고 있는 글꼴 파일(ttf·otf)은 캔버스에 끌어 놓거나 삽입하기 → 폰트 파일로 넣으면 글꼴 목록에서 바로 고를 수 있습니다.위계를 정했다면 단락 스타일로 담아 두십시오. 인스펙터의 스타일 설정 칸에서 제목·소제목·본문을 단락 스타일로 만들어 두면, 새 글자에 스타일만 고르면 되고, 나중에 본문 크기를 바꾸고 싶을 때도 스타일 하나만 고치면 디자인 전체의 본문이 함께 바뀝니다. 세로로 세워야 하는 글자는 우클릭해 세로쓰기를 고르면 됩니다.자주 보는 글자 실수글자를 다루다 보면 누구나 한 번쯤 하게 되는 실수들이 있습니다. 하나하나는 작아 보여도, 모이면 디자인 전체가 덜 다듬어진 인상을 줍니다.고치면 바로 달라지는 것들 글자를 억지로 늘이고 줄인다 — 글상자에 맞추려고 글자의 가로세로 비율을 바꾸면 글꼴이 찌그러져 보입니다. 크기와 자간, 줄바꿈으로 맞추는 편이 훨씬 자연스럽습니다. 모든 글자가 굵다 — 제목도 본문도 단추도 모두 굵으면 굵기가 더 이상 강조가 되지 않습니다. 굵은 글자는 화면에서 한두 곳으로 아낍니다. 줄 끝에 한 글자만 남는다 — 제목이 두 줄로 나뉘면서 마지막 줄에 한두 글자만 남으면 어색해 보입니다. 줄바꿈 위치를 직접 정하거나 글상자 폭을 조금 바꿔 줄 길이를 고르게 맞춥니다. 사진 위 글자가 묻힌다 — 복잡한 사진 위에 얇은 글자를 얹으면 읽히지 않습니다. 사진의 비교적 단순한 자리에 글자를 두거나, 색 막을 얹거나, 필터 칸의 그림자를 은은하게 넣어 글자를 띄웁니다. 너무 작은 글자 — 디자인 툴에서 크게 확대해 보면 작은 글자도 잘 보이지만, 실제 결과물에서는 읽기 어렵습니다. 작업 중에 화면을 실제 크기로 줄여 확인하는 습관을 들입니다.넘기기 전에 — 아웃라인과 글꼴 라이선스디자인을 다른 사람에게 넘기거나 인쇄소에 보낼 때는 글꼴이 그쪽 컴퓨터에 없을 수 있습니다. 로고나 큰 제목처럼 모양이 정확히 유지되어야 하는 글자는 우클릭 아웃라인으로 도형(패스)으로 바꾸면 글꼴이 없는 환경에서도 그대로 보입니다. 다만 아웃라인으로 바꾼 뒤에는 글자로 고칠 수 없으므로, 원본 글자를 복제해 숨겨 두고 바꾸는 습관을 들이는 것이 좋습니다.글꼴의 사용 범위도 꼭 확인하십시오. 무료 글꼴이라도 개인 용도만 허락하거나, 인쇄물은 되지만 로고나 영상에는 쓸 수 없도록 정해 둔 경우가 있습니다. 상업적인 작업이라면 글꼴을 내려받은 곳의 라이선스 안내를 먼저 읽어 두는 편이 안전합니다.글자를 다듬으면 디자인이 정돈됩니다타이포그래피는 눈에 띄는 기술보다 절제의 기술에 가깝습니다. 글꼴은 두 가지 이하로, 위계는 세 단계로, 강조는 한 가지 방법으로, 간격은 글자 크기에 맞춰. 이 몇 가지만 지켜도 같은 내용이 훨씬 또렷하고 믿음직하게 읽힙니다. 다음에 디자인이 어딘가 어색해 보인다면, 색을 바꾸기 전에 글자부터 다시 한번 살펴보십시오.이 글의 핵심 글꼴은 두 가지 이하로, 한 가족 안에서 굵기를 바꿔 위계를 만드는 편이 정돈되어 보입니다. 위계는 제목·소제목·본문 세 단계로 시작하고, 단계 사이의 크기 차이를 분명하게 둡니다. 본문 행간은 글자 크기의 160~170%, 큰 제목은 120~130%로 좁히고, 한 줄은 25~40자 정도로 둡니다. 글상자는 자동 높이로, 반복되는 글자 모양은 단락 스타일로 담아 두면 고치기 쉽습니다. 넘기기 전에는 로고·제목을 아웃라인으로 바꾸고(원본은 복제해 두고), 글꼴 라이선스를 확인합니다.이전글목록으로다음글저작권 고시Copyright Notice본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.저작권자: Abstract Cloud | 대표자: 배창규(uragen)
© Abstract Cloud. All Rights Reserved.HOMEFAQ이용 약관개인정보 이용방침help@opkle.app
010-2747-3403상호 :추상적 형상 디자인(Abstract cloud)  |  대표자 :배창규사업자등록번호 :249-74-00533통신판매업 신고번호 :2025-의정부송산-0634주소 :경기도 의정부시 부용로 49, 108동 402호웹의 모든 콘텐츠, 디자인, 소스 코드에 대한
저작권은 Opkle에게 있습니다.