TIL_4W1D_서비스 역으로 설계하기

judaybos·2025년 2월 10일
post-thumbnail

디자인 카타
오늘의 토픽 - 홈 버튼 위치 어디에 있는 것을 선호하시나요?
선택 A안

넷플릭스, 유튜브, 멜론, 인스타그램 등 주 사용앱에서 A안 처럼 배치 되어있기 때문에 A안이 더 편하다고 인식 되는 것 같음 제이콥의 법칙처럼
이번 선택은 멘탈모델이 중요시 되는 것 같음

B안 같은 경우 Thumb zone에 가까울 수는 있으나 주 사용앱 즉, 멘탈모델에서 B안의 경우를 띄지 않다보니 거부감이 드는 것이 가장 큰 이유임

역설계는 우리가 디자인 시 항상 만들어야 하는 결과 및 목표가 있는데, 그 결과나 목표를 고민하는 것이 어려움
그래서, 내가 디자인 하려는 것과 비슷한 서비스를 찾아보며 참고하는 것을 말함
역설계, 역기획은 원 제품이나 프로그래밍에서 제품을 놓고 도면, 설계도를 역으로 설계해내는 방식을 말함

역설계 시 고려할 점
디자인 자체보다 그렇게 한 이유에 대해서 생각해야 하며, UI 자체가 아닌 UI를 통해 어떤 행동을 유도하려고 했는지 UX를 추론하는 게 포인트
어떤 것이 유사, 어떤 것이 다른지 다각도로 관찰
사용자가 해야 하는 가장 중요한 행동을 중심으로 분석

역설계 과정 살펴보기
도메인을 레퍼런스로 삼을 서비스 확인하기
내가 디자인할 서비스 카테고리를 정한 후, 그 카테고리에서 가장 대표적인 서비스를 5~10개를 찾음

너무 많은 서비스를 찾게 되면 빠르게 정리하기 어려움

역설계로 어떤 걸 확인하고 조사할 지 정하기
역설계는 일반적으로 전체 제품과 과정을 다 분석해야 함
하지만 특정 구간, 특정 요소만 분석하는 것도 가능함

조사 대상 화면 준비하기
화면을 직접 캡쳐나 레퍼런스 서비스에서 구함

화면 캡쳐 시 스크롤이나 탭할 때 변하는 과정도 꼼꼼하게 잘 살펴보고, 필요하다면 화면 녹화도 해볼 것
레퍼런스 서비스는
우리가 사용해보기 어려운 앱이나 웹사이트, 또는 다른 OS의 앱 등의 화면을 볼 수 있는 대표적인 서비스임
대표적인 서비스로는 mobbin(해외 서비스 위주), wwit(국내 서비스 위주), gdweb(국내 웹 위주)이 있음

화면을 비교하여 분석한 내용 정리하기
캡쳐하거나 래퍼런스로 구한 화면을 피그마 파일안에 넣어, 다양한 관점으로 분석
이미지 크기는 모바일 스크린 사이즈로 줄여서 볼 것

2주차 숙제
숙제 1 : 주요 화면 비교하고 이유 찾기

숙제 2 : 클론 디자인

자신감이 없어 무신사로 디자인 클론 디자인을 해보았음

0개의 댓글