UX/UI 부트캠프 13일차 TIL

내일배움캠프 UXUI 6기

이해령 2025. 2. 10. 21:23

2025.02.10

역설계, 디자인 클로닝

A의 UI가 한 화면에서 더 많은 기능을 볼 수 있다.

은행 앱들은 기능이 많은 경우가 많은데, 전체보기를 지원해서 사용자가 원하는 서비스를 찾기까지 시간을 줄여준다.

밑에 최근 이용 내역을 보여줘서 사용자에게 필요한 정보를 더 제공하고 있다.

B는 설명이 같이 덧붙여져 있어서 어떤 기능인지 굳이 확인하지 않아도 되고,

앱에 익숙하지 않거나 은행 시스템에 익숙하지 않은 사람들에게는 이해가 더 쉬울 것 같다.

한 눈에 보이는 기능이 적어서 원하는 기능을 사용하기까지 단계가 한 개 더 추가 된 느낌이라 조금 아쉽다.

과제1. UI 차이점 알아보기

과제2. 와이어프레임 그리기

가상의 굿즈 커머스 서비스의 제품 리스트 화면과 제품 상세 정보 화면

피그마 플러그인

대상을 체계적으로 분석해서 중요한 규칙이나 원리를 찾아내는 접근법

-디자인 자체보다, 이유에 대해 생각하기

-유사점과 차이점 관찰

-사용자가 해야 하는 가장 중요한 행동을 중심으로 분석

1) 도메인 및 레퍼런스 확인

카테고리를 생각하고 대표적인 서비스 5~10개 찾기

2) 역설계로 어떤 걸 확인하고 조사할지 정하기

3) 조사할 대상의 화면을 준비하기

레퍼런스 사이트나 직접 캡쳐해서 준비하기

4) 화면을 비교하며 분석한 내용 정리

모바일 스크린 사이즈로 줄여서 다양한 관점으로 분석

1) 디자인할 서비스 정하기

하나의 서비스에 집중, 주요 사용자 흐름을 캡쳐해서 준비

2) 전체적인 레이아웃 규칙 발견하기

전체적인 레이아웃 접근

위에서부터 영역의 높이나 간격, 좌우 여백 파악

3) 세부적인 UI 따라하기

레이아웃에 맞게 세부 규칙을 파악

전체적인 배색은 어떻게 썼는지, 폰트에는 무슨 규칙이 있는지 추론

4) 스타일가이드로 정리하기

오늘 하루는 역설계와 클론 디자인을 하는 방법과 과정에 대해 배웠다.

배운 개념 자체는 어렵진 않았지만 직접 분석하고 정리하는 과정은 생각보다 어려울 것 같다.

공부하면서 집중력이 많이 떨어져서 딴짓을 좀 하게 되었는데 내일은 그러지 않도록 노력할 것이다.

캠을 키고 공부를 한다던지, 잠을 푹 자고 온다던지 할 생각이다.

아마도 내일은 피그마 2주차 과제를 끝내고 3주차 강의까지 듣는 것이 목표이다.