오늘 목표
- 수업전 7시 기상 후 운동(O)
- 수업내용 정리 및 모르는 내용 복습(O)
- 프로그래머스 문제 풀기(O)
공부 내용
UX/UI
구글 사이트 => 직관적이고 목적이 분명한 사이트
UX:사용자 경험 UI: 사용자 인터페이스
UX/UI 배우는 이유
- 사용자에게 편리하고 유용한 환경을 제공하기 위해
- 단순한 서비스를 넘어 사업으로 문화로 확장하기 위해
CX(customer Experience)
고객 경험 디자인
UX/UI 공통점?
user를 통한 user를 중점으로
색상
- 우선 순위에 따른 컬러 표현
- 채도나 명도에 따라 강조할 부분에 사용해서 좀더 이목을 끌 수 있도록
- 상황에 따른 컬러 사용(성공, 경고, 에러)
- 유효성 검사 충족된 컬러 사용(접근성)
- 배경과 텍스트가 대비가 되어 사용자가 정보를 파악하는데 문제가 없는지 체크
색깔의 비율이 중요하다 같은 컬러 사용하더라도 달라보임.
- 배경과 텍스트가 대비가 되어 사용자가 정보를 파악하는데 문제가 없는지 체크
색의역할
1.브랜드 아이덴티티 각인
2. 마케팅 관점에서 클릭유도
3. 방향제시
색의역할 - 주색
브랜드 고유한 색깔 클릭유도 버튼에 사용
색의역할 - 보조색
주색과 비슷한 색깔에서 사용 UI에 사용됨
색의역할 - 중석색
흰색부터 검은색을 포함.
색의역할 - 시멘틱 컬러
성공,경고,에러,정보 4가지로 구성 목적전달
색의역할 - 확장팔레트
주색과 시멘틱컬러 결합하여 사용
모바일 구현할때 input 줄이기
레이아웃
근접성
연관성이 있는 요소는 다른 요소들보다 가깝게 배치
폐쇄성
여백과 간격으로 전체 모양을 디자인
전경과 배경
ex) 모달 띄울 시 뒤에 화면 흐리게
그리드 계산 사이트 : http://gridcalculator.dk/
1단 레이아웃
ex)유튜브,인스타그램 많은 텍스트 담을 수 있음
2단 레이아웃
ex) 네이버 이미지
3단 레이아웃
ex)웹툰 => 이미지 위주 (간단소개)
좁은 화면의 단점을 해결하는 레이아웃 =>가로 스크롤
ex) 슬라이더(??)
ux라이팅
의미없는 단어 및 문장은 빼고 간결하게 작성하기
모든이가 쉽게 이해할 수 있는 단어 및 문장 선택하기
사용성 좋은 UI/UX
정보를 모두 입력하면 다음단계로 자동으로 넘어가게 하기
input 필드를 focus시키기
사용자가 이전에 입력한 정보 미리 채우기
모바일의 경우 사용할 키보드 미리 세팅
=> 주민번호 입력이면 숫자 키패드 ,이름 입력이면 한글 키패드
로딩바 및 스켈레톤 페이지 사용
사용자가 기다릴 때 지루하지 않게 해줌
분석하기
유도한 곳으로 유입되고 있는가?
어떤 요청에 문제가 생기는가?
어떤 요청부터 개선해야 할까?
어떤 페이지를 개선해야 할까?
어떻게 하면 유저를 더오래 머물게 할수있을까?
원하는 행동을 하게 하려면 어떻게 해야 할까?
피그마
프레임
특정 화면 크기에 맞추어 디자인을 담는 공간
아토믹 디자인
컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론
아토믹 장점
- 디자인 시스템 구성에 있어서 가이드라인으로 활용할 수 있다.
- 애플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있고, 스타일 가이드와 같은 도구에서 볼 수 있다.
- 컴포넌트 재사용성이 극대화된다.
아토믹 단점
- 초기설계 오래걸림
- 구축이 느리다
와이어 프레임
하면 단위로 UI 설계 화면 간의 이동 동선까지 표현
와이어 프레임 작성의 핵심은 사용자의 흐름에 불편함이 없는지
그리고 개발할 서비스에 대한 구상을 구체화하고 팀원 및 이해 관계자의 오해를 줄이는 것에 중점을 두고 진행해야함.
잘 작성된 와이어프레임 그리기
- 핵심기능의 서비스 시나리오를 작성한다.
- 서비스 시나리오 기반으로 한 와이어프레임 초안 작성
- 화면 별 누락,추가,오류는 없는지 확인 및 체크하여 수정한다.
- 팀원들에게 보여주고 의견을 교환한다.
- 팀원들의 의견이 반영 된 와이어프레임 개선안을 작성
- 와이어프레임 기반으로 한 메뉴구조 및 화면을 작성한다.
