EDITORCLASSBLOGLOGIN표현한다는 것의무한한 가능성,새로운 형태로
담아내다.새로운 형태의 콘텐츠Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.그래픽 디자인 툴, 피그마와 어도비 사이에서 무엇을 고를까design1포토샵 없이 PSD 파일을 열고 이어서 편집하는 법design2피그마·일러스트레이터·인디자인에서 넘어올 때 알아 둘 것design3벡터 그래픽 입문 — 도형과 펜, 패스파인더로 로고 만들기design4프레임·오토 레이아웃·컴포넌트로 앱 화면 시안 만들기design512345...5 프레임·오토 레이아웃·컴포넌트로 앱 화면 시안 만들기앱 화면이나 웹 시안을 만들다 보면 같은 일을 반복하고 있다는 사실을 깨닫게 됩니다. 버튼 글자 하나가 길어지면 버튼 크기를 다시 맞추고, 그 버튼을 쓴 화면 열 장을 돌아다니며 똑같이 고칩니다. 카드 안에 줄이 하나 늘면 아래 요소들을 하나하나 끌어 내립니다. 작업이 커질수록 디자인보다 정리에 쓰는 시간이 더 길어집니다.UI 디자인 툴이 프레임, 오토 레이아웃, 컴포넌트라는 개념을 갖추고 있는 이유가 여기에 있습니다. 이 세 가지는 «내용이 바뀌어도 모양이 유지되는» 디자인을 만들기 위한 장치입니다. 처음 설정하는 데 조금 시간이 들지만, 수정이 잦은 디자인일수록 들인 시간 이상을 돌려받게 됩니다. 그리고 이 장치들로 만든 시안은 개발자에게 넘어갔을 때도 훨씬 이해하기 쉽습니다. 실제 앱과 웹도 같은 원리, 즉 상자와 규칙으로 화면을 짜기 때문입니다.이 글에서는 앱 화면 시안을 만든다는 가정 아래, 세 개념이 각각 어떤 문제를 풀어 주는지 차례로 살펴봅니다.1.프레임으로 버튼과 카드 같은 단위를 묶는 법을 봅니다.2.오토 레이아웃으로 내용에 따라 스스로 늘어나는 부품을 만드는 법을 봅니다.3.컴포넌트로 반복되는 부품을 원본 하나로 관리하는 법을 봅니다.4.제약과 그리드, 스타일로 여러 화면 크기와 디자인 시스템까지 넓히는 법을 봅니다.5.실제로 로그인 화면 하나를 짜 보며 흐름을 정리합니다.프레임은 화면 안의 작은 상자입니다대지가 결과물 한 장이라면, 프레임은 그 안에 넣는 작은 상자입니다. 버튼과 카드, 목록 한 줄처럼 화면을 이루는 단위를 프레임으로 만들어 두면 그 안의 요소를 한 덩어리로 다룰 수 있습니다. 옵클 에디터에서는 F를 누르고 대지 안을 끌면 새 프레임이 만들어지고, 이미 그린 요소들을 고른 뒤 ⌥⌘G를 누르면 그 요소들을 감싸는 프레임이 만들어집니다.프레임을 고르면 인스펙터에 자르기 켬 · 끔이 나타납니다. 켜 두면 프레임 밖으로 나간 내용이 잘려 보이므로, 카드 안에 사진을 넣거나 스크롤 영역을 흉내 낼 때 유용합니다. 화면을 단순한 도형의 모음이 아니라 상자들의 구조로 보기 시작하는 것, 그것이 UI 디자인의 첫걸음입니다.프레임은 다른 프레임 안에 넣을 수 있습니다. 화면 전체가 큰 프레임이고, 그 안에 머리 막대와 목록과 아래 탭 막대가 프레임으로 들어가며, 목록 안에는 다시 카드 프레임이 여러 개 들어가는 식입니다. 이렇게 겹겹이 짠 구조에서는 Enter로 한 단계 안으로 들어가고, ⇧Enter로 한 단계 바깥의 부모를 고르고, Tab으로 다음 요소로 넘어가는 키가 특히 유용합니다. 마우스로 일일이 찾지 않아도 구조를 따라 움직일 수 있습니다.오토 레이아웃은 규칙으로 배치합니다오토 레이아웃은 요소를 손으로 놓는 대신, 규칙을 정해 놓으면 그 규칙대로 배치되게 하는 기능입니다. 프레임을 고르고 인스펙터의 오토 레이아웃 설정을 누르거나 ⇧A를 누르면 켤 수 있습니다. 왼쪽 미리보기에서 결과를 확인하면서 값을 정할 수 있어서, 처음에도 감을 잡기 어렵지 않습니다. 미리보기 안의 요소를 끌어 순서를 바꿀 수도 있습니다.규칙은 생각보다 단순합니다. 요소를 가로로 늘어놓을지, 세로로 쌓을지, 격자로 둘지 고르고, 넘칠 때 줄을 바꿀지 정합니다. 그다음 요소 사이 간격과 프레임 안쪽 여백을 정하고, 요소들이 어디에 모일지 정렬을 고르면 됩니다. 정렬은 미리보기의 아홉 구역을 직접 눌러 고를 수도 있어서, 말로 생각하기 어려울 때는 원하는 자리를 누르는 편이 빠릅니다.마지막으로 프레임 크기를 고정할지 맞춤으로 둘지 정합니다. 맞춤으로 두면 안의 요소가 커질 때 프레임도 함께 커지므로, 글자 길이에 따라 스스로 늘어나는 버튼이 완성됩니다. «확인»이 «결제하고 계속하기»로 바뀌어도 버튼이 알아서 넓어지고, 카드에 줄이 하나 더해지면 카드가 알아서 길어집니다. 이 편안함을 한 번 경험하면, 오토 레이아웃 없이 시안을 만드는 일로 돌아가기 어렵습니다.간격과 여백은 숫자를 몇 가지로 정해 두고 그 안에서만 쓰는 것이 좋습니다. 예를 들어 4, 8, 16, 24처럼 정해 두면, 화면 전체에 일정한 리듬이 생기고 다른 사람이 이어받아도 같은 규칙을 따르기 쉽습니다. 오토 레이아웃은 그 규칙을 숫자로 박아 두는 장치이기도 합니다.컴포넌트는 반복을 원본 하나로 묶습니다버튼이나 아이콘, 카드처럼 여러 곳에 반복해서 쓰는 요소는 컴포넌트로 만들어 두는 것이 좋습니다. 원본을 고치면 그 원본에서 만든 사본, 즉 인스턴스가 모두 따라 바뀌기 때문에, 버튼 색 하나를 바꾸려고 화면 열 장을 돌아다닐 필요가 없어집니다. 프레임을 고르고 ⌥⌘K를 누르거나 우클릭 컴포넌트 묶음에서 만들 수 있습니다.모든 곳이 원본을 그대로 따를 필요는 없습니다. 한 곳만 따로 바꾸고 싶다면 그 인스턴스를 고르고 ⌥⌘B로 분리하면 더 이상 원본을 따라가지 않습니다. 다만 분리한 인스턴스는 다시 이어지지 않으므로, 정말 따로 관리할 요소인지 확인한 뒤 분리하는 것이 좋습니다. 기본·눌림·비활성처럼 상태가 다른 버튼은 변형으로 묶어 한곳에서 관리할 수 있습니다.만든 컴포넌트는 오른쪽 컴포넌트 에셋 칸의 에셋 창에 모입니다. 다른 프로젝트에서 만든 것까지 함께 보여 주기 때문에, 프로젝트를 넘나들며 같은 부품을 쓸 수 있고, 고친 횟수에 따라 버전도 붙습니다. 지금 파일에서 쓰이고 있는지도 확인할 수 있어서, 부품이 많아져도 정리가 어렵지 않습니다.여러 화면 크기와 디자인 시스템으로 넓히기앱과 웹은 하나의 화면 크기로 끝나지 않습니다. 같은 디자인이 휴대폰과 태블릿, 데스크톱에서 어떻게 보일지 함께 생각해야 합니다. 이때 쓰는 것이 제약과 레이아웃 그리드입니다.화면이 바뀌어도 제자리를 지키게 요소를 고르고 제약 설정을 누르면, 대지 크기가 바뀔 때 요소가 어디에 붙어 따라갈지 정할 수 있습니다. 오른쪽 위 닫기 단추는 «오른쪽·위»로, 가로로 꽉 차는 상단 막대는 «양쪽»으로 두면 화면 폭이 바뀌어도 제자리를 지킵니다. 대지나 프레임에 레이아웃 그리드를 깔면 열과 행에 맞춰 정렬하기 쉬워지고, ⌃G로 보이기·숨기기를 바꿀 수 있습니다. 모바일·태블릿·데스크톱 화면을 대지 여러 개로 나란히 두고 같은 그리드로 맞춰 가면 반응형 시안이 깔끔하게 정리됩니다.부품과 화면이 늘어나면 색과 글자도 규칙으로 관리할 차례입니다. 칠 스타일과 단락 스타일, 벡터 스타일을 만들어 두면 스타일 하나를 고쳤을 때 그 스타일을 쓴 곳이 함께 바뀝니다. 라이트·다크 두 값을 가진 색 변수를 쓰면, 같은 화면의 밝은 판과 어두운 판을 두 벌 그리지 않고 나란히 놓고 볼 수 있습니다. 컴포넌트와 스타일, 색 변수가 모이면 그것이 곧 작은 디자인 시스템입니다.로그인 화면 하나를 짜 보면개념은 실제로 하나를 짜 볼 때 가장 빨리 손에 익습니다. 간단한 로그인 화면을 예로 들어 보겠습니다.먼저 휴대폰 크기의 대지를 만들고, 그 안에 세로 방향 오토 레이아웃을 켠 프레임 하나를 둡니다. 이 프레임 안에 로고, 제목 글자, 입력칸 두 개, 로그인 버튼, 아래 안내 글을 차례로 넣습니다. 간격을 16으로, 안쪽 여백을 24로 정하면 요소들이 일정한 간격으로 세로로 쌓입니다. 입력칸 하나를 프레임으로 만들고 오토 레이아웃으로 안쪽 여백을 정한 뒤 컴포넌트로 바꾸면, 두 번째 입력칸은 인스턴스를 하나 더 놓는 것으로 끝납니다.버튼도 같은 방식으로 컴포넌트로 만들고 너비를 맞춤으로 두면, 글자에 따라 늘어나는 버튼이 됩니다. 이제 «로그인»을 «이메일로 계속하기»로 바꿔 보십시오. 버튼이 늘어나고, 그 아래 안내 글이 자동으로 밀려 내려갑니다. 마지막으로 이 대지를 복제해 태블릿 크기로 바꾸고, 바깥 프레임의 제약을 «가운데»로 두면, 화면이 넓어져도 로그인 상자가 가운데를 지키는 시안이 완성됩니다.이 흐름을 한 번 지나 보면, 프레임과 오토 레이아웃, 컴포넌트가 따로 노는 기능이 아니라 하나의 사고방식이라는 것을 알게 됩니다. 화면을 상자로 나누고, 상자에 규칙을 주고, 반복되는 상자는 원본으로 묶는 것입니다.시안을 넘길 때까지가 디자인입니다시안이 완성되면 개발자에게 넘길 이미지도 함께 정리해 두면 좋습니다. 레이어마다 형식과 배율을 내보내기 설정으로 저장해 두고 ⇧⌘E를 누르면, 아이콘은 SVG로, 이미지는 PNG 2배로 한꺼번에 나옵니다. 디자인이 바뀔 때마다 같은 단축키 한 번이면 되므로, 전달하는 일도 반복이 아니라 규칙이 됩니다. 레이어 이름이 파일 이름이 되기도 하니, 알아보기 쉽게 지어 두는 것도 잊지 마십시오.처음부터 모든 것을 컴포넌트와 스타일로 만들 필요는 없습니다. 가장 자주 쓰는 버튼 하나부터 프레임으로 묶고, 오토 레이아웃을 켜고, 컴포넌트로 바꿔 보십시오. 그 버튼을 화면 몇 곳에 놓고 원본의 색을 바꿔 보면, 세 개념이 왜 함께 다니는지 단번에 이해됩니다.이 글의 핵심 프레임은 화면을 버튼·카드·목록 같은 상자의 구조로 보게 해 주고, Enter·⇧Enter·Tab으로 그 구조를 따라 움직일 수 있습니다. 오토 레이아웃은 간격·여백·정렬 규칙으로 배치해, 내용에 따라 스스로 늘어나는 부품을 만듭니다. 컴포넌트는 반복되는 부품을 원본 하나로 묶어, 한 번의 수정으로 모든 화면을 바꿉니다. 제약과 레이아웃 그리드는 여러 화면 크기에서, 스타일과 색 변수는 디자인 시스템 수준에서 일관성을 지켜 줍니다. 로그인 화면 하나를 짜 보면 «상자로 나누고, 규칙을 주고, 반복은 원본으로»라는 하나의 사고방식이 손에 익습니다.이전글목록으로다음글저작권 고시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에게 있습니다.