UX/UI 디자인

 

이전 글에서는 아이디어 빌딩이란 주제로 본격적인 학원 수강 강좌를 들었고 사람들과 조를 만들고 커뮤니케이션 하는 과정을 정리해보았다.

 

아이디어 빌딩(1)

 

 

 

 

개발자로 지내다 보며 개인 앱을 개발할 때   디자인이 젤 어렵다고 생각이 들었다.

 

왜냐면 모바일이나 웹 페이지에 색상을 겹쳐서 넣거나  특정 배경에 글자를 넣을 때도 그냥 감으로 하면 시간도 걸리고 어색하고 하기도 한다.

 

감이라는 건 내가 웹페이지나 앱에서 봤던 정확하진 않지만 느낌으로 어울리고 안 어울린다는  감으로 치중해서 했다는 점이어서 더욱 어렵게 느껴 지곤 했다.

 

감이 아니라  어떻게 하는게 좋을지?  강사님께 물어보고 싶기도 했다.

 

대답은

시중에 나와있는 앱들이 어떤 색과 어떤색 조합으로 하였는지 그게 어울리는지에 대한 벤치마킹이 우선이라고 했다.
우리 서비스의 아이텐티티 색상을 정하고 그 이후에는 텍스트, 배경색 등을 고려해서 해야 한다고 한다.
결국 찾아서;;

 

 

디자인 수업 진행

인원이 안와서 심심한 설문

 

---

 

총 4.5 일 정도 시간이 할여 되었다.

쭉 이어서 한 것은 아니고 2일 강의  띄어서 2일 그리고 마지막 반나절 정도 진행이 되었던 것 같다.

 

강사님은  다양하나 프로젝트에 투입되어 디자이너, UX 기획등을 하신 분이었다.

나름 실무에서 디자이너로 현업들과 조인해서 업무를 진행하신 듯 보였으며 기존에 아이디어 빌딩에서 이론보다는 실무 중심에 이야기와

자신의 경험등에 대해서 설명해 주셨다.("개발자들한테 많이 디인 듯??")

 

일단 종합 적인 커리큘럼 말하자면,

1. 디자인 기초(유저 리서치)
2. Figma를 통한 프로토 타입 만들기
3. UT 테스트
4. 브랜드 개념(상표, 네이밍)
5. 실습(중간중간 필요시)

 

역시나 이론을 일단 해야 하기 때문에 초반에 짧은 시간에 바로 실습을 해야 하지만 점차  실습 시 여유로운(?) 시간을 주신 걸로 기억한다.

 

---

1. 디자인 개론

• UX(User Experience)는 사용자경험에 대한 문제를 찾는 방법.
• UX Design 좁은 분야(일부분만 처리하는 경우를 뜻한다.)
• UX 영역
  • 사용성 : 좁은 의미로 표현 
    • 익숙하지 않은 생소한 서비스인데 너무 재미와 동기부여를 줘야 하다
    • 총체적 : 사용성뿐만 아니라 전체적으로 경험, 쇼핑이나 재미, 사용성을 다 넣는다.
    •  예) 쇼핑몰에서 누르면 어떤 혜택이 올 껏 같다. 기능 네이밍, 아이콘을 넣어서 문제없게 해야 한다.
  • 정확한 문제를 찾기 위한 관점:전문성이라고 생각
  • 다양한 문제점 디자인을 고려해야 한다.
• ux 디자이너 관점
  • 인지적 관점
    
    • 지각(시야에 들어온다)
      • 키오스크가 꽉 차게 위해서 크게 만듦(요새는 작아짐)
      • 이 기능이 보이는지??(위치 및 진하게 눈에 들어오게 해야 한다.)
    • 시각요소(비주얼 패턴)
      • 예) 버튼: 사각형도형(내부텍스트)이라고 인지(학습이 필요)
  • 창의적이 아니라 가이드(머터리얼 디자인)로(구글, 애플)하는 게 좋다.
  • 인지
    •  인식
      • 기억 눌어 보지 않은 기억은 안 누른다. 친숙함과 새로움(8:2) 10% 정도만 새롭게 진행
  • 행동
    • 실제로 버튼을 눌렀을 때 행동
    • 지도앱 => 뛰어가면서 등 누르기 힘든 경우
    • 확인하려면 누루는 상황을 눌러봐야 한다. 상황재현해서 테스트
  • 감정적 관점
    • 신기한 감정은 3번 이상 지속이 안된다.
    • 만족하는 걸 물어본다고 안된다? => 질문을 잘 계획해야 한다.
    • 복잡하기 때문에 문제를 알아야 한다.(구체적으로 물어봐야 한다.)
  • 상황/맥락적 관점
    • 상황:이동할 할 때 상황에 따라 사용자의 상황에 맞게 처리해 준다
    • 맥락:냉장고 ->티브이 보다가 먹방이 나온다던가, 야근할 때 메뉴 등 추천 레시피를 보여주는걸 맥락적 관점이다.
  • 행동적 관점(gesture)
    • 휴대폰 제스처?
• 퀴즈
  • 버튼 디자인을 제대로 만들어서 반영했는데, 사용자가 버튼을 못 찾는다
  • 지각
    • 버튼인지 모른 건지?, 보질 못한 건지를 파악해야 한다?
  • “‘자세히’라는 단어를 보긴 했는데, 버튼인지 몰랐다.”
• 비주얼 패턴=> 타깃에 대한 고려

• 버튼처럼 보이긴 했는데,
  • 이 아이콘이 어떤 의미인지
  • 몰라서 안 눌렀다.”
    • 기억 (사용해보질 못했다)
      • 찾기-> 망원경 아이콘으로 표현하면 사용자는 이 버튼이 무엇에 쓰는지 인지하지 못한다.
  • 레시피를 보고 요리를 하다 보면
    • 손이 지저분해서 폰으로 레시피 내용을 조작하기 어렵다.”
    • 발로 냉장고, 목소리로 UI를 조절하는 특허??
    • 이 앱으로 송금거래나 금융서비스를 이용했을 때
• 보안상의 문제가 없는지 불안하다.
  • 감정적 문제
  • 송금인지, 보안 때문이지를 구체적으로 물어봐야 한다.
  • 회사에 오면 폰이 자동으로 진동모드로 바뀌었으면 좋겠다.”
    • 상황
      • 제스처는 회사에 오면 어떤 행동을 해야 한다.
• 키를 가지고 차 근처로 가면 저절로 문이 열리고 차에서 멀어지면 저절로 문이 잠근다 => 사용자가 의도가 명확(제스처)
• 마트에서 장바구니에 물건을 넣으면 저절로 결제가 된다
  • 제스처
    • 의자가 너무 낮아서 높이를 조절하고 싶어 손으로 더듬거리는데 조절하는 장치를 못 찾겠다 => 지각
• 리클라이너 앉아서 등받이는 눕히고 싶은데 버튼이 멀리 있어서 손이 안 닿는다 => 액션
  • PUI는 지각과 액션이 크다
• 해외계정으로 우버 앱을 사용해 봤는데 화면 흐름이 몬가 어색하다
  • 기억(우리나라 기억과 맞지 않는다)
• 오타가 난다.
  • 액션
    • 교통터치터치해서 만들어주더라
  • 추천
    • 상황에 맞게
    • 디자인이 별로 맘에 안 듦

---

유저 리서치

일단 어렴풋한 UX, UI 디자인이 무엇인지에 대한 개괄적인 내용이 끝난 후 역시나 팀을 만들어서 기존에 서비스에서 불편한 점 및 개선점을 찾아서 유저 리서치를 해보는 실습을 하였다.

 

우리 팀은 넷플릭스에서 불편한 지점을 찾아서 하기로 했다.

그냥 OTT 업계에 조금 몸담았기 때문에 진행하기로 한 것이고 특별한 이유는 없었다.

 

타깃을 정의

• 문제가 무얼까?
  • 타깃의 공통으로 동의를 하고 중요한 시급한 문제에 집중
  • 이미 쓰고 있는 고객 : 일반고객
  • 구독형, 잘 쓰는 : 충성고객 => 좀만 더해도 잘 끌어올 수 있다.
  • 유사서비스를 사용하는 고객: 잠재고객
  • 일반고객, 잠재고객 => 니즈를 파악하기 더 어렵다.
• 페르 소나 정의 
  • 가상의 충성 고객 혹은 일반 고객을 정의한다.

 

그리고 발표를 진행했다.

 

이후 설문조사 및 고객 인터뷰를 준비하기 위해서 ChatGPT를 사용하기도 하고 아래처럼 산출물을 만들었다.

---

2.Figma를 통한 프로토 타입 만들기

 

사실 개발할 때 피그마를 통해서 직접 도형을 만들거나 UI 가이드를 만들어 보진 않았다.

하지만 피그마를  통해서 디자인 시스템이나  개발을 위해 디자이너가 만들어 놓은 가이드를 보고 개발을 진행해 본 기억이 있다.

 

교육은 피그마를 통해서 툴을 익히고 위에 액션을 입혀서 UX 동선을 진행하는 것 정도 배운 거 같다.

 

• 멋사 홈페이지에 이벤트를 입혀서 이동하는 실습 진행

피그마로 Flow 이동

 

정보구조도 

 

정보 구조도는 이름은 애매 하지만  앱 혹은 웹 페이지에서 해당 기능의 라벨의 하이라키를 정의해서 문서화하는 작업이다.

보통은 메뉴에서 클릭할 때 depth 등을 정의하고 해당 depth에서 다음 depth으로 이동하는 식이다.

카카오톡 정보구주도 실습

 

---

3.UT 테스트

• UT를 하는 이유
  • 감이 아니라 근거를 기반으로 의사결정을 하기 위해서

• 참가진행
  • 진행자(Moderator)
  • Note taker(기록자)
  • Supporter(지원): 빼먹거나, 시간 진행자 보조
  • Prototype=> 참여자가테스트
• Task 2개를 만들어 진행
  • 프로토 타입 만들어서
  • 물흐릇이 자연스럽게 성공해야 합니다.
  • 추가질문도 중요
  • 퍼소나입 시나리오를 쓴다
  • 스크립트
• 진행자 1명(동일하게 해야 한다)
  • 상세 스케줄
    • UT 목적 설정 ->맞게 프로토타입을 만든다
    • 실험 진행으로 위한 미션 설정
    • . 프로토 타입 제작
    • 내부 테스트
    • 시나리오 작성
    • 참여자 미션 수행
    • 미션 결과 분석

넷플릭스 UT 테스트(프로토타입)

 

UT 테스트 결과 도출

4. 브랜드 개론 

 브랜드 개론은 많은 시간을 할여하지 않아서 짧게 브랜드 네이밍을 어떻게 만드는지 상표 등록 시 될 수 있는 것 안 되는 것에 대해서 설명해주셨다.

브랜드란?

•  브랜드란?
  • 연주, 사람은 같으나 , 홍보 수단 디자인에 따라서 듣는 사람이 틀리게 듣는다.
  • 브랜드는 뇌에서 해석
  • 브랜드 네이밍
    • 네이밍에 띄어쓰기는 안 좋음
    • 외우고 쉽고 관리하게 쉬운 게 좋음
    • 법적으로 문제만 안되면 됨
    • 종이에 써놓고 봤을 때 읽을 수 있는지?
    • 누구나 똑같은 소리로 읽게 되는가?
    • 잘 들리는지
    • 용어의 현지화?->글로벌에서
• 머터리얼 디자인
  • https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

 

이밖에도 많은 내용을 배웠으나 결국 디자인은 사람과 상호 작용과 사용자 경험을 뇌에서 기억하게 해 줘서 물 흐르듯이 사용성을 증가시키는 것이라고 생각했다.

 

아쉬운 점은 시간이 좀 촉박하였고 짧은 시간 내에 실습을 하고 중간중간 다른 수업과 겹치면서 연속성이 좀 저해가 된 것이 좀 아쉬웠다.

 

---

숏폼플레이 다운로드 부탁드려요 ^^