[본캠프] d+13.

박예지·2025년 2월 10일

[UIUX] TIL 📑

목록 보기
25/100
post-thumbnail


오늘의 계획

📌
1. 서비스 역으로 설계하기
2. 클론 디자인과 규칙 찾아내기

1. 서비스 역으로 설계하기

💡역설계, 역기획 (Reserve Engineering)

원본을 두고 도면이나 설계도를 역으로 설계해나가는 방식
대상을 체계적으로 분석해 원리나 중요한 규칙을 찾아내는 접근법이라는 뜻으로 확장

고려사항

  1. 디자인 자체보다는 어떤 이유로 이렇게 만들어졌을지 고민
  2. UI를 통해 어떤 행동을 유도하려고 했는지 추론
  3. 여러 유사 서비스를 놓고 공통점, 차이점 그리고 그 이유 고민
  4. 나라면 어떻게 했을지 고민
  5. 사용자가 해야하는 가장 중요한 행동을 중심으로 분석

💡
사용자가 핵심 행동을 수행하도록 만들기 위해 어떤 UI 요소와 UX를 사용하고 있는지 파악하는 것이 가장 중요하다.

과정

  1. 도메인 및 레퍼런스 설정
    • 내가 디자인할 서비스의 카테고리를 생각하고 그 카테고리에서 가장 대표적인 서비스 5-10개 찾기
    • 도메인 ⊃ 카테고리 (ex. 금융 ⊃ 신한은행, 토스, 네이버페이 등)
  2. 역설계로 어떤 내용을 확인하고 조사할 지 결정
    • 특정 구간이나 특정 요소만 분석하는 것도 가능
  3. 조사 대상 화면 준비
    • 직접 캡처하거나 레퍼런스 서비스 이용
  4. 화면 비교 후 분석한 내용 정리
    • 여러 레퍼런스 화면을 놓고 비교하면서 발견한 내용 정리
    • 모바일 스크린 사이즈로 줄여서 정리

2. 클론 디자인과 규칙 찾아내기

💡 클론 디자인 (Clone Design)

디자인을 복제한다는 뜻으로, 다른 서비스의 디자인을 따라하며 규칙과 스타일가이드를 분석하는 훈련
이미 잘 제작된 서비스를 놓고 어떻게 만들어졌는지 디자인을 직접 따라해보며 분석하는 과정
의도나 UX 전략보다는 UI 규칙을 파악해나가는 과정

진행하는 이유

  1. 잘 만들어진 서비스의 디자인 시스템이나 스타일 가이드를 역으로 추적해봄으로써, 어떤 UI 규칙을 가지고 있는지 파악
  2. 다양한 UI를 따라 그려보며 규격, 형태, 크기 등에 대한 나름의 기준점을 세우는데 도움이 된다.

고려사항

  1. 폰트 크기, 행간, 자간 등 폰트 스케일
  2. 컬러 스케일과 전체적인 색상 사용의 비중
  3. UI 요소의 크기, 종류, 형태 등

과정

  1. 디자인할 서비스 결정
  2. 역설계를 했다면, 역설계에서 분석한 서비스를 클론하는 것이 좋다
  3. 서비스 하나만 선정하여 집중
  4. 주요 사용자 흐름을 한 세트로 캡처하여 해상도에 맞게 준비

🎙️느낀점

사실 서비스 역설계를 굳이 해야하나 싶었지만 5개의 커머스 어플의 메인 화면으로 과제를 수행해보니 같은 순서대로 컴포넌트들을 배치해도 서비스가 강조하고 유도하고 싶은 내용에 따라 UI와 UX를 다르게 표현한다는 것을 알게되었다.

확실히 공식같은 것은 있지만 그것을 내가 만들고자 하는 서비스와 사용자의 특성에 맞게 조정할 줄 알아야하는 것 같다.

오전 시간에 구글 타이머를 맞춰놓고 일과를 진행하여 예전보다 집중을 잘 하고 있는 것 같지만 어제 늦게 자서 너무 피곤했다.
일찍 자야겠다.

강의를 학습하고 과제를 하는데 빨리 하려고 휘뚜루 마뚜루 서두르는 경향이 있는데 아직 스케줄이 여유가 있으니 좀 더 고민하고 찾아보고 진행하도록 하자

다음 시간에 학습할 내용🔥

  1. 클론 디자인 과제
  2. 베리언츠 프로터피 활용
  3. 포지션
profile
Life is pain au chocolat 🍞

0개의 댓글