이 영상이 끝날 때쯤이면 제가 아이디어부터 배포할 준비가 된 디자인 화면까지 어떻게 만드는지 알게 되실 거예요. 이걸 알아내는데 12년이나 걸렸고, 10분 안에 모든 과정을 보여드리겠습니다.00:00

이건 제가 실제로 진행하고 있는 프로젝트예요. 과정은 얼마든지 가져가셔도 괜찮아요. 아이디어만 빼고는요! 처음 오신 분들을 위해, 제 이름은 아가사이고, 제품 디자이너입니다. 오늘 제가 2026년에 진행했던 UI UX 전체 과정을 자세히 설명해 드릴게요.00:14

자, 프로젝트에 대한 간단한 설명을 시작할게요.00:28

이건 모바일 앱이면서 동시에 대시보드도 함께 제공하는 헬스케어 제품이에요. 그래서 제가 제일 먼저 하는 일은 회사에서 제공하는 PRD 문서나 기타 모든 문서를 꼼꼼히 읽어보는 거에요.00:31

앱이 어떤 건지, 어떤 문제를 해결하는지, 그리고 맥락을 다 파악한 후에 간과하면 안 될 제약 조건들이 있는지 알고 싶어요. 맥락을 전부 알게 되면 바로 분위기 보드를 만들기 시작하는데, 저는 분위기 보드를 만들 때 딱 한 웹사이트만 사용해요. 바로 몹빙인데, 그냥 아무 앱이나 찾고 있는 게 아니거든요.00:43

제가 실제로 다운로드할 수 있는 앱들이 어떤 것들이 있는지, 그리고 그 앱들이 어떻게 비슷한 문제를 해결하는지 찾아보려고 합니다. 비슷한 의료 관련 앱들을 둘러볼 뿐만 아니라, 멀티 스텝 팝오버, 온보딩 플로우, 복잡한 폼과 같은 특정 기능들을 집중적으로 검색해 볼 거예요.01:00

이 웹사이트를 알기 전까진 그냥 제 핸드폰에 앱들을 다운로드하고 스크린샷만 찍고 있었어요.01:16

진짜 너무 오래 걸리네요. 여기서는 제가 필요한 모든 화면이 이미 다 준비되어 있고, 그대로 선택해서 복사해서 피그마에 붙여넣을 수 있는 워크플로우까지 완벽하게 갖춰져 있어요.01:21

특정 앱 카테고리 또는 특정 기능을 기준으로 검색할 수 있습니다.01:32

피그마에서 유용하다고 생각되는 자료들을 전부 가져다 붙여놓는 건, 디자인을 그대로 베끼는 게 아니라 구조, 간격, UX 결정, 그리고 왜 특정 화면이 다른 화면보다 더 좋은지 이해하기 위해서예요.01:36

이 단계만으로도 제 업무 시간을 엄청나게 절약해주고, 무엇보다 사용자들에게 이미 익숙한 UX 패턴을 다시 만들 필요가 없어져서 정말 좋아요.01:49

솔직히 말씀드리면, 다음 단계는 엄청 재미있는 건 아니지만 어쨌든 해야 합니다.02:01

그래서 플로우차트랑 사용자 페르소나를 참고하는 거예요. 사용자 그룹이 굉장히 구체적이고, 연령대도 다르고, 기술 활용 능력도 다르고, 하루 동안 모바일이랑 대시보드를 번갈아 가며 사용할 가능성이 높아요.02:08

그래서 제약 조건도 많고, 망칠 수도 있는 방법도 정말 많아요. 이건 의료 관련 제품이라 접근성도 굉장히 중요하거든요.02:21

그래서 글꼴 크기, 대비, 가독성 같은 모든 걸 적어두고요. 사람들이 이 앱을 어떻게, 어디서 사용할 건지 메모해두죠.02:29

모바일과 데스크톱 모두 지원해야 하는데, 앱 간에 자주 전환하게 될 거예요. 그래서 두 기기 모두에서 경험이 정말 잘 작동해야 하고, 어떤 기능도 숨겨서는 안 돼요.02:38

이 부분은 시각적인 요소에 대한 게 아니에요. 나중에 중요한 요구사항을 잊어버리지 않도록 하는 게 중요해요.02:48

그리고 나서 바로 하이파이 디자인으로 넘어가요. 이게 좀 논쟁적일 수도 있다는 거 알지만, 특히 머릿속에 명확한 아이디어가 있을 때는 로파이 프레임은 거의 안 하고 있어요.02:55

그래서 대신 앱 담당자들과 아이디어를 많이 논의하고 로파이 와인 프레임은 완전히 건너뛰었어요. 하이파이 화면 몇 개부터 시작했고, 그동안 디자인 시스템도 함께 만들었죠. 간격, 텍스트 스타일, 그리고 기본적인 모든 구성 요소들을요.03:05

방향이 결정되면 디자인 시스템과 나머지 화면 디자인을 모두 마무리할게요.03:22

하지만 이게 아니었다면 가능하지 않았을 거예요. 지난 두 달 동안 저는 지금까지 제가 한 일에 대한 업데이트를 매주 발표했고, 그분들은 종종 피드백을 주셨어요. 저는 그 피드백을 반영해서 수정하고 다음 주에 업데이트된 버전을 다시 발표하는 식으로 진행했죠.03:29

예를 들어, 이 화면을 완전히 바꿨습니다. 저는 처음에 오늘 개요 배너를 좋아했는데, 피드백을 받으니 클릭하는 느낌이 안 들고 동작도 없다고 해서 카드 형태로 바꾸고, 더 자세히 보려면 명확한 버튼과 그라데이션을 넣기로 결정했습니다.03:45

처음에는 다른 아이디어가 있었어요, 그래서 색깔도 수정했고 제 작업 영역도 무엇이 일어나고 있는지 충분히 명확하지 않았어요. 보기 괜찮았지만 결국에는 다른 방향으로 가기로 했어요. 작업 영역을 액션이라고 부르고 모바일 네비게이션도 버튼을 더 크게 수정했죠.04:02

이건 아주 작은 가지처럼 보일 수도 있지만, 믿으세요, 완전히 달라졌어요.04:20

그 화면에서 사용자 분들이 어떻게 상호작용했는지 말이죠. 그래서 저는 높은 비용이 나가는 디자인부터 바로 작업하는 걸 좋아해요. 사람들이 실제로 제품을 사용해볼 수 있을 때 피드백이 훨씬 더 솔직하거든요.04:24

지금까지 이 프로젝트는 순조롭게 진행되었어요. 매주 회의도 했고, 필요한 부분은 계속 업데이트했고, 진행 속도도 엄청나게 빨랐어요.04:35

이 프로젝트에서 중요한 부분 중 하나는 브랜딩이었어요. 폰트, 색상, 로고, 그리고 모양이 담긴 브랜딩 가이드라인을 받았죠.04:44

엄격하게 정해진 건 아니었지만, 이 앱을 디자인하면서 꼭 지켜야 할 사항들이 있었어요.04:52

모바일에서 폰트가 너무 안 보여서, 더 읽기 쉬운 폰트로 바꾸는 걸 제안했어요. 제목에는 원래 폰트는 그대로 두고, 나머지 부분은 새로 생긴 폰트로 변경하면 좋을 것 같아요.04:57

또 다른 문제는 주 색상이었는데, 연어 오렌지색처럼 보였고 대비가 좀 심했어.05:12

헬스케어 앱이다 보니 접근성은 절대적으로 중요하지만, 그쪽에서 정말 그 오렌지색을 고집하더라고요. 그래서 오히려 반박하기보다는 그걸 최대한 활용해서 작업했어요. 미세한 그라데이션과 패턴에 약간의 깊이를 더해서요.05:18

가독성과 접근성을 유지하면서도, 브랜드의 연결된 원형 요소들을 앱에 어떻게 적용할지 다양하게 시도해 봤어요.05:34

브랜딩이 온보딩부터 스플래시 화면, 앱스토어 자산에 이르기까지 제품 디자인 전체에 일관성 있게 적용되었습니다.05:43

UI와 흐름이 승인되면 모션 디자인 작업에 들어가죠. 아주 작은 상호작용, 온보딩 애니메이션, 전환 효과, 그런 작은 움직임들이 제품을 돋보이게 만들죠. 그래서 다시 모핑 작업을 하게 돼요.05:51

애니메이션 섹션이 진짜 좋거든요. 이번에는 제가 찾고 있는 헬스케어 앱이 아니더라도 괜찮아요. 제가 움직임 패턴들을 살펴보고, 이걸 어떻게 이 제품에 적용할 수 있을지 생각하죠.06:05

피그마에서 프로토타입 작업용으로 애니메이션 몇 개 만들었었는데, 대부분은 로티랩에서 했어요. 프로토타입은 GIF로 내보내고, 실제 개발자에게 전달할 때는 JSON 파일로 전달하는 방식이에요.06:18

유튜브에 있는 대부분의 영상이 여기서 끝나요. UI 디자인을 완료하고 시청해 주셔서 감사합니다.06:30

하지만 우리 아직 끝나지 않았어요. 마지막 단계는 앱 스토어 에셋입니다.06:36

앱 아이콘이랑 스플래시 스크린 같은 것들이요. iOS 업데이트 내용들을 반영하면서 Liquid Glass 버전도 추가해야 했어요.06:40

안드로이드는 머티리얼 디자인 버전을 이용해서 앱 로고를 변경할 수 있어요. 그래서 이 모든 게 피그마에 다 준비되어 있어서 개발자가 그냥 내보내서 거기에 추가하면 돼요.06:49

자, 이제 완성 전과 완성 후를 공개할 시간입니다.07:01

이게 제가 디자인 시작하기 전에 만들었던 초기 프로토타입이고, 최종 결과물은 이렇습니다. UI, UX, 브랜딩, 애니메이션, 기본적으로 처음부터 끝까지 모두 디자인했죠. 앱스토어에 적용할 준비가 되면 제가 개발자에게 모든 자료를 전달합니다. 말씀드린 것처럼, 피그마에서 전체 디자인 시스템을 구축했습니다.07:04

변수, 다양한 구성 요소, 구성 요소의 상태와 유형들을 포함해서 모든 게 일관성을 유지하고, 모든 프로토타입이 완전히 클릭 가능하도록 만드는데, 개발자들이 저를 더 좋아하게 만드는 저의 방법은 바로 영상 녹화하는 거예요. 피그마 프로토타입 모드로 들어가서 제가 직접 시연하는 거죠.07:24

핵심 사용자 흐름, 예를 들어 온보딩, 액션 생성, 주요 상호작용들을 설명하면서, 제가 이 기능이 어떻게 작동해야 하는지 예상하는 바를 설명했어요. 그런데 프로토타입을 클릭하는 제 모습을 담은 영상을 보여주는 게, 다이어그램만 보고 연결 관계를 파악하려 애쓰는 것보다 훨씬 이해하기 쉬웠어요.07:43

그 다음에는 개발자들과의 회의를 많이 줄일 수 있고, 실제 사용자들과 앱을 테스트하고 피드백을 받아서 개선 작업을 거칩니다. 그런 다음에 앱을 정식 출시하는 거죠. 네, 2026년까지 제가 사용하는 전체 UIX 프로세스입니다. 이 영상에서 하나만 가져가신다면, 개별 화면이 아니라 전체 흐름을 분석해보시는 걸 추천합니다.08:03

그리고 브랜드 이미지나 접근성과 같은 실제 제약 사항도 존중해야 합니다.08:24

혹시 이 과정의 어떤 부분을 더 자세히 설명해 달라고 하시면, 댓글로 알려주세요. 그리고 언제나처럼 좋아요, 구독 부탁드려요. 다음에 또 만나요.08:30

안녕!08:39