[+3] 컴포넌트와 UI 디자인

🚩오늘의 키워드

- 온보딩 강의 복습&수강(체계적으로 배우는 피그마 기초 완전 정복)

- 강의 내 개인 과제 진행

 

 

🤔TODAY I LEARNED

[ 체계적으로 배우는 피그마 기초 완전정복 - 3주차 ]

오늘은 피그마 기본 기능들을 토대로 조금 더 UI와 관련된 디자인 개념과 환경, 간단한 실습까지 진행 해 보았다.

 

① 파운데이션 : UI를 구성하는 가장 작은 알갱이이자 기초 재료.

     → 색상(Color), 서체(Font), 간격·여백(Spacing, Gap), 곡률(Radius), 그리드(Grid), 고도(Elevation)=높이, 아이콘(Icon) 으로 구성.

      → 컴포넌트 = 파운데이션 요소들의 조합(색상+곡률+서체+아이콘 · · · )

버튼은 컴포넌트, 구성 요소들은 파운데이션

 

 

② 컬러 스타일 : 디자인에서 사용할 색상을 모아두는 팔레트, 색상의 단계에 대한 규칙이 존재한다.

     → 기본적으로 2~3가지 색상(프라이머리=포인트, 세컨더리, 백그라운드)으로 만든다.

     → 정한 색상을 바탕으로 10단계로 컬러를 만든다.

     → 기본적인 색 배치는 1:3:6의 법칙을 사용한다. 

컬러스타일 / 1:3:6 법칙

컬러 스타일 만들어보기 [실습 진행]

1. 색상 피커에서 색상코드를 HSL로 변경한다.

2. 포인트 컬러 사각형의 L값을 확인한 후, L값을 기준으로 10씩 더하거나 뺀다.

3. 사각형 10개의 이름을 변경한다.

4. Styler 플러그인을 사용해 플러그인을 적용한다.

 

참고자료

https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

③ 폰트 스타일 : 디자인 시스템에서 사용할 폰트를 모아둔 목록.

     → 폰트 스케일( 일정한 규칙에 따라 정렬된 하나의 세트)과는 비슷한 듯 다르다.

     → 폰트 스타일은 총 5가지로 구성되어있다.

          ·  패밀리(Family =폰트의 종류)

          ·  굵기(Weight =무게감)

             글자가 얼마나 더 중요한지를 알려준다. 두꺼울 수록 더 먼저 중요하게 읽어야 한다!

             디자이너의 경우에는 Thin, Light 와 같이 굵기 명칭으로 부르는 것을 선호하지만, 개발자는 100, 200 등 굵기에 할당 된 명칭을 선호한다.

굵기에 할당 된 숫자

          ·  크기(Size)

             폰트의 크기를 뜻하며, 일반적으로 16px부터 2px 단위로 줄이거나 늘린다.

             10px 미만으로는 가독성이 떨어지기 때문에 사용하지 않는 것을 권장.

             폰트가 20px 이상일 경우는 미세한 차이로는 육안으로 구분이 어렵기 때문에 4px씩 차이나게 조정한다.

             일반적으로 20px미만인 폰트는 본문, 20px 이상은 제목에 사용한다.

       

          ·  행간(Line-height) : 폰트 자체가 가진 기본적인 여백

             서체마다 행간이 모두 다르기 때문에 폰트마다 다른 행간 조절이 필요하다.

             일반적인 행간 값은 굵고 큰 폰트(제목) 120~135%, 본문 135~170% 사이로 조정한다.

             예외로, 본문의 경우에는 150%가 가장 통용되는 행간 값.

             (폰트 사이즈가 16이라면, 행간은 150%(2로 나눈 값을 더한 값=100+100*1/2)=2배수, 16의 절반인 8px을 더한 값인 24px)

폰트마다 행간 값이 다른 예시

          ·  자간(Letter-spacing)

폰트 스타일 만들어보기 [실습 진행]

1. 텍스트 레이어를 생성하고 굵기, 사이즈, 행간을 맞게 조절한다.

2. 텍스트 레이어의 이름을 변경한다.

3. 텍스트 레이어를 모두 선택한뒤 플러그인을 적용한다.

 

 

🌟 ④ 마스터 컴포넌트 ❖ (=원본, 변하지 않음)

     → 디자인을 복사해서 사용할 수 있도록 해주며, 복사 된 디자인은 한 번에 수정·편집이 가능하다.

     → 마스터 컴포넌트( ❖ )를 복제하면 마스터 컴포넌트의 속성을 그대로 이어받는 인스턴스( ◇ ) =복제본 가 생긴다.

 

 

⑤ 마스터 컴포넌트와 인스턴스의 법칙

1. 마스터 컴포넌트를 수정하면 인스턴스에도 반영된다.

2. 인스턴스를 먼저 수정하면 마스터 컴포넌트를 수정해도 반영되지 않는다.

     → 인스턴스를 먼저 수정하는 것이 우선 적용. 즉, 오버라이드(덮어쓰기)가 되기 때문에 이럴 때는 오버라이드 한 속성을 삭제해야 적용됨.

3. 마스터 컴포넌트를 지워도 인스턴스는 남아있다.

4. 연결을 해제(Detach;디태치)하면 인스턴스는 마스터 컴포넌트와 분리되고, 일반 프레임으로 변경된다.

 

 

⑥ 디자인 시스템( Atomic Design System )을 쓰는 이유?

   → 반복적인 UI를 미리 만들어 효율적으로 관리하고 다른 팀원들(디자이너, 개발자) 등이 일관된 이해와 사용법을 지키며 만들 수 있기 때문.

   → UI키트(디자인의 나열) ≠ 디자인 시스템(나열&규칙)이지만 팀과 제품의 발전 단계와 규모, 단계에 따라 유연하게 선택하면 됨.

[참고하면 좋은 다른 회사의 디자인 시스템]

 

구글

Material Design

 

라인

LINE Design System for Messenger

 

밀리의 서재

millie Design Library 2.0

 

슬랙의 개발사인 세일즈 포스의 라이트닝 디자인 시스템

Lightning Design System

 

전세계 디자인 시스템 디렉토리

Design Systems Database & Gallery

 

 

⑦ UI 디자인 기본

· UI의 분류 - 6가지

액션(Action) - 사용자가 중요한 행동을 할 때 수행 ex) 버튼
인풋(Input) - 사용자의 입력을 받을 때 사용 ex) 셀렉트 박스
인포메이션(Information) - 사용자에게 서비스의 상태나 안내 사항을 전달 할 때 사용 ex) 토스트 메세지, 스낵바, 라벨(행동을 지시하는 글자)
컨테이너(Container) - 컴포넌트 여러개가 결합된 하나의 덩어리 ex) 카드, 바텀시트, 리스트
내비게이션(Navigation) - 사용자가 페이지를 이동할 때 사용 ex) 네비게이션 바, 앱 바, 하단 탭 바, 사이드 바
컨트롤(Control) - 사용자가 설정이나 값을 수정할 때 사용 ex) 라디오, 체크박스, 스위치

 

 

⑧ 의사 상태 : 컴포넌트의 가상의 상태를 표시

   → 버튼에 마우스를 올렸을 때 색이 바뀌는 것(마우스 오버), 눌림(Pressed), 비활성화(Disabled) 등.

   → 의사 상태를 적용할 때는, 구현할 개발자와 이야기를 나눠서 구현 여부를 논의하는 과정이 필수.

웹 디자인 시스템 - 버튼 컴포넌트 상태 (State)

 

 

[UI 만들기 실습]

 

버튼 컴포넌트 ( 컨테이너 + 라벨 + 리딩 엘리먼트 + 트레일링 엘리먼트 )

버튼 컴포넌트의 구조 / 실습 과제

 

텍스트 필드 컴포넌트 ( 인풋 컨테이너 + 라벨 + 텍스트 + 리딩 엘리먼트 + 트레일링 엘리먼트 + 헬퍼 텍스트 )

텍스트 필드 컴포넌트의 구조 / 실습 과제

 

체크박스 컴포넌트(컨트롤 컴포넌트) : 여러 선택지 중 1개 이상을 선택할 때 사용, 일반적으로 라벨과 함께 쓰임.

   → 특징은 여러개 선택 가능 / 아무것도 선택하지 않음 / 하위 항목 중 일부만 선택 가능 이 가능하다.

체크박스를 만들 때 24X24 프레임 안에 20X20 컨테이너를 제작하여 만든다.

 

라디오 컴포넌트(컨트롤 컴포넌트) : 여러 선택지 중 하나를 선택할 때 사용.

   →  특징은 여러개를 동시에 선택 할 수 없고, 아무것도 선택하지 않는게 불가능하다.

 

 

 

 

😭 오늘의 회고

평소 새벽 늦게 잠들고 점심즈음 깨는 루틴이라 아직 생활패턴 적응이 덜 되어 점심 먹고 나면 너무 졸려서, 강의 듣다 30분 정도는 존 것 같다..😟

오늘 강의에서는 이론 뿐만이 아니라 직접 만들어보고 적용하는 방법에 대해 배워서 조금 재미있었던 것 같다. 하지만 아직도 UXUI 관련 개념이나

강의를 들을 때마다 새롭게 나오는 디자인 용어들이 많이 헷갈린다. 내일은 정리를 한 번 해보는 걸로! 강의를 들으면서 해서 그런지 과제에서 나오는 실습 말고는 피그마 응용을 안하는 것 같다고 오늘 느꼈다. 강의를 빨리 끝내고 복습하면서 자주 쓰는 페이지라도 따라 만들어봐야하나?

 

내일은 튜터님과의 1on1을 진행한다는데, 낯도 많이 가리고 N년간 질문을 거의 안하고 살아온 나라 좀 어색하기도 하고… 아직까지 명확한 목표를 정했다거나 큰 궁금증이 없었어서 무슨 질문을 하지? (15분 너무 길다!) 너무 고민되는 하루가 될 것 같다.