UIUX 스터디 4주차 학습일지 01 : 바이널씨 특강 - 10

피그마에서 에셋 내보내는 법

 

1) 소문자 사용하기

2) 첫글자 숫자 금지

3) 띄어쓰기 금지

4) 축약하기

Button -> btn

Image -> img

Icon -> ic

5) 규칙 만들기 (유형+이름_숫자 등)

ic-favorite-24.png

btn-go-hover.png

 

피그마 퍼블리싱하기

 

책 모양의 아이콘을 누르면 퍼블리시가 가능

---

바이널씨 특강 내용 복기

사용자 여정지도를 만들 때 주목해야할 사항

각 단계에서 캐치업할 수 있는 니즈나 감정, 불편사항 등을 정리해야 함. 실무에서 잘 사용되는 프레임워크.

AS-IS 문제점을 발견하는 것이 중요하다.

 

 

레퍼런스 분석은 왜 해야하는지

해당 카테고리의 다양한 플랫폼을 분석해서 해당 업계의 플랫폼이 구동되는 바운더리를 인지해야 어떻게 개선해야 좋을지에 대한 아이디어를 잡을 수 있다.

 

레퍼런스 분석의 목적은?

디자인 트렌드를 파악하는 것. 다양한 웹사이트나 앱을 분석하며 현재 디자인 트렌드를 이해한다. 이를 참고해서 새로운 디자인에 적용하기 위해.

 

사용자 경험평가에 중점을 둬서 분석할 필요가 있다. 다른 제품이나 서비스의 사용자경험을 분석해서 어떤 디자인 요소가 사용자에게 긍정적인 영향을 끼치고 어떤 부분이 개선이 필요한지 느껴야 한다.

 

경쟁분석이 필요함. 경쟁사의 제품이나 서비스를 분석하며 자사 제품이나 서비스가 어떻게 차별화될 수 있을지 생각해보아야 한다. 어떻게 우위를 확보할 수 있을지 파악해야 함.

 

사용자 인터페이스 설계에 참고하기. 어떤 디자인 패턴이나 구성 요소가 효과적으로 사용되고 있는지 파악한다. 자신의 프로젝트에 이용하기.

 

문제점 발견 & 회피. 다른 제품의 디자인에서 발생한 문제점, 내가 개선하고자 하는 디자인에서 회피하는 데 활용. 사용자가 선호하는 디자인 요소를 이해하고 높은 품질의 사용자 경험을 제공하도록 참고할 수 있다.

 

> 해당 업계의 디자인 결 파악 및 내 프로젝트에 그대로 사용하거나, 강점으로 차별화할 수 있는 요소로 이용하고 생각하는 연습 해보기 위해

 

사용자 인터페이스 개선을 위한 체계적인 계획 세우기

1. 유저 리서치를 통해 달성할 목표를 우선 설정해야 함.

2. 대상 사용자 그룹 정하기 (MZ세대, 잘파세대 등)

3. 리서치 방법 선정하기 (어떤 유형의 리서치를 실행할 것인지, 언터뷰, 설문조사, 사용자 테스트 등 > 인사이트 추출)

4. 일정 계획

5. 리서치 도구 및 자원 확보 (인터뷰를 위한 가 이드라인 작성, 어떤 설문 도구를 사용할건지, 사용자 테스트를 위한 플랫폼은 어떤걸 할건지, 참여자 모집, 연락 협력 요청)

6. 데이터 수집 (인터뷰, 관찰, 설문조사, 사용자 테스트 등)

7. 데이터 분석 (인사이트 도출)

8. 유저 리서치 결과 문서화 및 시각화, 이해관계자에게 공유

9. 구집된 정보로 디자인을 개선

10. 다시 사용자 테스트 및 고도화

 

커머스의 주된 UI요소

메인, 리스트, 상세, 장바구니, 주문결제

 

> 여러 서비스를 분석해보고 어떤게 좋고 어떤게 나쁜지 분석해보는 연습이 중요하다

 

AS-IS란?

• 특정 앱 또는 서비스의 현재 상태 설명 (어떤 부분을 개선해야하는지 식별할 수 있어야 함)
• 기능 및 모듈 (로그인, 회원가입, 메인화면, 설정 등의 기능이나 모듈을 나열)
• 사용자 인터페이스 설명 (각 화면 레이아웃, 색상, 아이콘, 버튼 등의 디자인 요소 분석)
• 사용자 경험 (특정 기능이나 작업 수행 시의 흐름, 피드백 등을 기록)
• 성능 및 안정성 (로딩 시간, 응답 시간, 오류 발생 빈도 등)
• 현재의 강점과 약점 (어떤 부분에서 사용자들이 만족하고, 개선이 필요한지 기입)
• 사용자 통계 및 데이터 (활성 사용자수, 이탈률, 특정 기능, 사용 빈도 등)
• 피드백과 발생한 문제점 (사용자들로부터 수집한 직접적인 의견, 앱스토어 평가 참고, 유저 보이스 참고)
• 경쟁 서비스 분석 (유사한 앱이나 경쟁 서비스에 대한 간단한 분석)

---

Adobe XD 스터디

색상 기본 정보

RGB값 (빨강, 파랑, 초록)

0,0,0 > 검정색

255, 255, 255 > 흰색

255, 0, 0 >빨간색

 

Hex값 (6자리, 각 두자리 별로 빨강, 파랑, 초록을 의미 / A~F, 0~9의 조합)

빨간색 ff0000

초록색 00ff00

파란색 0000ff