[코드잇] 코드잇과 함께 공부 습관 기르기

코드잇과 함께 성장해요!

짬짬히 공부하는 습관을 들이기 위해 코드잇의 연속 출석 기능을 활용해 공부하고, 일지를 남기고자 합니다. 프론트엔드 개발자라면 UI 역량은 꼭 있어야 한다고 생각해 UI 디자인 공부를 지금부터 시작합니다! (디자이너+개발자=디발자?)

9월 14일(목)

UI 디자인 원칙

UI 디자인 원칙을 따라라!
디자인 감각이 없어도 훌륭한 디자인을 만들 수 있다!
그러나 디자인 원칙은 각자마다 다름
코드잇에서는 처음 배우면서 알기 좋은 것들로 선정
디자이너의 눈을 길러라!

왜 Figma를 쓸까

통계 상으로 가장 많이 씀 (21년 기준 67%)
웹 환경에서 작동
엄청 많은 기능, 플러그인

작업 환경도 쉽게 구성했다 😎

9월 15일(금)

기본 기능

툴은 적지만 사용 방법은 무궁무진
단축키가 정말 많다!!! 사용하면서 익혀야할듯, 넘 소중해
포토샵과 파워포인트랑 비슷한 게 많아 뭔가 익숙하다
도형 채우기 옵션으로 이미지 넣기 가능
unsplash -> 무료로 좋은 이미지들 사용 가능

9월 16일(토)

레이어

레이어는 마치 투명한 필름과 같다
왼쪽에 있는 레이어 패널
포토샵이랑 똑같아서 금방 익혔다

그룹과 프레임

디자인을 하다보면 레이어가 엄청나게 많아진다
여러 레이어들을 그룹과 프레임으로 묶어서 관리

그룹

내부 요소의 크기에 따라 그룹의 크기가 결정됨
요소들을 간단하게 묶어서 관리하고 싶을 때 사용

프레임

그룹이 요소들을 담은 주머니 정도라면 프레임은 액자라고 볼 수 있다
크기가 정해져있음
요소들이 변하더라도 프레임의 크기는 영향을 받지 않음
요소들이 특정 면에 붙어있게 할 수 있음
버튼, 내부에 있는 요소만 보여야 하는 캔버스 등에 사용
Clip content -> 프레임 바깥의 요소들은 잘리게 함

안내선

요소들을 어떻게 배치할지 쉽게 설계 가능
안내선을 만들기 위해서는 Ruler 활성화 (Shift+R)
프레임 안쪽으로 안내선을 끌어놓으면 프레임 안에서 고정됨
안내선이 없는 작업물을 보고 싶을 때는 Ruler 비활성화

바로 배운대로 실습까지 해봤다 🔥

9월 17일(일)

좋은 UI 디자인

요소마다 일관성 있는 스타일을 부여해야 한다
사용자가 어디에 집중해야 할지 시각적으로 알려줘야 한다

UI 디자인 원칙

같아야 하는 걸 잘 보여주면 일관성, 달라야 하는 걸 잘 보여주면 위계

일관성

공통적으로 적용될 수 있는 규칙을 만들기
인터페이스를 시각적으로 정돈
예측 가능하게 만들기
유사성의 원리를 적용하여 직관적으로 알 수 있는 사용법 만들기

위계

중요한 내용과 그렇지 않은 내용을 드러내 인터페이스를 더 이해하기 쉽게 만들기
색이나 거리, 크기 등을 조정해 위계를 만듦
근접성의 원리를 적용하여 영역을 분리
공통 영역의 원리를 이용하여 요소들을 더 분명하게 분리
특정 문화권을 제외하고는 좌에서 우로 시선이 흐름
따라서 좌측 상단이 가장 강한 위계를 가진다!!
색깔, 위치에 따라 위계의 강/약이 조절됨

스타일

반복적인 걸 재사용 할 수 있는 디자인

Color 속성에서 Styles 버튼을 누르면 스타일 생성
색 뿐만 아니라 텍스트, 효과, 그리드에 대해서도 스타일 생성 가능

셀렉션 컬러

요소가 많아질수록 색을 일일히 바꾸는 건 어려워짐
색을 한번에 쉽게 바꾸기 위한 기능
쭉 드래그 해서 오른쪽의 패널에서 바꿔주기

컴포넌트

재사용 할 수 있는 UI들의 묶음
cmd + option + K
컴포넌트를 복사하면 인스턴스 (빈 다이아몬드 모양)
컴포넌트 속성 바뀌면 인스턴스도 바뀜
서식 복사 -> cmd + opt + c -> 도형 안에 사진 붙여넣기

컴포넌트 네스팅

특정 컴포넌트의 인스턴스를 또 다른 컴포넌트에 넣는 것을 말함
컴포넌트 여러 개를 따로 만들어서 관리하지 않고 따로 일부분만 교체할 때
Swap Instance -> 이 기능을 사용할 수 있음

스마트 셀렉션

두 요소의 위치를 바꾸는 식의 기능
요소들을 드래그하고 중심점을 잡아 드래그!
요소 옆의 핑크색 선을 클릭하면 여백을 변경 가능
디자인 속성에서도 여백을 수치로 변경 가능
Tidy Up -> 드래그하고 오른쪽 아래 아이콘을 클릭하는 것 만으로도 자동 정렬

오토 레이아웃

자동으로 배치, 프레임에 넣어짐
요소 간 간격이 자동으로 고정
수치 몇 번 입력으로 빠르게 디자인 완성!
Hug -> 프레임의 너비/높이가 요소들에 따라 유동적으로 변하는 상태

컨스트레인트

프레임의 크기가 변했을 때 안에 있는 요소는 어떻게 변해야 하는지 정하는 규칙
속성 탭에서 클릭만 해줘도 바로 위치가 고정됨
반응형 웹 디자인에 유용!!

학습 끝!

이렇게 해서 4일에 걸쳐 UI 디자인을 공부해봤습니다. 처음 쓰는 툴이라서 낯설기도 하고 어려워서 조금 고생했네요 😅 그래도 이제 어느정도 디자인하는 감을 잡아서 혼자 토이 프로젝트를 할 때도 유용하게 쓸 수 있을 거 같아요!