나도 UI/UX 디자인 할 수 있을까? #001
Prompt: Sign up
지난 두 달 동안...
초등교사로서의 마지막 한 해가 될 것이라고 다짐한 새해가 밝았다. 방학을 맞이하고 곧바로 작업을 시작하려고 하였다. 그러나 내가 가진 지식과 툴을 다루는 능력은 너무나 기초적인 수준이었다 보니 막막한 점이 한두 가지가 아니었다. 본격적인 작업을 시작하기 전에 좀 더 공부가 필요하다고 판단하였다. 지난 두 달간 집중적으로 공부를 하는 시간을 가졌다. 피그마, 포토샵, 일러스트레이터, UI/UX 이론, 브랜딩 디자인, 프론트엔드 등 관심 있는 모든 분야를 넘나들며 글을 읽고 강의도 듣고 실습도 하였다.
공부는 지금도 계속 이어지고 있다. 이제는 공부와 함께 다양한 실습을 통해 실력을 탄탄하게 하고 이직을 위한 본격적인 준비를 시작할 때가 되었다고 판단하였다.
사실, 방학을 시작하자마자 한 회사의 브랜딩 디자인 프로젝트에 참여하게 되었다. UI/UX보다는 프로덕트 디자인과 관련이 있는 일이었지만 많은 공부를 하게 되었다. 디자인 결과물을 만들어내며 포토샵과 일러스트레이터 그리고 인디자인의 활용법에 조금 더 익숙해질 수 있었다. 외부 업체와 협업을 하는 프로세스도 체험할 수 있게 되었다. 이번 프로젝트에 참여한 경험을 통해 실제 실무를 경험해 보는 것이 무엇보다 중요하겠다는 생각이 들었다.
몇 달 전 계획을 세웠던 Daily UI Challenge를 시작해야겠다는 판단을 하게 된 데 큰 영향을 끼친 사건이었다. 더불어 공부를 진행하며 사이드 프로젝트에도 참여해 볼 계획이다. 툴을 다루는 능력을 아무리 키워봤자 실무에 대한 경험이 전무하고 트렌트를 볼 줄 아는 능력이 없다면 이 일을 직업으로써 정상적으로 수행하기 힘들 것이다. 2024년 올해 나의 목표는 다음과 같다.
Daily UI Challenge 100개 완성
Side Project 두 개 이상 완성
간단한 포트폴리오 하나 완성
HTML, CSS, Javascript를 활용한 개인 서비스 설계
... 이직 완료
UI/UX 디자인에만 머물지 않고 그래픽 디자인, 프로덕트 디자인, 프론트엔드 엔지니어링 더 나아가 프로젝트 매니저 수준에 이르기까지 커다란 목표를 이루기 위한 본격적인 첫걸음이 시작되었다.
#000. Prepare for Daily UI Challenge
매일 하나씩 UI/UX를 설계하고 만들어내는 단발성 프로젝트의 형태이지만, 하나의 서비스를 만들어나간다는 개념으로 접근하고 싶다. 그렇게 하기 위해서는 서비스를 구성하는 전체적인 디자인 가이드를 먼저 설정해야 한다. Daily UI Challenge는 001번으로 시작하지만 디자인 가이드를 구성하기 위해 내가 임의로 000번을 설정하였다. 바로 Text와 Color Style을 구성하기 위함이다.
Text & Color Style [Design Guide]
Text와 Color Style을 구성하기 위한 프레임을 만들고 기초 뼈대를 그린다.
TIP 1. Style Guide 기본 픽셀 단위로 8px를 활용하기 위해 File - Nudge Amount에서 Big Nudge를 8로 수정해 준다.
3000*3000 크기의 프레임을 만들고 이름을 Style로 바꾼다.
Text를 하나 만들어 Auto-Layout을 설정해 준다.
Style은 좌우패딩 56, 상하패딩 32로 설정한다.
Text와 Color는 좌우패딩 36, 상하패딩 16으로 설정한다.
TIP 2. Text 굵기와 크기가 커질수록 여백이 더 좁아 보이기 때문에 필요하다면 여백을 늘려주어 겉보기 비율을 맞춰주는 것이 좋다.
각각의 구성요소는 위와 같이 설정하였다.
Text는 각 구성요소별로 Large, Meduim, Small로 활용하고 한다.
Color는 각 구성요소별로 0부터 900까지 10단계로 활용하고자 한다.
Text Style
기본 Text에 사용한 Montserrat Font는 아름다우면서 가독성도 높아 사용하기 적합하다고 생각했다. 특히 장평이 약간 길고 글자가 정렬이 가지런하여 따듯하고 여유로운 느낌을 준다고 생각한다. 개인 브랜드 컬러로 사용 중인 '해바라기 색상'과 느낌이 잘 어울린다고 느꼈다.
Display Text에 사용한 Lobster Font 또한 에너지가 넘치고 여유로운 휴양지에서 많이 볼 듯한 Font라서 선택했다. 전체적으로 브랜드 컬러로 사용하고 있는 '해바라기 색'의 느낌과 알맞는 Font를 찾으려 노력했다.
Text Style을 구성하던 중 Headline 구성요소와 Label 구성요소가 중복되는 경향을 보여 Headline을 삭제하였다.
Color Style
Color는 Brand Color인 '해바라기 색상'과 자연스럽게 잘 어울릴 수 있는 '하늘의 색상'을 Point Color로 선정했다.
Back-Ground Color 역시 Brand Color의 Hex code를 바탕으로 채도를 낮춘 색으로 구성하였다. 초기 색상 설정은 Adobe Color를 활용하였다. Brand Color의 900과 500을 중심으로 색상을 배열하였으며 Point Color는 500을 중심으로 배열하였다.
Style Guide를 처음부터 완벽하게 구성하여 고정하면 좋겠지만 반드시 작업을 진행하면서 수정하게 된다. 기본 뼈대만 완성했다고 생각하고 Daily UI Challenge를 시작해 보자!
#001. Prompt: Sign Up
Create a sing up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.
서비스에 로그인하기 위한 인터넷 페이지나 모달 혹은 모바일 화면을 만들라는 주문이다.
서비스의 내용이나 종류는 자유롭게 설정 가능하다. 화면을 반응형으로 만드는 것이 당연한 추세이지만 작업할 프레임의 크기를 설정하기 위해 Statcounter의 통계를 잠깐 살펴본다. 모바일 환경에서는 1위를 차지하고 있는 해상도가 360*800 인 것을 알 수 있다. 2위가 390*844인데 마침 Figma에서 사전설정으로 제공 중인 프레임의 크기 중 390*844 비율이 있다. 반응형 화면 구성을 통해 다른 화면 해상도에도 대응할 수 있으므로 해당 해상도를 선택하여 프레임을 만든다.
Display Large를 적용하고 프레임 색상에 BG000를 적용한 기본 프레임을 만들어보았다. 내용은 'parcyun studio'라는 가상의 서비스에 접속하여 회원가입을 진행하는 것을 가정하였다.
본 작업을 진행하기 전에 접속하자마자 로고가 빈 화면에서 자연스럽게 나타났다가 첫 화면으로 이동되는 간단한 프로토타입을 먼저 만들어본다. 매우 간단한 작업이니 이 글을 읽고 있는 여러분도 따라서 해보자.
Component 만들기
로그인 화면을 만드는 데 어떤 구성요소가 필요할지 생각해 본다.
기본 구성 요소
Status Bar
Home Indicator
Log in 화면 구성 요소
Logo
Account Input Field
Password Input Field
Log-in Button
Sign-up Button
Simless Join Button
Notice Message
위와 같이 간략히 생각해 보았다. 맨 아래에 Simless Join Button 이 생소해 보일 수 있다. 요즘 많은 서비스에서 로그인 및 회원가입 화면에서 Google, Github, MS, Facebook, Naver, Kakao Talk 등 이미 많은 사용자를 보유한 기존의 서비스 계정을 활용해 별도의 복잡한 절차 없이 바로 서비스를 이용할 수 있도록 '부드러운 연결'을 제공하고 있다. 이를 뜻하는 의미이다.
화면을 디자인하기 위한 몇 가지 원칙을 먼저 정리해 보았다.
최소한의 정보 제공
미니멀리즘
부드러운 연결
위와 같은 원칙에 따라 앱을 구동했을 때 떠오른 로고가 그대로 화면 상단으로 연결되어 이동하고 빈 화면에 Account Input Field와 Simless Join Button만 구성할 계획이다. 이렇게 구성하면 첫 화면에서 사용자에게 주어진 선택지는 두 가지로 정리되어 선택에 대한 부담감을 줄여주면서 동시에 최대한 '부드러운 연결'을 구현할 수 있다.
Figjam을 활용하여 서비스의 흐름을 간략하게 구상해 보았다.
1. 기존에 계정을 가지고 있는 서비스의 버튼을 클릭한다면 바로 서비스에 진입할 수 있도록 한다. 추후에 추가적으로 필요한 정보는 해당 정보가 필요한 서비스를 이용하려고 시도할 때 입력을 유도할 수 있도록 설계한다.
2-1. Account Input Field를 클릭한다면 Text Input Field로 바뀌고 Field 아래에 Subtitle을 활용하여 "계정이 없으신가요? 회원가입" 버튼을 띄운다. Text Input Field 하단에 비활성화 상태의 "다음" 버튼을 추가한다. Simless Join Button 역시 여전히 제공하는 데 위치는 조금 더 하단으로 이동한다.
2-2. Text Input Field에 글자를 입력하는 순간 "다음" 버튼이 활성화되도록 한다.
2-3. Account Input Field에 글자를 입력하고 활성화된 "다음" 버튼을 클릭하면 바로 아래에 Password Input Field를 띄운다. 역시 이 Field를 클릭하면 Text Input Field로 바뀐다.
2-4. Text Input Field에 글자를 입력하는 순간 "다음" 버튼이 활성화되도록 한다.
두 선택지 모두 마지막에는 로딩 중 아이콘이 나오면 빈 화면으로 연결한다.
3. Sign-up을 선택할 경우 회원가입 화면에 대한 디자인이 필요하다.
위 구성에 따르면 회원가입 화면을 제외하고 총 6개의 화면이 필요하며 세 개의 Component 세트와 Simless icon 세트 그리고 Loading icon 세트가 필요함을 알 수 있다.
계획을 세웠으니 제작에 들어간다.
계정 입력창과 로그인 버튼 세트
컴포넌트를 제작하며 다음과 같은 사항에 중점을 두었다.
Brand Color를 적극적으로 사용하여 따뜻한 느낌을 구현할 것
전체적으로 만화 같은 느낌이 들도록 하여 그림을 그린 듯한 분위기를 구현할 것
가독성을 최대한 높일 것
실제 컴포넌트를 제작하고 프로토타입을 적용시키는 과정에서 Button Font Style의 약간의 크기와 간격 변경이 있었다.
버튼 컴포넌트는 마우스 커서를 사용할 시 마우스를 Hovering 할 때의 상태를 구현하였다. 포인트 컬러인 파란색 계열로 Stroke를 주어서 약간 만화 말풍선이 튀어나온 듯한 느낌을 주었다.
Simless Login을 위한 브랜드 로고의 색 역시 Brand Color를 적용해 전체적으로 만화 같은 느낌을 구현함과 동시에 색상 톤을 맞춰주었다.
프로토타입 만들기
위에서 제작한 컴포넌트를 활용하여 App Opening부터 Log-in까지의 과정을 프로토타입으로 제작하였다.
Loading 화면은 별도의 디자인을 제작하지 않고 App Opening에서 사용되었던 화면으로 다시 자연스럽게 돌아가는 방식을 활용하였다.
처음에 빈화면에서 나타났던 로고가 Log-in 화면에서는 상단으로 이동하였다가 서비스로 진입하는 Loading 화면에서 다시 화면 중앙에 나타났다가 사라지는 과정을 통해 서비스에 진입하는 전 과정을 하나의 과정으로 '부드럽게 연결' 하였다.
영상으로 간단히 기록한 모습은 다음과 같다.
계정과 비밀번호를 직접 입력하는 모습이 먼저 나오고 후반부에는 다시 앱을 구동하여 구글계정으로 바로 진입하는 장면을 담았다.
TIP 3. 피그마에는 화면을 녹화할 수 있는 별도의 기능이 없다. 맥북을 사용 중이라면 Cmd+Shift+5로 캡처 화면에 진입하여 영역을 설정하고 화면 기록 기능을 활용하여 녹화할 수 있다.
Sign-up 화면 만들기
위에서 제작한 Login 화면에서 Account Input Field 바로 아래에 Subtitle을 활용하여 회원가입 의사를 묻는 지문을 추가하고자 한다. 버튼으로 제작해 추가하는 것이 더 안정적인 모습을 띌 거라고 생각되지만, 사용자는 대부분의 기존 서비스에서 회원가입을 묻는 문구로 안내하는 데 더 익숙하기 때문에 문구로 제작하는 것이 사용자의 혼란을 줄이고 서비스 진입 부담감을 줄이는 데 도움이 될 것이라고 판단하였다.
안내 문구는 Montserrat Font를 명도를 살짝 높여 Subtitle로 활용하여 전체적인 분위기를 맞추어주었다.
색상은 포인트 색상인 파란색 계열을 활용하였다.
Sing-up 절차는 최대한 간소화하면서 한 번에 하나의 정보에만 집중할 수 있도록 설계하였다.
Account는 e-mail 주소를 활용하여 e-mail 정보를 따로 수집하는 절차 삭제
e-mail이 중복되었다는 Error Field 바로 아래에 PW를 찾겠냐고 묻는 문구 추가
한 번에 한 종류의 Input Field만 제공하며 Text Input을 완료하고 나면 다음 Input Field가 나타나는 방식 채택
Simless Join Button 은 계속해서 하단에 제공
사용자가 번거로운 과정이므로 시각적으로 제공되는 정보를 줄이고 집중도를 높이기 위해서 로고는 아래로 이동
Field를 모두 작성한 후 바로 Loading 화면으로 이동되어 '부드러운 연결' 구현
Text Input에 대한 Error는 최대한 간결하게 한 페이지의 프로토타입으로 구성
설계한 모습은 다음과 같다
영상으로 간단히 기록한 모습은 다음과 같다.
피그마 자체 버그로 인하여 Password Input으로 넘어가는 애니메이션이 자연스럽지 못하다.
Account Input Field가 그대로 위로 튕겨 올라가며 Password Input Field가 나타나야 하는데 화면이 Dissolve 된 것처럼 구현되고 있다.
실제로는 스마트 애니메이션을 적용하여 Ease out back 250ms를 적용하였다.
Exercise Point
하나의 서비스를 구성한다는 개념으로 모든 컴포넌트를 제작하며 화면을 구성하다 보니 서비스 진입 화면 하나를 만드는데 생각보다 시간이 오래 걸렸다. 브랜드 아이콘 등은 Figma Community와 패스파인더 기능을 활용하여 금방 제작하였지만, 그 외에 모든 컴포넌트는 직접 만들었다.
컴포넌트를 만들면서 기대하지 않았던 부분에서 연습이 많이 되었다. 개체를 만들 때 되도록이면 모든 레이어의 이름을 계층 구조를 갖추어 설정하려고 한다. 계층 간의 구분은 자연스럽게 슬래쉬(/)로 하고 있다. 그렇다 보니 컴포넌트 세트로 만들 여러 개체의 이름을 계층구조가 맞도록 관계성 있게 지어주니 컴포넌트 세트 설정 시 Property가 자동으로 그룹핑되어 몹시 편리하였다. Property의 이름만 구분되게 지어주면 각 Variant Option 값은 자동으로 입력되어 있다 보니 별도의 작업이 전혀 필요 없었다.
#001/100 완료!
Welcome to parcyun studio!
