UX / UI DESIGN · SEOUL
사용자 흐름을 설계하는 UX/UI 디자인
좋은 화면은 예쁜 화면이 아니라 막히지 않는 화면입니다. 사용자가 목적을 이루는 흐름을 먼저 정리하고, 그 흐름이 보이는 방식을 다듬습니다.
UX와 UI의 차이
TWO DIFFERENT PROBLEMS
UX는 사용자가 목적을 달성하는 과정을 다룹니다. UI는 그 과정이 눈에 보이는 방식을 다룹니다. 둘을 붙여 쓰지만 문제가 생기는 지점은 대개 다릅니다.
- UX 문제
- 흐름이 꼬인 경우입니다. 단계가 너무 많거나, 되돌아갈 길이 없거나, 사용자가 다음에 무엇을 해야 하는지 알 수 없을 때 생깁니다.
- UI 문제
- 표현이 어긋난 경우입니다. 버튼이 눌리는 곳처럼 보이지 않거나, 경고와 확인이 같은 색으로 읽히거나, 문구가 잘려 뜻이 흐려질 때 생깁니다.
두 문제는 원인도, 고치는 순서도 다릅니다. 그래서 Momenti는 진단을 먼저 나누고, 그 뒤에 손대는 지점을 정합니다.
사용자 경험을 먼저 보는 이유
화면을 먼저 그리면 나중에 흐름을 맞추느라 다시 손봐야 합니다. 순서를 반대로 하면 재작업이 줄어듭니다.
Momenti는 사용자가 어디서 막히는지, 어느 단계에서 이탈하는지를 기준으로 설계를 시작합니다. 목표를 정하고, 실제로 걸어보고, 그다음에 그립니다.
-
STEP 01
목표와 성공 기준 정하기
이 화면을 쓰는 사람이 무엇을 끝내려는지 한 문장으로 적습니다. 결제 완료, 신청 접수, 문의 전달처럼 확인할 수 있는 결과로 남깁니다.
-
STEP 02
현재 흐름을 그대로 걸어보기
기존 화면, 경쟁 서비스, 사내 도구를 처음 쓰는 사람의 순서로 따라갑니다. 막히는 지점과 되돌아가는 지점을 같은 자리에 모읍니다.
-
STEP 03
순서를 다시 짜고 화면으로 옮기기
줄일 단계는 줄이고, 남겨야 할 확인은 남깁니다. 흐름이 정해진 다음에 레이아웃과 시각 요소를 얹습니다.
사용자 인터페이스 설계
버튼 위치, 문구 길이, 색 대비, 터치 영역 같은 요소를 다룹니다. 한국어 문구는 영어보다 길어지는 경우가 많아 레이아웃을 미리 감안해야 합니다.
이 부분을 무시하면 구현 단계에서 문구가 잘리거나 줄이 깨집니다. 그래서 Momenti는 한국어 원문을 기준으로 버튼과 라벨의 최대 길이를 먼저 재고, 그 안에서 줄바꿈과 간격을 정합니다.
-
터치 영역
손가락이 겹치지 않도록 주요 조작은 충분한 크기로 벌립니다.
-
문구 길이
한국어 원문의 최대 길이를 먼저 정해 잘림과 줄 깨짐을 막습니다.
-
색 대비
본문과 상태를 구분해 읽히는 대비를 확인하고 조정합니다.
-
반복 요소 규칙
버튼과 입력창의 상태를 한 벌로 묶어 화면마다 달라지지 않게 합니다.
프로덕트 디자인 관점
웹과 앱을 아우르는 제품 전체의 일관성을 봅니다. 같은 기능이 화면마다 다르게 동작하면 사용자는 혼란스러워합니다.
디자인 시스템을 두면 이후 기능 추가가 수월해집니다. 새 화면을 만들 때 이미 정한 규칙을 가져다 쓰면 되고, 검토할 것도 줄어듭니다.
DESIGN SYSTEM
색, 서체 크기 단계, 간격, 버튼과 입력창의 상태를 한 문서에 모아 둡니다. 화면을 늘려도 같은 언어로 말할 수 있게 하는 기준입니다.
PRODUCT SURFACE MAP
진입 화면
무엇을 하는 서비스인지, 다음에 어디로 가야 하는지 먼저 보여줍니다.
입력 화면
요구하는 정보를 한 번에 한 묶음씩 받고, 오류는 입력한 자리에서 설명합니다.
확인 화면
되돌릴 수 없는 동작 전에 무엇이 바뀌는지 분명하게 알립니다.
결과 화면
완료된 일과 다음에 할 수 있는 일을 함께 남겨 되돌아오는 길을 만듭니다.
기능이 늘어날 때 이 표에 화면을 하나씩 더합니다. 새 화면이 어느 자리에 들어가는지 먼저 정하면 규칙이 흔들리지 않습니다.
브랜딩과의 조율
브랜드 색과 서체, 톤은 사용자 경험을 해치지 않는 선에서 반영합니다. 브랜딩 요소가 흐름을 방해하면 사용자는 브랜드를 기억하기 전에 떠납니다.
색
브랜드 색은 강조와 상태 표시로 제한합니다. 본문과 배경 대비가 먼저 확보되어야 브랜드 색이 읽힙니다.
서체
제목과 본문에 쓰는 서체의 역할을 나눕니다. 한국어와 숫자가 같은 줄에서 흔들리지 않는 조합을 고릅니다.
톤
문구의 말투를 한 문서에 정해 둡니다. 화면마다 다른 말투가 섞이면 같은 제품으로 보이지 않습니다.
웹과 앱에서의 차이
웹은 화면 크기가 다양하고, 앱은 기기 제약이 분명합니다. 같은 제품이라도 두 환경의 인터페이스는 다르게 설계되어야 합니다.
WEB
브라우저에서 만나는 제품
- 화면 폭이 넓어 정보를 여러 열로 나눌 수 있습니다. 대신 창 크기에 따라 배치가 무너지지 않게 확인합니다.
- 주소를 공유하거나 검색으로 들어오는 방문이 많아, 첫 화면이 무엇을 하는 곳인지 바로 설명해야 합니다.
- 키보드와 마우스, 터치가 한 화면에 섞입니다. 어느 방식으로도 조작이 막히지 않아야 합니다.
APP
기기 안에 남는 제품
- 화면이 좁고 세로로 깁니다. 한 화면에 한 가지 결정만 두는 편이 흐름이 끊기지 않습니다.
- 알림, 권한, 오프라인 상태처럼 웹에 없는 조건을 함께 설계합니다.
- 설치한 뒤에는 업데이트로 고칩니다. 그래서 초기에 규칙을 문서로 남기는 편이 유리합니다.
디자인과 개발의 연결
시안과 구현 사이의 간격이 벌어지면 완성도가 떨어집니다. Momenti는 디자인과 개발을 같은 대화 안에서 진행합니다.
시안을 넘기고 끝내는 대신, 실제로 화면이 만들어지는 자리에서 간격과 상태를 함께 확인합니다. 구현이 어려운 부분은 그 자리에서 대안을 정하고, 시안을 고칠지 구현 방식을 바꿀지 바로 결정합니다.
결과물
화면 설계, 인터랙션 정의, 디자인 시스템 문서 등이 프로젝트에 따라 제공됩니다. 무엇을 어디까지 남길지는 초기에 정합니다.
- 화면 설계 — 주요 화면의 배치와 상태를 정리한 문서
- 인터랙션 정의 — 눌림, 이동, 오류 같은 반응의 규칙
- 디자인 시스템 문서 — 색, 서체, 간격, 컴포넌트 기준
- 개발 전달 자료 — 구현자가 바로 쓸 수 있는 값과 예외 정리
범위는 프로젝트마다 다릅니다. 필요한 산출물과 남길 문서를 첫 회의에서 정하고, 그 목록을 기준으로 진행합니다.
자주 묻는 질문
상담 전에 많이 나오는 질문을 모았습니다. 여기에 없는 내용은 문의로 남겨 주시면 확인해 답변드립니다.
UX와 UI는 무엇이 다른가요?
UX는 목적을 이루는 과정을, UI는 그 과정이 보이는 방식을 다룹니다. 화면이 예쁜데도 중간에 이탈한다면 과정을, 과정은 맞는데 헷갈린다면 표현을 먼저 봅니다.
디자인만 따로 맡길 수 있나요?
가능합니다. 다만 구현까지 함께 진행할 때 시안과 결과물의 간격이 줄어듭니다. 이미 개발팀이 있다면 전달 자료의 형식을 미리 맞춰 두는 편이 좋습니다.
어떤 자료를 준비하면 좋을까요?
현재 화면, 사용자가 자주 하는 문의, 꼭 지켜야 하는 브랜드 기준이 있으면 도움이 됩니다. 없는 상태에서 시작하는 것도 가능하며, 그때는 흐름을 정리하는 단계부터 함께 합니다.
한국어 문구 때문에 레이아웃이 깨질까 걱정됩니다.
한국어는 같은 뜻의 영어보다 길어지는 경우가 많습니다. 그래서 실제 원문을 기준으로 버튼과 라벨의 최대 길이를 먼저 정하고, 그 안에서 줄바꿈과 간격을 설계합니다.
디자인 시스템은 꼭 필요한가요?
기능이 계속 늘어나는 제품이라면 도움이 됩니다. 화면이 몇 개 없는 초기 단계라면 규칙을 가볍게 정리하는 것으로 시작하고, 늘어나는 시점에 문서를 넓혀 갑니다.
지금 화면을 함께 살펴보시겠어요
현재 쓰고 있는 화면과 흐름을 보내주시면, 어디서 막히는지 먼저 정리해 드립니다. 그다음 필요한 작업 범위와 순서를 함께 정합니다.
STUDIO
서울특별시 강남구 강남대로94길 86, 11층(역삼동, 신영빌딩), 대한민국
- 운영 시간
- 월요일–금요일 09:00–18:00