TIL 19일차

TIL (Today I learned)

 

 오늘 나는 무엇을 했나요

 

- 카타 (UI 컴포넌트)

- UX 기획 및 리서치 강의

 

- 팀프로젝트 피드백 디벨롭 정리

 

- 개인과제 피드백 디벨롭 정리

 

 

오늘은 어떤 것을 배웠나요

1.카타 (UI 컴포넌트)

오늘 새로운 카타를 시작하였다.

UI 컴포넌트가 무엇인지 왜 사용하는지 어떤것이 있는지를 리서치 및 분석하는 카타이다.

나는 UI 컴포넌트중 입력필드의 리서치를 맡았다.

 

입력필드는 그냥 말그대로 사용자가 UI에 텍스트를 입력 할 수 있는 UI이다. 실무 또는 실제 서비스에서 사용되는것들로는 조사한바로는 로그인&비밀번호 필드, 이메일필드, 전화번호 필드, 검색필드, 주소창필드, 신고필드, 요청사항 필드, 쿠폰번호 필드, 회원가입 필드, 송금금액필드,프로필수정필드 등 다양했다.

 

일단 오늘은 실무에서 사용하는 입력필드들의 종류들을 조사했고 이것을 참고해서 내일 그 대표적인 형태 이미지 및

입력필드의 역할 정의및 Do& Don't을 조사할것이다.

 

 

 

2.UX 기획 및 리서치 강의

 

UXUI개념

 

먼저 UI는 사용자 인터페이스이다. UI는 이전까지 했었던 팀 프로젝트와 개인과제에서 접해보아서 익숙했다.

UI는 컬러, 타이포그래피,그리드,컴포넌트등 유저가 서비스를 사용할때 보게되는 시각적 요소이고,

 

UX는 사용자 경험으로  IA, 와이어프레임,유저리서치,페르소나,프로토타입등 유저가 서비스를 사용하는 과정에서 얻는 모든 경험이다.

 

UI가 UX에 포함되있다는 시선도 있다고 한다.

하지만 나는 프로젝트에서 UI를 개선할때 UX가 자연스레 바뀌는것을 보면서 결국 UI와 UX는 서로에 안에 포함되있

다고 느끼고있다.

 

 

더블 다이아몬드 모형

 

출처 '[박주현 튜터님]의 [ [스파르타코딩클럽] UX 기획 및 리서치 - 1주차 ]']

 

 

더블 다이아몬드 모형은 사전캠프 아티클을 할때도 공부했었던 방법론중 하나이다.

UI개선 프로젝트를 하면서 가볍게나마 이와 똑같이는 아니더라도 비슷한 방식으로 진행을 했었다.

이것은 해결할문제찾기와 해결책 찾기로 단계가 나뉘어있는데, 이 단계는 고정이 아니고 계속 왔다갔다 할수있으며,

커다란 프로젝트에서는 한계가 있다.

 

더블 다이아몬드 모형은 4단계로 구성되어있다.

첫번째 문제찾기 단계의 발견단계에서 문제들을 발견한다음 정의단계에서 그문제들을 분석하고 우선순위를 정한다.

 

두번째 문제해결책 찾기 단계의 발전단계에서는 문제를 해결할 방법들을 의논하고 전달단계에서는 의논한 방법들을 구현해보고 개선을 거듭한다.

 

나의 생각으로는 두개의 다이아몬드중

첫번째 다이아몬드인 해결할 문제찾는 과정을 명확하고 구체적으로 잘 진행해야 두번째 다이아몬드를 효율적으로

할 수 있을것같다.

 

다음 더블 다이아몬드 모형의 4가지 핵심 원칙이다.

 

1.유저와 유저 니즈를 이해하는 것에서 시작하기

이것이 가장 중요하고 결국 이것을 이해하지못하면 아무것도 못할것이다

 

2.문제와 아이디어에 대해 구성인들과 얼라인하기

여기서 얼라인은 정렬을 맞추다라는 의미처럼 목표나 방향에 대해 일치시킨다라고 보면 된다.

목표나 방향이 일치하지않다면 결과가 결국 산으로 갈 수 있기 때문인것같다.

 

3.구성원들과 협업하고 공동 작업하기

이것은 나도 팀 프로젝트를 하면서 협업과 커뮤니케이션등을 통해 공동작업을 해야 서로의 의견을 보충해주고 피드백을 받으면서 더 효율적으로 할수있었다.

 

4.이터레이션을 통해 에러와 리스크 일찍 발견하기

여기서 이터레이션은 프로젝트를 진행할 때 짧은 개발 주기를 반복하며 고객의 평가와 요구를 수용하는 방법이다. 이를 통해 에러,리스크를 일찍 발견을 해야 나중에 발견 되고 나서 고칠일이 없어질것이다.

 

Lean UX

 

LeanUX는 유저로부터 나오는 피드백을 데이터로 측정하고 그것을 학습하여 디자인과 기능을 다시 개선 구현하는 과정을 반복적으로 거쳐 더 나은 유저 경험을 제공하는 프로세스이다.

 

이것이 많이 사용되는 이유

1.클라우드 발전으로 실시간 협업 활발

2.수많은 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이

3.현대의 치열한 시장 경쟁에서 살아남기 적합

 

예시로는 우리가 잘 아는 레고 회사가 있다.

 

레고는 과도한 문서와 상급자의 컨펌까지 기나긴 시간이 걸려 사용자들의 니즈 변화를 대응하기 어려워하였음.

레고는 상급자의 컨펌이 아닌 고객의 리얼보이스에서 발굴한 과제 별로 스크럼 팀을 형성해 주요 의사결정을 함께 진행함

이를 통해 빠른 시간안에 사용자들의 니즈 변화를 대응할수 있게 되었고, 비생산적인 관행은 중단되고 사용자를 위한 논의를 더 확대할 수 있게 되었음

 

 

MVP

이것은 Minimum Viable Product로 말그대로 최소 기능 제품이다.

최소한의 기능을 갖춘 제품 또는 서비스로 초기 아이디어나 가설을 검증하는 방법이다.

 

목적으로는 

초기 개발 비용과 시간을 절감

시장 반응을 빠르게 확인

실사용자의 피드백을 통해 핵심 기능 검증 정도가 있다.

 

 

 

예시

문제: 고객들이 세탁물을 맡기고 찾는 데 불편함과 시간을 많이 소모함.

솔루션: 간단한 세탁 픽업 및 배달 서비스 제공 앱.

 

먼저 가장 중요한 사용자가 세탁물 픽업 요청및 배달 서비스를 할 수 있는 기능을 만든다.

그후 얻은 피드백으로 세탁 품목별 옵션 추가, 정기 세탁 구독 기능 등 더 다양한 기능을 만든다

 

 

이러한 린UX와 MVP에는 오즈의 마법사와 페이크 도어 테스트등이 사용이 된다.

 

오즈의 마법사는 시스템 역할을 연구자가 실제로 하여 프로토타입 제작에 비용을 투자 하기전 사용자가 개발 예정인 제품이나 인터페이스를 이용하게 하는것이다.

 

Design Methodology | Wizard of OZ

 

 

 

페이크 도어 테스트는 아직 제품이 만들어지지 않았지만 제작하기전에 사람들이 회원가입을 하도록 유도하는 글등 다양한 항목들이 포함된 랜딩페이지를 만들어 검증하는 방식이다.

 

시제품 테스트 - 페이크 도어 테스트란? - IT Bite

 

 

데이터 드리븐 UX 트렌드

데이터 드리븐은 빠르게 변화하는 시장에서 효율적으로 제품을 개선할 수있다.

 

디자이너 관점

유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공할 수 있어요.

 

커뮤니케이션 관점

데이터는 타 조직과 원활한 의사소통을 돕는 공용어 역할을 해요.

 

비즈니스 관점

디자인 산출물이 비즈니스에 얼마나 기여하는 지 파악할 수 있어요.

 

지표예시

유저 관여도 관점 (Engagement)

얼마나 많이 이용하는가?

DAU, WAU, MAU 

하루 , 일주일, 한달 동안 서비스를 이용한 고유  유저 수를 볼수있다.

 

얼마나 자주 이용하는가?

DAU/MAU, DAU/WAU

월간 활성 유저중 하루에 서비스를 이용하는 유저의 비율

주간 활성 유저중 하루에 서비스를 이용하는 유저의 비율이다.

 

유저 재방문 관점 (Retention)

특정한 특성의 유저들이 재방문하는가?

코호트 리텐션

예시)

A나라에 여행을 간사람-> 오로지 공통된 특성,경험만 존재하므로 코호트가 아니다.

2025년도에 A나라에 여행을 간 사람-> 특정한 기간동안 공통된 특성이나 경험을 갖으므로 코호트다

 

 

N일째 된 유저들이 재방문하는가?

Day 0 : 가입한 날

Day N 리텐션

 

유저 획득 관점 (Acquisition)

얼마나 보는가? - 페이지 뷰 수, 클릭 뷰 수

얼마나 획득되는가? - 전환율, 이탈율

 

 

실무에서 많이 쓰이는 UX/UI 용어 메모장 ( 틈틈히 복습하기)

 

디자인 관련 용어

디자인 관련 용어

 

시각적 계층 구조 (Visual Hierarchy) 

중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것

 

와이어프레임 (Wireframe)

화면의 인터페이스를 단순한 선과 도형으로 표현한 것

 

프로토타입 (Prototype)

제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델

 

정보 구조도 (Information Architecture; IA)

제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할 수 있도록 돕는 과정

 

피델리티 (Fidelity)

디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은 피델리티, Hi-fi는 높은 피델리티를 가짐

 

CTA (Call To Action)

사용자에게 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트

 

모크업 (Mockup)

정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형

 

시각적 계층 구조 (Visual Hierarchy)

중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것

 

인지 심리 관련 용어

인지 심리 관련 용어

 

인지 부하 (Cognitive Load)

정보를 이해하고 처리하는 데 필요한 정신적 노력의 양

 

멘탈 모델 (Mental Model) 

유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념

 

어포던스 (Affordance)

디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리

 

게슈탈트 원리 (Gestalt Principles) 

사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론

유사성, 근접성, 연속성, 폐쇄성 등이 해당됨

 

힉의 법칙 (Hick’s Law) 

선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리

 

피츠의 법칙 (Fitts’ Law) 

대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리

 

제이콥의 법칙 (Jacob’s Law)

유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

 

개발 관련 용어

개발 관련 용어

 

서버 (Server)

정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공함

 

클라이언트 (Client)

서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분을 가리킴

 

접근성 (Accessibility)

모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것을 의미함

 

API (Application Programming Interface)

서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래밍 규칙과 도구의 집합

 

CMS (Content Management System)

웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼

 

오픈 소스 (Open Source)

소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식

 

디버깅 (Debugging)

소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정

 

 

 

3.팀 프로젝트 피드백 디벨롭 정리

저번주차에 했던 팀 프로젝트 발표에서 튜터님이 해주신 피드백을 토대로 디벨롭한것을 정리해보았다.

 

튜터님은 재고찾기에 대한 전반적인 솔루션중 하나인 즐겨찾기에 대해서 이 즐겨찾기의 중요도가 생각한것보다 조금 더 강조되는 형식으로 솔루션이 도출되셨다고 말씀해주셧다.

 

이 페이지에서 가장 중요한것은 사용자니즈에 연결하면 재고 수량 체크가 가장 중요한 정보이고 이것이 우선순위가 높다고 판단을 하였기 때문에 이것과 즐겨찾기의 중요도를 고려하여 톤앤매너를 조정해주는게 좋다고 해주셨다

 

피드백을 받고 개선해보았다.

개선사항

즐겨찾기 버튼을 없앴다.

 

 

근거

1.매장클릭할때 나오는 매장상세에 이미 즐겨찾기 버튼이 있기 때문에 한번더 노출시킬 필요가없음

2.사람들에게 재고찾기에 들어왔을때 첫번째로 보는정보가 재고여야 하는데 즐겨찾기에 시선이 갈 수 있는 문제가 생길 수 있음

3.노출 시켰을때는 기존UI보다 복잡함

4.재고보다 즐겨찾기가 중요성이 높은것처럼 보임

 

즐겨찾기버튼을 없애니깐 UI가 더 심플해지고 사용자에게 즐겨찾기로 시선분산이 되는걸 막고 바로 재고에 눈이 갈 가능성이 높아졌다.

 

 

 

 

4.개인과제 피드백 디벨롭 정리

저저번주차에 했던 개인과제에서 튜터님이 해주신 피드백을 토대로 디벨롭한것을 정리해보았다.

 

1번째 피드백

 

 

튜터님의 피드백대로 프레임을 확인해보니 스타일 적용이 누락된 부분이 있었다. 앞으로 스타일이 모두 적용되었는지 체크하는 습관을 들여야겠다.

 

 

 

앞으로는 계속 체크하는 습관을 들이면서 이중으로 플러그인을 적극 사용하여 누락된 부분이 안나오도록 해야겠다.

 

 

2번째 피드백

 

 

튜터님의 말씀대로 UI위치를 이동시키는것말고 따로 활성화된 UI와 비활성화된UI를 컴포넌트셋하여 이것을 인스턴스로 가져온것들을 컴포넌트후 네스티브인스턴스를 적용하여 다시 수정하였더니 훨신 자연스러웠다.

 

 

 

 

3번째 피드백

버튼 컴포넌트등 여러가지 만들면서 정작 간격 및 그리드를 신경을 덜 쓴게 보였다. 앞으로는 컴포넌트를 만들면서 그리드및 간격에 맞게 더욱 신경을 써야겠다.

 

 

 

 

 

오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

오늘부터 UX기획 및 리서치 강의와 UI컴포넌트 카타를 시작하였는데, 강의는 쉽지않고 UI컴포넌트 리서치단계도 시간이 조금 필요할것같은 기분이 들었다. 또한 실무에서 사용하는UXUI 용어도 꽤 많았다

일단 강의를 빠르게 이번주안에 n회차를 들으면서 모르는 것은 계속 복습하면서

UI컴포넌트는 3일동안 리서치단계이므로 일단 최대한 구체적으로 조사해봐야겠다.

실무에서 사용하는 용어들은 틈틈히 보면서 공부해야겠다.