코드잇과 함께 성장해요!

짬짬히 공부하는 습관을 들이기 위해 코드잇의 연속 출석 기능을 활용해 공부하고, 일지를 남기고자 합니다.
프론트엔드 개발자라면 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 디자인을 공부해봤습니다.
처음 쓰는 툴이라서 낯설기도 하고 어려워서 조금 고생했네요 😅
그래도 이제 어느정도 디자인하는 감을 잡아서 혼자 토이 프로젝트를 할 때도 유용하게 쓸 수 있을 거 같아요!