챕터2_피그마 활용 심화

서비스 역으로 설계하기

* 역설계의 개념

• 우리가 디자인을 할때는 항상 만들어야 하는 결과와 목표가 있다.
• 그 결과나 목표를 처음부터 고민하는 것은 매우 어려울 일이다.
• 그럴때는, 내가 디자인하려는 것과 비슷한 서비스를 찾아보는 게 큰 도움이 된다.
• 이미 잘 만들어져 있는 서비스들을 참고하면, 내가 어떻게 해보면 좋을지 힌트를 찾기 쉽다.
• 그 과정을 역설계, 역기획이라고 부른다.

  📌 역설계, 역기획(Reverse Engineering)
  역설계, 역기획은 원래 제품이나 프로그래밍에서 제품을 놓고 도면이나 설계도를 역으로 설계해내는 방식을 말한다. 지금은 대상을 체계적으로 분석해 원리나 중요한 규칙을 찾아내는 접근법이라는 뜻으로 확장돼 분야를 가리지 않고 사용된다.

* 역설계에서 고려할 점

• 디자인 자체 보다는 그렇게 한 이유에 대해 생각한다.
  • 디자인은 결과물 자체뿐만 아니라 어떤 이유에서 이렇게 만들었을지 고민하는 과정도 포함한다.
  • UI 자체가 아니라, UI를 통해 어떤 행동을 유도하려고 했는지 UX를 추론하는게 포인트이다.
• 어떤 것이 유사하고, 어떤 것이 다른지 다각도로 관찰한다.
  • 여러 유사 서비스를 놓고 비교하면서, 같은 부분은 왜 같은지, 다른 부분은 왜 다른지 고민한다.
  • 그리고 그렇게 했을 때 어떤 결과가 있었을지, 나라면 어떻게 해볼 수 있는지도 생각한다.
• 사용자가 해야 하는 가장 중요한 행동을 중심으로 분석한다.
  • 모든 서비스는 사용자가 반드시 해야 하는 핵심 행동이 존재한다.
  • 예를 들면, 뭔가를 팔아야 하는 서비스들은 사용자의 구매 행동이 제일 중요하다.
  • 또 소셜미디어는 사용자가 자주 들어와서 다른 사람과 소통하는 게 제일 중요하다.

    📌 역설계에서는 사용자의 핵심 행동을 이끌어 내기 위해 서비스들이 어떤 UI장치와 UX를 사용하고 있는지 찾아야 하는 게 최종 목적이에요!

* 역설계 과정 살펴보기

• 도메인 및 레퍼런스로 삼을 서비스 확인하기

  📌 도메인(Domain)은 여러 뜻이 있지만, 이런 경우에는 업계나 업종 정도로 이해하면 된다. 예를 들면 헬스케어, 금융, 커머스 등 서비스 카테고리 정도로 생각하면 된다.

  • 내가 디자인할 서비스의 카테고리를 생각하고, 그 카테고리에서 가장 댚적인 서비스를 5~10개 정도 찾는다.
  • 너무 많은 서비스를 찾게 되면 빠르게 결과를 정리하기 어렵다
  • 예시
    • 금융: 토스, 뱅크샐러드, 카카오뱅크, 네이버페이 등
    • 패션 커머스: 무신사, 지그재그, 에이블리 등
    • 배달: 배달의민족, 쿠팡이츠, 요기요 등
    • 숙박: 여기어때, 야놀자 등

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

  • 역설계는 일반적으로 전체 제품과 과정을 다 분석해야 한다.
  • 하지만 특정 구간이나 특정 요소만 분성하는 것도 가능하다.
  • 예시
    • 장바구니에 담은 상품이 없으면 어떻게 구매로 유도하고 있는지 과정 비교하기
    • 메인 화면 가장 첫 화면의 배너 높이 비교하기
    • 내 계좌 잔액을 보여주는 화면 비교하기

• 조사 대상 화면 준비하기

  • 화면을 직접 캡처하거나 레퍼런스 서비스에서 구한다.
  • 화면을 캡처할 때는 스크롤이나 탭할 때 변하는 과정도 꼼꼼하게 잘 살펴보고, 필요하다면 화면 녹화도 해본다.

• 화면을 비교하며 분석한 내용 정리하기

  • 여러 레퍼런스 화면을 놓고 비교하면서 찾아낸 내용을 잘 정리한다.
  • 이미지의 크기는 모바일 스크린 사이즈로 줄여서 본다.
  • 역설계 예시
    
    

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

* 클론 디자인의 개념

• 클론 디자인의 뜻
  💡 Clone(복제하다) + Design : 디자인을 복제한다는 뜻으로, 다른 서비스의 디자인을 따라하면서 규칙과 스타일가이드를 분석하는 훈련이다.
  • 우리는 다양한 서비스를 경험하고 우리가 만들고 싶은 서비스를 기획하고 디자인한다.
  • 역설계와 유사하게, 이미 잘 만들어진 서비스를 놓고 어떻게 만들어졌는지 디자인을 직접 따라해보면서 분석하는 과정이다.
  • 다만, 클론 디자인은 디자인의 의도나 UX 전략을 찾아내는 것보다는, 어떤 규칙으로 UI가 만들어졌는지 찾아내는 과정이다.
  • 일반적으로 역설계 과정에서 UI 분석도 같이 하기 때문에 클론 디자인도 같이 진행하는 편이다.
• 클론 디자인은 왜 하는가?
  • 클론 디자인을 하는 이유는, 잘 만들어진 서비스의 디자인 시스템이나 스타일 가이드를 역으로 추척해봄으로써, 어떤 UI 규칙을 가지고 있는지 파악해볼 수 있기 때문이다.
  • 또한 UI 디자인이 익숙하지 않을 때, 다양한 UI를 직접 따라 그려보면서 규격, 크기, 형태, 색상 등에 대한 나름의 기준점을 만드는 것에 도움을 준다.
• 어떤 걸 클로링하나?

  📌 클로닝의 목적
  클로닝의 최종 목적은 이 서비스의 UI 규칙을 파악해내는 것이다. 클로닝도 역설계와 마찬가지로 목적이 분명한 것이 좋다.

• 클로닝을 할 땐 어느정도 잘 알려져 있거나 규모가 있는 서비스를 참고하는 것이 좋다.
• 클로닝할 땐 다음의 요소들을 중심으로 따라 만들어 본다.
  • 폰트의 크기와 행간, 자간 등 폰트 스타일
  • 컬러 스케일과 전체적인 색상 사용의 비중
  • UI 요소의 크기, 종류, 형태 등

* 클론 디자인 과정 실습하기

• 디자인할 서비스 정하기
  • 역설계를 했다면, 역설계에서 분석한 서비스를 클론하는 것이 역설계와 클론 디자인의 시너지를 만들기 더 수월하다.
• 전체적인 레이아웃 규칙 발견하기
• 세부적인 UI 따라하기
  • 큰 덩어리부터 시작해서 세밀한 부분으로 좁혀 들어간다.
• 스타일가이드로 정리하기
  • 찾아낸 UI 패턴들이 어느정도 규칙성이 있다면 스타일가이드 문서로 정리한다.

🥰 Blah Blah

역설계는 처음 들어보는 개념이였다. 예시가 있어서 조금 이해는 갔지만 직접 해봐야 알 것 같다. 클론 디자인은 주니어 시절부터 들어왔어서 알고는 있었고 서너번 해봤는데, 스타일 가이드 문서까지 작성해야 하는 건지는 몰랐다.
피그마 기초강의는 몇번을 듣는지 모르겠다. 자꾸 이론과 실습만 하고 실무를 하지 않으니 돌아서면 잊어버린다. 하아 :(