☁️ [UXUI] 6DAY, UIUX 기초

✏️ 2024. 11월 12일 / UIUX 디자인 기초

👻 UXUI란?
✖️

UIUX는 사용자의 경험을 토대로 사용자를 중심으로한 디자인을 뜻하는데요.
여기서 UI는 다양한 디지털 기기의 화면을 구성하는 요소를 뜻합니다.

자, 그러면 웹디자인의 다양한 구성들을 나열해보겠습니다.
🔊 Layout (레이아웃) : 화면이 보여질 컨텐츠를 나열
🔊 wireframe(와이어프레임) :라인과 박스를 활용한 레이아웃을 그려내는 것
ㄴ 러프스케치 > 디지털 와이어프레임 > 반복 및 수정 (디자인 시스템 도입)
🔊 Grid system (그리드 시스템) : 화면을 4~16개의 열로 나누어 컨텐츠를 배치하는 가이드 라인
ㄴ 보통 PC는 12Column / tabler은 8Column / mobil은 4Column을 사용합니다.

🗨️ 용어 정리
- 메뉴버튼 = 햄버거 버튼

- header(헤더) : 로고를 포함한 가장 상당의 부분
- Main visual(메인비주얼) / 메인배너 : 가장 큰 이미지 영역
- aside(어사이드) : 어사이드 영역
- section(섹션) : 1 / 2 / 3 섹션으로 단락을 나누어 정하는 구역
- footer(풋터) : 홈페이지 최하단의 영역 (사이트 안의 모든 메뉴와 약관등 고정적 내용)
ㄴ 사용에 있어 크게 상관은 없지만 꼭 필요한 정보들
컨텐츠 영역 : 컨텐츠가 들어가는 영역
margin(마진) : 빈 영역 또는 공백
플러팅 바 : 스크롤 바 옆에 따라다니는 버튼들

- 홈페이지의 최상단으로 올리는 화살표는 '업 버튼'

- 크럼블 : 메뉴>회원가입>로그인, 처럼 사용자가 지나온 경로를 알려주는 용도
- gnb / 네비게이션 : 로고를 포함하고 있는 메뉴 (헤더에 포함)
ㄴ 가장 큰 메뉴 = 1차 메뉴 = 원덱스
ㄴ 1차 메뉴 = 원덱스의 소메뉴 = 2덱스 // 점차 늘리며 부른다
** 왼쪽에 있는 메뉴 박스 : LNB

✔️ 워크플로우 작성
로그인 과정에 대한 워크 플로우를 작성해보려고 합니다.
워크플로우를 작성하기 전 반드시 고려해야 할 사항은
사용자가 웹사이트 내 기능에 접근하여 행할 모든 동작들을 그려보는 일인데요.
워크플로우는 이런 머릿속에 그린것을 이미지화 하는 작업이라고 생각하시면 좋습니다.
이런 워크플로우를 작성하기전에는 [플로우 차트 도형 의미]를 확인하고 작성하시는 게 좋아요.

✨ New guide Layout (포토샵 활용)
포토샵에 있는 기능 중 하나인 New guide Layout을 사용하여 그리드 시스템을 만들어보려고 합니다.

우선 뉴 가이드 레이아웃을 눌러 옵션을 살펴봅시다.

저는 웹을 디자인 해볼 예정이기 때문에 표시된 옵션을 정해줄건데요.
pc 기준으로 12로 Columns를 정해준 뒤,
gutter은 20~40사이로 선택해주시면 되는데, 저는 20으로 선택해주겠습니다!
margin은 헤더의 가이드, 간격이라고 생각하시면 되는데
Top = 헤더이며 100으로 설정할 예정이고
bottom = 풋터이며 마찬가지로 100으로 설정할 예정입니다.
right / left는 양옆 간격이며 저는 각각 160으로 사용할 예정입니다.

자, 이제 초반에 그리드시스템에서 설명해드렸던 가이드라인이 생기게 됩니다.
이 가이드 라인에 맞춰 작업을 진행하면 됩니다!
** 아이콘의 경우 PC 기준 = 48px / 모바일 기준 = 48px 을 기본으로 합니다.
📌 가이드 라인 관련 단축키
- 100% 비율로 화면 보기 : Ctrl + Alt + 숫자 0
- 가이드 라인 숨기기 : Ctrl + ;
- 가이드 라인 고정 (이동 고정) : Ctrl + Alt + ;
- 10 픽셀 이동 (도형 등) : shift + 방향키

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)