UX/UI 디자인 실력 10배 상승하는 법
2022. 9. 15.

UX/UI 디자인 실력 10배 상승을 위한 성장 마인드 셋을 가져라!

UX 분야가 계속 배우고 성장하는데 초점을 두고 있기 때문에 실패를 좌절과 포기의 이유로 삼는다면 쉽게 번아웃이 되고 지속하기 어렵기 때문입니다.

성장 마인드 셋, 고정 마인드 셋



사용자는 바쁜 사람들이다. 그들을 고민하게 만들지 말자

 

UX, UI 디자인에 포함되는 활동

UX 디자인 실력 10배 상승을 위한 디자인 원리

일관성을 가져라!
일관성은 사용자에게는 편안함, 익숙함, 예측 가능함을 제공해서 고민 없이 제품을 사용할 수 있게 만들어야 한다

행동 유도성을 만들어라!
설명서를 보지 않고도 고민하지 않고 제품을 사용할 수 있게 만들어야 한다.

멘탈 모델과 콘셉트 모델을 품어라!
멘탈 모델은 사용자가 제품에 대해 가지고 있는 기존의 기대치를 말하고 콘셉트 모델은 제품이 제공하는 경험이나 인터페이스를 말한다. 이 두 가지를 품어서 만들어야 한다.

대응의 원리를 적용하라!
조작에 따른 결과를 쉽게 예측할 수 있게 디자인해서 만들어야 한다.

슈퍼마켓에서 배우는 정보 설계를 적용하라!
사용자가 원하는 정보를 잘 얻을 수 있게 성격에 따라 카테고리를 잘 분류해서 만들어야 한다.

사용자 의도를 분류하라!
사용자의 의도가 높고 낮음을 분류해서 만들어야 한다. 예) 슈퍼 마켓에 갈 때 "사과를 살 것이다"라는 구체적인 계획이 있다면 의도가 높은 것이고 배는 고프지만 뭘 먹어야 할지 모르는 상태에서 슈퍼마켓에 들어온다는 것은 의도가 낮다는 것이다

 

UI 디자인 실력 10배 상승을 위한 디자인 원리

유사성을 가져라!
사용자가 시각적으로 유사한 요소들을 하나의 그룹으로 묶어서 보기 때문에 가장 중요한 정보 묶음을 눈에 잘 띄게 해서 사용자가 빠르게 찾을 수 있게 만들어야 한다

근접성을 가져라!
사용자들은 가까이에 있는 요소끼리는 연관성이 있다고 생각하기 때문에 그것을 근접하여 만들어야 합니다

3초 룰과 스캔 용이성을 적용하라!
사용자는 3초 만에 사이트에 머물면서 어떤 행동을 할지 아니면 페이지를 떠날지 결정하기 때문에 사용자에게 중요한 정보가 눈에 잘 들어오게 만들어야 합니다.

CTA(Call-To-Action) 적용하라!
CTA는 행동을 유도할 수 있도록 버튼이나 링크 등을 말합니다. 사용자 자신이 원하는 것을 이루게 하는 데 중요한 열쇠입니다.

디자인 시스템을 가져라!
디자인 시스템은 사용자에게 일관된 시각적 언어와 경험을 제공합니다. 디자인 시스템이 있다면 사용자는 더욱 편안하게 제품을 사용할 수 있고 디자이너와 개발자는 재사용 가능한 요소들을 만들어 훨씬 더 효율적을 업무를 수행할 수 있습니다.

 

유저 리서치를 모르는 것은 UX 능력이 없는 것이다.

유저 리서치란?
사용자가 겪는 문제를 해결하기 위해 사용자의 피드백을 듣기 위한 모든 활동입니다.


유저 리서치의 장점

  1. 사용자가 무엇을, 왜 하는지 더 깊게 이해할 수 있다
  2. 가설을 검증할 수 있다
  3. 실패의 리스크를 줄이고 비용을 절감할 수 있다
  4. 디자인의 근거를 제공하고 이해관계자를 설득하거나 커뮤니케이션하는데 아주 유용하게 활용된다
  5. 새로운 기회와 문제점을 파악하는데 도움이 된다.


유저 리서치의 종류와 목적
정성 조사와 정량 조사로 분류할 수 있고 무엇을 생각하는가? 와 무엇을 하는가로 분류할 수 있다.

  • 사용자는 무엇을 생각하는가? 에서 할 수 있는 조사
    • 일대일 심층 인터뷰
    • 고객 센터
    • 설문 조사
    • 다이어리
  • 사용자는 무엇을 하는가 ? 에서 할 수 있는 조사
    • 사용성 테스트
    • 고객 의견
    • 애널리틱스
    • A/B 테스트
    • 다이어리


유저 리서치의 페르소나는 무엇이고 왜 사용할까?

  • 페르소나란?
    • 타깃 사용자층을 설명하고 이를 팀원과 함께 공유하기 위해 만든 가상의 인물
  • 왜 사용할까?
    • 타깃층을 명확하게 정의하고, 이들에게 집중하는 데 도움이 된다.
    • 우리가 어떤 문제를 해결하고 있는지에 대해 팀원들과 문제의식을 공유할 수 있다.
     

페르소나 예시

 

사용자를 끌어당기는 UX는 어떻게 만들까?

디자인 씽킹을 해라!


어떤 문제를 해결하기 위해 사용자를 가장 중심에 두고 혁신을 얻고자 하는 방법

디자인 씽킹 5단계

1. 문제에 대해 공감해라!

사용자를 깊이 이해하고 그들이 겪는 문제가 무엇인지 발견하고 공감하는 단계

공감 단계에서 할 수 있는 유저 리서치 활동

 

사용자 데모 그래픽 조사

  • 개발 제품의 타깃 사용자를 명확하게 정의할 수 있다.

일대일 심층 인터뷰

  • 사용자는 어떤 사람이며, 어떻게 살고 있는지, 어떤 니즈가 있는지, 어떤 문제를 겪고 있는지 물어보는 단계

사용성 테스트

  • 프로토타입을 만들고 사용자로부터 피드백을 얻어 개선해야 할 점을 알아가는 단계

애널리틱스 조사

  • 정략적인 데이터를 추출해주는 소프트웨어를 활용해서 사용자가 수치 측면에서 무엇을 어떻게 하는지 알아보는 단계

 

2. 문제를 정의해라!

문제에 대한 정의

  • 발견한 많은 데이터를 좁혀 나가면서 집중해야 할 문제가 무엇인지 정의하기

사용자에 대한 정의

  • 사용자의 나이, 직업, 사는 지역, 라이프스타일 등을 최대한 구체적으로 정의하기


3. 아이디어를 찾아라!

최대한 많고 다양한 아이디어를 발산하고 각 아이디어의 장단점을 따져서 더 좋은 아이디어를 가려내거나 여러 아이디어들을 통합하고 발전시켜 나가기

아이디어 도출 방법들

브레인라이팅

  • 정해진 시간 내에 여러 가지 아이디어를 포스트잇과 같은 종이에 적고 돌아가면서 자신의 아이디어를 말하게 하고 비슷한 성격을 지닌 아이디어는 한 군데에 모아두는 방법

경쟁 사례 데모

  • 문제 해결 방식이 어떤 것이 있고, 실제로 어떻게 구현될 수 있는지를 확인하는 방법이고 이를 통해 벤치마킹을 하거나 추가 아이디어를 떠올리기

크레이지 8

  • A4용지를 3번 접으며 8개의 구획으로 나뉩니다. 그리고 8분 동안 각각의 영역에 아이디어를 그리는 방식

크레이지 8 스케치 예시


아이디어 좁히기

아이디어의 효과나 사용자에게 전달할 수 있는 가치 정도를 고려해서 우선순위를 매겨서 아이디어를 좁혀나가야 한다



아이디어 좁히는 방법

팀원 방식

  • 한 사람당 4-5개의 스티커를 나누어 주어서 투표를 하여 순위를 매긴다. 팀원들에게 가짜 100달러를 주어서 그 돈을 가치 있다고 판단되는 아이디어에 원하는 만큼 투자하는 방식

개인 방식

  • 각 아이디어의 장단점을 비교해보고 가장 먼저 테스트해보고 싶은 아이디어를 뽑아서 다음 단계인 프로토타입으로 넘어가는 것이다


4. 프로토타입 제작해라!

세운 가설을 검증하고 피드백을 받기 위해서 만든 시제품

 

로우 파이 (Low-Fidelity)

  • 스케치
  • 시각 완성도가 높지 않은 단계

스케치

 

미드 파이 (Mid-Fidelity)

  • 와이어프레임
  • 시각적으로 완성도 있은 살을 붙이기 전에 뼈대잉 와이어프레임을 만드는 것이다 ( 흑백 버전으로 정의!!)
  • 유저 플로우는 어떤 화면이 필요하고 화면 간에 어떻게 이동하며 화면 내 요소들은 어떻게 작동 하는지 구체적으로 정의할 수 있다

와이어프레임

하이파이 ((High-Fidelity)

  • UI 다자인
  • 퀄리티 수준이 높은 디자인 - 폰트 크기, 색상, 아이콘 디자인, 도형 내 사진이 해당함
  • 출시 및 테스트 가능

Fidelity 단계 차이

핸드오프

  • 디자인을 확정하고 출시하기로 결정했다면 디자인 산출물을 만들어서 개발자들에게 공유하는 것을 의미한다
  • 섹상 코드, 상세한 폰트 크기, 구성요소 간의 간격 등 픽셀 단위의 세부적인 값들이 해당함

 

5. 테스트를 해라!

개발 전 테스트

  • 사용성 테스트: 사용자에게 프로토타입을 사용하게 한 후 관찰하고 피드백을 받는 테스트

 

출시 후 테스트

  • 애널리틱스: 몇 명 방문했는지, 화면 전환율과 같은 구체적인 통계자료 툴을 사용하는 테스트
  • A/B 테스트: 다른 버전의 A, B에서의 차이점이 어떤 영향을 주는지 관찰하는 테스트
  • 사용성 테스트: 가설이 맞았는지, 적용한 해결책이 왜 효과가 있었는지 알아보는 것이다.  Why?를 확인하는 테스트 

 

 

디자인 실력 10배 상승을 위해 해야 할 목록

UX/UI 디자인 원리와 원칙을 끊임없이 배워라!

정해진 답이 없고 더 좋은 방법에 대한 고민을 계속해야 하기 때문에 원리와 원칙을 배우고 공부해야 한다

 

디자인 툴을 익혀라!

세계 최고의 디자인 툴 피그마를 익혀라

figma

 

시각적 표현력을 키워라!

입문자는 꾸준히 시각적인 능력을 끌어올리고 노력해야 좋은 질의  UI를 만든다.

 

UX/UI 디자인 프로젝트 진행해라!

작은 것 하나라도 경험해볼 수 있는 프로젝트를 지금 진행해보자

 

포트폴리오 제작과 커리어 도전 및 시작해라!

프로젝트를 양보다 질적으로 승부하기

 

네트워킹을 해라!

콘퍼런스와 밋업 행사에 참여하고 다른 디자이너들과 교류하여 그들의 생각, 트렌드, 인재상을 알아보자

 

팟캐스트를 시청해라!

디자인 채널 `디자인 테이블`, `디자인 디테일` 을 보고 실무에 있는 사람들이 이 분야에 어떻게 들어오게 되었는지 알아보자

 

10배 상승을 더 공부하기 위한 추천 자료

추천도서로 10배 더 상승하기

  • 린 스타트업
  • 사용자를 생각하게 하지 마!
  • 도널드 노먼의 디자인과 인간 심리
  • 사용자 경험 스케치
  • UX/UI의 10가지 심리학 법칙
  • 어떻게 성공했나
  • 단순함의 법칙

 

디자인 원리 더 맛보기

  • 디터 람스의 디자인 십계명

디터 람스의 디자인 십계명

  • 휴리스틱 평가 10 항목

최신 UX/UI 디자인 트렌드 사이트 구경하기

  • 비핸스(Behance)
  • 드리블(Dribble)
  • 모빈 디자인(mobbin.design)