EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.디자인 색 조합, 어떻게 고를까 — 배색의 기본과 색 스타일design11디자인 폰트 고르기와 글자 배치 — 타이포그래피의 기본design12디자인 레이아웃의 기본 — 정렬·여백·그룹·그리드design13인스타그램 카드뉴스 디자인, 처음부터 끝까지design14상세페이지 디자인, 팔리는 흐름으로 짜는 법design1512345...13 디자인 레이아웃의 기본 — 정렬·여백·그룹·그리드같은 사진과 같은 글자를 써도 어떤 디자인은 정돈되어 보이고, 어떤 디자인은 어수선해 보입니다. 색도 무난하고 글꼴도 괜찮은데 어딘가 어색하다면, 대개 원인은 배치에 있습니다. 요소들이 미묘하게 어긋나 있거나, 간격이 제각각이거나, 관련 없는 것들이 붙어 있고 관련 있는 것들이 떨어져 있는 경우입니다.레이아웃은 감각의 영역처럼 보이지만, 실제로는 몇 가지 원리가 대부분을 설명합니다. 오래전부터 디자인 입문서들이 강조해 온 정렬·근접·대비·반복, 그리고 여백과 그리드입니다. 이 원리들은 포스터든 카드뉴스든 앱 화면이든 똑같이 적용되기 때문에, 한 번 익혀 두면 어떤 결과물을 만들든 기준이 되어 줍니다.이 글에서는 레이아웃을 정돈하는 기본 원리와, 그 원리를 디자인 툴에서 정확하게 지키는 방법을 함께 살펴봅니다.1.정렬 — 보이지 않는 선을 맞추는 일이 왜 중요한지 봅니다.2.근접과 여백 — 간격으로 무엇이 한 묶음인지 알려 주는 법을 봅니다.3.대비와 반복 — 시선을 이끌고 통일감을 만드는 법을 봅니다.4.그리드 — 여러 요소와 여러 장을 한 질서로 묶는 법을 봅니다.5.디자인 툴에서 정확하게 배치하는 도구를 정리합니다.정렬 — 보이지 않는 선을 맞춥니다정돈된 디자인을 자세히 보면, 요소들이 보이지 않는 선 위에 서 있습니다. 제목의 왼쪽 끝과 본문의 왼쪽 끝, 사진의 왼쪽 끝이 한 줄로 맞아 있고, 단추는 카드의 가운데 선에 놓여 있습니다. 이 보이지 않는 선이 많을수록, 그리고 서로 일치할수록 디자인은 단단해 보입니다.흔한 실수는 모든 것을 가운데 정렬하는 것입니다. 가운데 정렬은 짧은 제목이나 초대장처럼 대칭이 어울리는 곳에서는 좋지만, 여러 줄의 글과 여러 요소가 섞이면 줄마다 시작점이 달라져 눈이 쉴 곳이 없습니다. 정보가 많은 디자인이라면 왼쪽 정렬로 강한 세로선 하나를 세우는 편이 훨씬 안정적입니다. 한 디자인 안에서 정렬 방식을 섞을 때는 «제목만 가운데, 나머지는 모두 왼쪽»처럼 분명한 규칙이 있어야 합니다.정렬은 눈대중으로 하면 1~2픽셀씩 어긋나기 쉽고, 그 작은 어긋남이 모여 «왠지 어색한» 느낌을 만듭니다. 그래서 정렬만큼은 툴의 도움을 받아 정확하게 맞추는 것이 좋습니다.근접과 여백 — 간격이 묶음을 알려 줍니다사람은 가까이 있는 것을 한 묶음으로 읽습니다. 사진 아래 캡션이 사진에 가까이 붙어 있으면 그 사진의 설명으로 읽히고, 다음 사진 쪽에 더 가까우면 혼란이 생깁니다. 그래서 간격은 단순히 보기 좋게 띄우는 것이 아니라, «무엇과 무엇이 한 덩어리인가»를 알려 주는 정보입니다.간격을 정하는 규칙 묶음 안의 간격은 좁게, 묶음과 묶음 사이의 간격은 넓게 둡니다. 둘의 차이가 분명할수록 구조가 잘 읽힙니다. 간격 값은 몇 가지로 정해 두고 그 안에서만 씁니다. 8·16·24·32·48처럼 일정한 배수로 정하면 고르기도 쉽고 리듬이 생깁니다. 대지 가장자리의 여백은 생각보다 넉넉하게 둡니다. 가장자리에 바짝 붙은 글자는 답답하고, 인쇄물에서는 잘릴 위험도 있습니다.여백을 «비어 있는 공간»이 아니라 «디자인의 재료»로 생각하면 레이아웃이 달라집니다. 요소를 하나 더 넣고 싶을 때, 오히려 하나를 빼고 그 자리를 여백으로 남겨 보십시오. 남은 요소들이 숨을 쉬면서 하나하나가 더 또렷하게 보입니다. 고급스러워 보이는 디자인일수록 여백이 넉넉한 이유입니다.대비와 반복 — 시선을 이끌고 통일감을 만듭니다대비는 서로 다른 것을 확실히 다르게 만드는 일입니다. 제목은 본문보다 확실히 크고, 강조 단추는 다른 단추보다 확실히 진해야 합니다. 어중간한 차이는 대비가 아니라 실수처럼 보입니다. 대비가 분명하면 보는 사람의 시선은 가장 강한 것에서 시작해 약한 것으로 자연스럽게 흘러갑니다. 디자인을 시작하기 전에 «이 화면에서 가장 먼저 보여야 할 것 하나»를 정해 두면 대비를 어디에 줄지 분명해집니다.반복은 같은 것을 같게 만드는 일입니다. 소제목은 늘 같은 크기와 색으로, 사진은 늘 같은 모서리 둥글기로, 카드는 늘 같은 안쪽 여백으로 둡니다. 반복이 쌓이면 보는 사람은 규칙을 금방 익히고, 새로운 쪽을 봐도 어디에 무엇이 있을지 예상할 수 있습니다. 여러 장으로 이어지는 카드뉴스나 상세페이지에서 반복이 특히 중요한 이유입니다.그리드 — 여러 요소를 한 질서로 묶습니다요소가 많아지거나 여러 장을 만들어야 할 때는 그리드가 큰 도움이 됩니다. 그리드는 대지를 같은 폭의 열이나 같은 크기의 칸으로 나눈 보이지 않는 틀입니다. 요소를 그리드의 열에 맞춰 놓기만 해도 정렬과 간격이 저절로 맞고, 여러 장을 만들어도 같은 틀 위에서 일관되게 배치됩니다.웹과 앱 화면에서는 데스크톱 12열, 태블릿 8열, 모바일 4열 같은 열 그리드가 흔히 쓰입니다. 포스터나 카드뉴스라면 열 그리드보다 위아래 여백과 좌우 여백을 정한 단순한 틀 하나로도 충분합니다. 중요한 것은 그리드를 정교하게 만드는 것이 아니라, 정한 틀을 끝까지 지키는 것입니다.그리드를 따르다가 일부러 한 요소만 틀을 벗어나게 두면, 그 요소가 강하게 눈에 띕니다. 규칙이 있기 때문에 예외가 강조가 되는 것입니다. 처음부터 자유롭게 배치하는 것보다, 틀을 먼저 세우고 필요한 곳에서만 깨는 편이 결과가 훨씬 안정적입니다.디자인 툴에서 정확하게 배치하는 법옵클 에디터에서는 여러 요소를 고르고 도구 막대의 정렬 묶음을 쓰면 왼쪽·가운데·오른쪽, 위·가운데·아래로 맞추거나 가로·세로 간격을 똑같이 나눌 수 있습니다. 끌어서 옮길 때는 다른 요소나 대지의 가장자리·가운데에 맞춰 흡착선이 나타나고, ⇧⌘R로 눈금자를 켜면 눈금자에서 끌어 안내선을 만들 수 있습니다. 숫자로 정확하게 두고 싶다면 오른쪽 변형 칸에 X·Y·W·H를 직접 입력하면 됩니다.그리드는 대지나 프레임을 고르고 인스펙터의 레이아웃 그리드 +를 눌러 깝니다. 격자·열·행 중에서 고르고 개수와 사이 간격, 여백을 정하면 되며, ⌃G로 보이기·숨기기를 바꿀 수 있습니다. 카드나 목록처럼 간격이 일정해야 하는 묶음은 프레임으로 만들고 오토 레이아웃을 켜면, 요소 사이 간격과 안쪽 여백이 규칙으로 지켜져서 내용을 바꿔도 간격이 흐트러지지 않습니다.어수선한 포스터 한 장을 고쳐 보면원리는 실제로 적용해 볼 때 분명해집니다. 행사 포스터 한 장을 예로 들어 보겠습니다. 제목은 가운데에, 날짜는 오른쪽 위에, 장소는 왼쪽 아래에, 설명 글은 가운데 정렬로 흩어져 있고, 로고는 남는 자리에 들어가 있습니다. 하나하나는 문제가 없어 보이는데 전체는 어수선합니다.먼저 정렬선을 정합니다. 정보가 여러 줄이므로 왼쪽 여백에 세로선 하나를 세우고, 제목과 날짜, 장소, 설명을 모두 그 선에 맞춰 왼쪽 정렬합니다. 다음으로 묶음을 나눕니다. 날짜·시간·장소는 «언제 어디서»라는 한 묶음이므로 서로 가깝게 모으고, 설명 글과는 넓게 띄웁니다. 그다음 대비를 정합니다. 가장 먼저 보여야 할 것은 행사 이름이므로 제목을 지금보다 훨씬 크게 키우고, 날짜는 굵게, 설명은 작고 옅게 내립니다. 마지막으로 로고와 주최 정보는 맨 아래 한 줄에 작게 모아 둡니다.요소는 하나도 더하거나 빼지 않았는데, 정렬선 하나와 묶음 두세 개, 분명한 크기 차이만으로 포스터는 훨씬 정돈되어 보입니다. 시간이 남는다면 대지 가장자리 여백을 조금 더 넓혀 보십시오. 대개 그 한 번의 조정이 마지막 완성도를 만들어 줍니다.레이아웃은 규칙을 정하고 지키는 일입니다레이아웃을 잘한다는 것은 화려한 배치를 떠올리는 능력보다, 몇 가지 규칙을 정하고 끝까지 지키는 성실함에 가깝습니다. 정렬할 선을 정하고, 간격 값을 정하고, 반복할 모양을 정하고, 그리드를 정합니다. 그리고 그 규칙을 깨는 것은 정말 강조하고 싶은 한 곳에서만 합니다. 디자인이 어수선해 보일 때는 새 요소를 더하기 전에 정렬선과 간격부터 다시 맞춰 보십시오.이 글의 핵심 요소들을 보이지 않는 선에 맞추고, 정보가 많은 디자인은 왼쪽 정렬로 강한 세로선을 세웁니다. 묶음 안 간격은 좁게, 묶음 사이 간격은 넓게 두고, 간격 값은 몇 가지 배수로 정해 씁니다. 대비는 확실하게, 반복은 똑같이. 가장 먼저 보여야 할 것 하나를 정하면 대비를 줄 곳이 분명해집니다. 그리드로 틀을 먼저 세우고, 강조가 필요한 한 곳에서만 틀을 벗어납니다. 정렬 묶음·흡착선·안내선·레이아웃 그리드·오토 레이아웃으로 눈대중 대신 정확하게 맞춥니다.이전글목록으로다음글저작권 고시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에게 있습니다.