러닝 기록은 운동 앱에, 크루 공지는 단체 대화방에, 대회 정보는 또 다른 사이트에. 함께 달리려는데 확인할 정보가 여기저기 흩어져 있다면 번거롭겠죠?

이젠아카데미 수강생들이 제작한 ‘W(위런)’은 러닝 기록과 크루 활동을 연결한 모바일 앱 UIUX 디자인 포트폴리오입니다. 사용자 문제 정의부터 페르소나와 사용자 여정 지도, 메뉴 구성과 화면 디자인까지 담았습니다.

수강생들은 어떤 불편을 발견하고, 이를 앱 화면으로 어떻게 풀어냈을까요?

UX 기획의 시작, 누구의 어떤 불편을 해결할까?

위런은 기록을 남기는 기능과 함께, 러너들이 모임을 준비하고 경험을 공유하는 과정에 주목했습니다.

작품에서 제시한 불편은 크게 네 가지입니다. 크루와 대회 정보가 여러 채널에 흩어져 있고, 모임 참석 여부는 단체 대화방에서 따로 확인해야 하며, 완주 후 기록과 감상을 러너들과 나눌 공간이 필요하다는 점입니다.

수강생들은 크루 활동과 대회 참가를 즐기는 러너를 가상의 대표 사용자, 즉 ‘페르소나’로 설정했습니다. 이어 대회 참가를 결심하고 준비한 뒤, 완주 기록을 공유하기까지의 행동과 감정을 ‘사용자 여정 지도’로 정리했습니다.

누가 사용할지 정하고, 그 사람이 어느 순간에 불편을 겪는지 살펴본 것이죠. 이 과정에서 일정 관리와 코스 탐색, 기록 공유라는 설계 방향을 구체화했습니다.

UX 문제 해결 사례, 불편을 앱 화면으로 연결하기

1. 흩어진 크루 일정은 한곳에

‘내 일정’ 화면에는 크루 정기 모임과 관심 대회를 모았습니다. 예정된 일정과 종료된 일정을 나누고, 참석 여부도 선택할 수 있도록 구성했는데요.

모임 상세 화면에는 장소와 코스, 페이스, 참석자와 공지를 배치했습니다. 단체 대화방의 메시지를 거슬러 올라가며 찾던 정보를 일정 중심으로 정리한 설계입니다.

·····

2. 러닝 코스는 내 수준과 조건에 맞게

처음 가는 코스라면 거리 외에도 궁금한 것이 많습니다. 초보자가 달리기 괜찮은지, 얼마나 걸리는지, 화장실이나 급수대가 있는지도 확인하고 싶죠.

위런은 코스를 초급·중급·상급으로 나누고, 상세 화면에 거리와 예상 시간, 고도와 노면, 편의정보를 담았습니다. 사용자가 필요한 조건을 비교하며 선택하도록 구성했습니다.

대화형 도우미 ‘러니’로 정보를 찾는 방식도 제안했습니다. 지역이나 거리 등 조건을 좁혀가며 코스와 크루를 탐색하는 화면으로, 목록을 살펴보는 방식에 대화형 탐색을 더했습니다.

·····

3. 완주 기록은 러너들과 나누도록

달리기를 마친 뒤에는 기록과 사진을 카드로 정리해 피드에 공유하는 흐름을 설계했습니다. 다른 러너의 기록에 응원과 댓글을 남기는 화면도 담았는데요.

개인의 기록이 사람들과의 소통으로 이어지도록 한 것입니다. ‘함께 달리는 경험’이라는 기획 의도가 기록 이후의 화면까지 연결됩니다.

UI 디자인, 메뉴 구조부터 버튼까지 기준을 세우다

여러 기능을 담은 앱에서는 원하는 메뉴를 쉽게 찾는 것도 중요합니다. 위런은 홈·피드·기록·마이페이지를 중심으로 메뉴를 나누고, 홈에서 기록 시작과 코스 탐색, 일정 확인으로 이동하도록 구성했습니다.

특히 ‘오늘 기록 시작하기’ 버튼은 눈에 띄게 배치했습니다. 앱에 들어온 사용자가 러닝을 시작하는 행동을 우선하도록 계획한 부분입니다.

화면 전반에는 어두운 배경과 라임색, 오렌지색을 사용했습니다. 주요 버튼과 선택 상태에 강조색을 적용하고, 글꼴과 아이콘, 버튼 형태는 디자인 시스템으로 정리했습니다.

여기서는 색상 자체와 함께 어떤 행동과 정보를 강조했는지 살펴보면 좋습니다. 기록 시작이나 모임 참석처럼 사용자의 선택이 필요한 곳에 공통된 시각적 기준을 적용한 모습을 확인할 수 있습니다.

내 UIUX 포트폴리오에 참고할 점은?

위런에서 참고할 부분은 문제와 디자인을 연결해 설명하는 방식입니다.

일정 확인이 번거롭다는 문제는 일정 목록과 참석 버튼으로, 코스 선택에 정보가 필요하다는 고민은 난이도와 편의정보를 담은 화면으로 이어집니다. 화면을 보여주면서 그 이유까지 설명하니, 프로젝트의 의도도 이해하기 쉬워집니다.

평소 사용하는 앱에서 “이 부분은 조금 불편한데?”라고 느낀 적이 있나요? 그 불편을 적어보고, 어떤 화면으로 바꾸면 좋을지 생각해보세요. 위런처럼 일상에서 발견한 작은 고민이 나만의 UIUX 포트폴리오를 만드는 출발점이 될 수 있습니다.

참여 가능성 캠퍼스는?

🚩 이젠아카데미 강남캠퍼스

🚩 이젠아카데미 종로캠퍼스

🚩 이젠아카데미 인천캠퍼스

🚩 이젠아카데미 안산캠퍼스

이젠아카데미DX교육센터 - AI캠퍼스 - AI UXUI디자인(피그마AI) & 웹기획 프론트엔드 바이브코딩 부트캠프

UX/UI 웹 디자이너, 웹 기획자, UX/UI 기획자, BX 구축 및 관리, 프론트엔드 개발자, UX/UI 시각화

https://www.ezenac.co.kr/ezen/curriculum/?idx=5339

#AIUXUI디자인 #UIUX디자인 #웹기획 #프론트엔드 #바이브코딩 #UIUX부트캠프 #UIUX취업 #UIUX디자이너#UIUX포트폴리오 #UIUX포트폴리오레퍼런스 #UIUX포트폴리오예시#피그마 #UIUX취업 #UIUX국비지원 #이젠아카데미DX교육센터