003. 디자인씽킹 활용 프로젝트 준비

📍 24.04.23(금) : UI 설계

📍 24.04.29(월) ~ 24.05.02(목)

📍 24.04.26(금) 23일차

UX : 기획

UI : 디자이너

사용자가 사이트를 접속했을 때 느낀 것이 UX 부분

 

https://modulabs.co.kr/blog/uxui-design/

UX/UI 디자인 정의, 특징, 차이점 완벽하게 파악해봅시다

 

사이트를 사용하는 사용자들을 구체적으로 타겟화 해야 된다

ex) 요리 - 1인 
         - 초보자
         - 20~40대

 

UI 디자인 문서

상세 문서가 필요한 이유 : 이해 관계자(협업자) 간의 커뮤니케이션 도구

 

디자인 가이드라인 작성법(기획서)

사용자 중심으로 작성

추후 면접 때 프로젝트를 하면서 어떤 것을 중심적으로 했냐 할 때 사용자 입장으로써 만들었다 !

 

text < 이미지 < 짧은 동영상

모두 섞으면 더 좋음

 

기획					개발
아이디어 발견	리서치	전략	와이어 프레임	GUI 디자인	가이드 라인 작성	프론트/ 백엔드	디버깅	테스트	출시

 

벤치마킹 참고 사이트

https://pixlr.com/kr/

무료 온라인 AI 사진 편집기, 이미지 생성기 및 디자인 도구

https://www.autodraw.com/

AutoDraw

https://unsplash.com/ko

아름다운 무료 이미지 및 사진 | Unsplash

 

UI 설계 도구

와이어 프레임 - 피그마 사용

 

 

프로토타입 - 피그마 사용

스토리 보드

1) url

2) 기능 번호

3) 기능 설명 (개발자가 보는 부분)

기술서 쓸 때
어떤 기술로 ~ 해서 ~ 구현 했다 정도만 씀
구체적 x


우리가 할 것 (p.27)
1. 주제 정하기 
2. 벤치마킹 
최소 5개
3. 정보 구조도(IA) 만들기 (생략 가능/보통 생각하면서 정리할 때 놓친 부분이나 아이디어 생각나 추천)
ex) 만들어진 데이터, 메뉴(네비바)
4. 화면 아이디 부여


뎁스 (p.30) 문서 만들어 놓는 게 제일 베스트

사용자가 들어갔을 때 클릭하여 들어가는 경로
깊지 않도록 함
요즘 2~3 뎁스에서 끝남 
요즘 사용자들은 체류 시간이 짧아 체류 시간을 길게 해주면 좋음
ex) 나이키
우먼 - 의류(러닝) : 2뎁스


웹 화면 구성 (p.31)

대표적인 3가지 타입
헤더(header)와 푸터(footer)에 무엇을 넣을지 생각
네비바/네이게이션(navigation) : 용도/설계에 따라 2개가 될 수도 있음 ex) https://www.python.org/

웹 화면 구성(3) (p.33)

CI : 로고

<네이버 기준으로 설명>
좌측에 두는 이유 : 규모가 있는 사이트들은 (웬만한 사이트)
사용자가 접속할 때 사람들이 얼마나 체류했고, 마우스 클릭, 스크롤  즉 사용자 패턴들을 파악하기 위해 
(무의식적으로) 사용자들이 웹페이지에서 시선이 어떻게 머물고 하는지 분석한 결과 좌측 상단에서 우측 하단쪽으로 대각선으로 떨어짐, 그래서 회사에서 강조하고 싶은 것을 좌측 상단에 로고를 넣음
그래서 메뉴도 같이 넣어줌 (햄버거 메뉴 ☰ )

사각 지대 부분에는 의식할만한 기능을 넣음 - 로그인 부분
그래서 로그인 아래 부분에는 광고가 있는 경우가 있음

이제는 사용자들이 데이터(경험치)가 쌓여 이제 사각 지대 부분도 보게 됨

사용자 패턴대로 웹 구성을 할 것

GNB : 제공하는 정보가 많기 때문에 메뉴가 나뉘어짐, 전체 페이지에 관련 네비바 라고 생각할 것 ex) https://www.python.org/

Welcome to Python.org

 

Branding Area : 시선이 걸쳐 가는 곳 

사용자에게 보여주고 싶은 부분

광고 , 회사의 이미지 부분 등등

 

title 과 Quick Menu 는 요즘 잘안넣음

 

3 :2 로 되어있음

 

스토리 보드

개정 이력 써야함 (p.36)

p. 36

 

프로젝트할 때 코딩 컨벤션 정할 것 (참고자료 NHN 보기)

문서 버전 관리 필수

 

 

 

 

필수는 아니지만 하는 것을 추천

 

사용 주체 : 직원이 쓰는지 사용자가 쓰는지 임원이 쓰는 지 등등

 

 

 

 

 

 

 

 

디자인 시스템 (규모가 있는 회사에서 진행함)

폰트, 폰트의 크기, 아이콘의 크기, 사용할 색상 미리 정해둘 것

 

사용할 색상은 8~10개 정도의 색상을 미리 제한해둠

 

 

페르소나 (가상 인물)

사이트를 사용자를 가상 인물이지만 실제 인물처럼 만들어 사용자가 사이트를 사용할 때 

어떤 부분이 불편하고, 어디 부분을 못찾았는지 등등

 

많이 만들지는 않지만 몇개 만들어둠

 

 

시스템 구조

<DB 기준>

검색, 읽기 : (실선)
쓰기 수정 삭제 : 변경 (점선)

 

유스케이스 다이어그램

사용자 상황 그림

 

 

일반화 빈 화살표는 상속 관계를 나타냄

액터와 유스케이스는 연결될 수 없음