#TIL_7 🍀 UXUI 강의 시청 / 프로토타입 구현 과제
제 잃어버린 연휴를 찾습니다.
0. 디자인 카타
오랜만의 디자인 카타인데 딱 꽂히는 토픽이 없어서 아쉬웠다.
그래도 실생활에서 자주 사용하는 기능인 Date Picker에 대한 토픽을 골라 진행해 보았다.
💭나의 의견
A 캘린더형
장점: 직관적이고 익숙한 디자인, 화살표 버튼을 통해 원하는 날짜를 찾기가 쉽다.
단점: 모바일 환경에서 화면을 많이 차지한다.
📌 사용 예시: 호텔 예약, 항공권 예매, 일정 선택 UI 등
B 휠형
장점: 터치스크린에서 사용하기 편리하고 작은 화면에서도 공간을 많이 차지하지 않는다.
단점: 특정 연도나 날짜를 선택하는 데 시간이 걸릴 수 있고, 한눈에 보기 어렵다.
📌 사용 예시: 모바일 앱의 생년월일 선택, 알람 설정 등
B보다는 A를 선호하는 편이고, 사실 가장 편한 것은 캘린더 + 텍스트 입력이 아닐까 싶다.
사용자의 목적에 따라 가장 적합한 Date Picker를 선택하는 것이 중요할 것 같다.
💭팀원들과의 의견 정리
대부분 캘린더형 방식이 직관적이고 일정 관리에 유리하다는 의견이며, 특히 요일과 날짜를 한눈에 볼 수 있는 점이 강점으로 꼽혔다. 하지만 연도를 빠르게 변경하는 데는 휠형이 유리하므로, 캘린더 UI에 텍스트 입력이나 스크롤 방식을 보완적으로 추가하는 것이 최적의 해결책으로 제안되었다.
|
|
좋은 사례 ex) TimeBlocks - 캘린더형 + 휠형
1. 강의 시청
연휴 때 듣다가 만 UXUI 디자인 입문 6주차 강의를 다 들었다.
과제는 어제 해놓아서 내가 맞게 한건지 강의를 들으며 검토하는 시간도 가졌다.
드디어 온보딩 기간의 목표 강의 2개를 모두 수료하였다!!
UXUI 디자인 입문 강의가 이론 위주이기 때문에 쉽고 금방 들을 수 있을 거라 생각했었는데
실습이 많은 피그마 기초 강의보다 공부한 내용을 내 것으로 만드는 것이 더 어려웠던 것 같다.
2. 프로토타입 구현 과제
월요일에 2단계까지 마무리 했었는데, 이어서 3단계 프로토타입 설계하기를 진행하였다.
🎨 초기 와이어 프레임 구축
배달 음식 영양 정보 및 칼로리 표시 관련 문제를 정의하고 디자인 씽킹한 것을 토대로 초기 와이어프레임부터 그려보았다.
좋은 가독성의 사례인 배달의 민족의 표시 방식을 참고하였고, 외의 문제점들은 개선하여 구축해 보기로 하였다.
🎨 Figma 스타일, 컴포넌트 만들기
 |
 |
🎨 Figma UI 구현
무료 이미지 플러그인 Photos by Freepik을 사용하여 이미지를 서치하였고,
App Bar와 같은 컴포넌트에 필요한 아이콘은 플러그인 Material Design Icons를 사용하였다.
 |
 |
🎨 결과
아직 다 완성하진 못하였지만 기본적인 두 페이지는 80% 정도 완성한 것 같다.
프로토타입 연결, Smart Animation까지 활용하여 연결해주었다.
다음주에 개인 과제를 마무리할 예정인데 더 나은 프로토타입이 나왔으면 좋겠다!!
이번주 WIL은 연휴가 껴있던 관계로...
한 줄 요약: 잘 쉬고 잘 먹고 공부까지 잘 마무리하였다😅
끝!!!!!!!