[내일배움캠프 10일차(3)] UI 디자인의 모든 것 수강

오늘 드디어 과제가 주어졌는데요,,

진짜 허거덩스,,

이거 언제 다함요ㅜㅜ 저 숙제도 벅찬데요ㅜㅜ

오늘 하루종일 했는데도 숙제 못했습니다요,,

주말안에는 꼭 하겠슴다,,

지금은 너무 힘드러,,

 

 

 

 

<UI 디자인의 모든 것 1-4>

수업 목표

1️⃣ UI 디자인을 분석하여 반복되는 요소를 찾을 수 있다.

2️⃣ 컴포넌트 범위를 이해하고 설계할 수 있다.

3️⃣ 스타일을 적용하여 컴포넌트를 정의할 수 있다. 

 

 

 

 

반복되는 UI 디자인 분석

공통 UI 요소 찾아보기

1️⃣ 기본 요소(Item)

가장 작은 요소의 컴포넌트

칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등이 있다.

 

2️⃣ 조합 요소(Module)

기본 요소 + 기본 요소, 기본 요소 + 조합 요소

카드(이미지+텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트+버튼) 등이 있다.

 

3️⃣ 섹션(Section)

조합 요소 + 조합 요소 + 여백(마진, 패딩)

네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등이 있다.

 

4️⃣ 개발자 모드에서 분석하기

(1) 안드로이드 개발자 모드

설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드 정보 - 7번 클릭 > pin번호 입력

설정 > 개발자 옵션 > 레이아웃 범위 표시

 

(2)web 개발자 모드

맥 : ⌥ Option + ⌘command + i

윈도우 : F12

 

 

 

 

컴포넌트 구성

1️⃣ 엘리먼트(Element)

더 이상 쪼개지지 않은 가장 작은 단위

컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등의 요소들이 엘리먼트에 속한다.

 

2️⃣ 컴포넌트(Component)

엘리먼트 + 엘리먼트를 조합하여 재사용이 가능한 블록의 형태인 컴포넌트를 만든다.

 

3️⃣ 합성 컴포넌트(Compound Component)

컴포넌트 + 컴포넌트를 조합하여 합성 컴포넌트를 만들 수 있다.

 

4️⃣ 페이지(Page)

합성 컴포넌트를 활용하여 UI 화면을 그려낼 수 있다.

 

컴포넌트는 작은 단위부터 점진적으로 큰 단위로 작업해 준다.

 

 

 

 

컴포넌트 네이밍

1️⃣ 영문 네이밍

아이콘과 컴포넌트 네이밍은 개발로 활용될 확률이 높기 때문에 영문으로 정의해 주시는 것이 좋다.

 

2️⃣ 사용 맥락에 따른 네이밍

 

3️⃣ Assets 패널 적용

Assets 패널은 파일의 구조를 반영하여 라이브러리 경로를 표시하고 있다.

파일 경로는 file > page > frame(section) 의 구조를 따르고 있다.

파일 경로의 각 단계는 Assets 패널의 제목을 나타낸다.

알파벳순으로 페이지를 표시하고 있다.

 

 

 

 

숙제

카드 컴포넌트 만들기

 

 

 

 

 

<UI 디자인의 모든 것 1-5>

수업 목표

1️⃣ UI 컴포넌트를 활용하여 화면 디자인을 설계할 수 있다.

2️⃣ 화면의 구조를 이해하고 클론 디자인을 할 수 있다.

 

 

 

 

UI 클론 디자인

UI 화면 구조

큰 블록(페이지) → 작은 블록(컴포넌트)

 

컴포넌트를 블록처럼 설계하면 확장성과 유지 보수가 용이해진다.

재사용성 : 같은 컴포넌트를 여러 곳에 활용할 수 있다.

유지 보수 용이 : 한번의 수정으로 전체 UI에 반영할 수 있다.

유연성 : 추가, 삭제 혹은 위치를 변경할 때, 레이아웃에 큰 변화 없이 유연하게 적용할 수 있다.

 

 

섹션을 조립해서 페이지를 만들 때 테트리스 블록처럼 빈틈없이 쌓아야 한다.

 

 

 

 

 

숙제

클론 디자인하기

 

정리를 안해서 지저분하지만 하고 있는 중임다,,

 

 

 

 

 

이번 주를 돌아보며,,

시간이 너무 빨리 가요,, 진도가 너무 빨라요,, 쏟아지는 실습에 과제까지 하루하루 너무 빨리 감ㅜㅜ 내가 제대로 하기는 하는건지 아직 모르겠다 정리하면서 해야하는데 바쁘니까 막 하게 되고 맘이 급하니까 하려던 것도 잘 안되는 것 같다,, 나 4개월 후에도 이러면 어쩌지..? 주말에도 계속 과제 해야할 것 같다 체력 많이 비축해두자,,