[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 4주차 - 개인

2024.11.13 ~ 11. 19(일곱 번째 일지)

 

SeSAC 동대문 캠퍼스

 

 

 

오전

피그마 실습 1

 

프로퍼티 (블린,인스턴스 스왑)

 

 

 

 

 

피그마 실습 2

 

버튼 컴포넌트 세트

 

 

 

피그마 실습 3

 

스타일 라이브러리

 

 

 

1. 오늘 어떤 것을 배웠나요? (핵심 내용 & 인사이트)

• 13일(수) - 프로퍼티(블린, 인스턴스 스왑)  &  15일(금) -  버튼 컴포넌트 세트

앞시간에 배운 마스터 컴포넌트(원본)와 인스턴스(복사본)를 이어서 간다. 

프로퍼티는 컴포넌트의 속성을 말한다. 컴포넌트에서 속성을 만들고 적용이 되는 건 인스턴스이다.

 

4가지 종류의 프로퍼티

 

만들어진 컴포넌트를 선택하고, 우측 패널을 보면 Add propertie가 있고 끝의 +를 눌러 4가지 프로퍼티 중에

골라서 적용시킬 수 있다.

 

베리언트

 

Variant(베리언트) 는 열의 선택이다. (좌표개념)

 

설정할 때 이름 바꾸기

 

컴포넌트를 선택한 상태에서 베리언트를 추가한다. Name에는 대분류로 강조(가로) / 상태(세로), 각 2개의 프로퍼티를 만든 후

컴포넌트 안의 버튼 개체를 선택하고 values의 default에 소분류 속성을 적어준다. 

ex) 강조(Primary) - 상태(Hover)

각 개체를 설정해놓은 상태

 

 

• 블린(Boolean) (뜻: 논리학에서 참(true)과 거짓(false)을 나타내는 데 사용)

 

온 앤 오프 같은 기능이다.

개체 안에 들어있는 로고나 글씨, 아이콘 등을 껐다 키는 것처럼 없앴다가 다시 나타낼 수 있다.

컴포넌트를 만들고, 블린을 추가한 다음 이름을 입력하고 create property를 눌러준다.

블린을 만들면 껐다 킬 개체와 연결시켜줘야한다.

안 그러면 만든 블린 옆에 느낌표와 컴포넌트와 연결되지 않았다고 문구가 떠있을 것이다.

컴포넌트 안에 블린을 적용시킬 개체를 선택한다.

* 이때 개체가 벡터로 선택이 되면 안 되고 레이어로 선택되어야 한다. 안 그러면 연결이 안 된다.

 

우측 패널의 Appearance 옆 눈동자 옆에 있는 육각형 아이콘을 눌러주면 블린 프로퍼티를 만들었던 것이 뜬다.

그걸 눌러주면 연결이 된다.

 

 

• 인스턴스 스왑(Instance swap) 

인스턴스를 다른 인스턴스로 바꿔주는 기능이다.

여러 개의 컴포넌트 아이콘들을 만들어 놓고 인스턴스 스왑으로 지정해 놓으면

그 아이콘들 안에서 각각 다른 아이콘으로 손쉽게 변경이 가능하다.

대신 아이콘들은 왼쪽 패널에서  '/' 를 붙여서 이름을 변경해 놔야 그룹핑이 돼서 인스턴스 스왑 만들기가 쉽다. (ex. 아이콘/쓰레기통, 아이콘/하트, 아이콘/돋보기, 아이콘/화살표)

* 아이콘 안의 구조가 동일해야 한다. 유니온 셀렉션으로 되어있어야 색상변경도 가능하다. 

 

컴포넌트를 선택하고 인스턴스 스왑을 추가한다.

Name에 항목 이름을 쓰고, Value를 눌러 현재 페이지 폴더에서 그룹핑해놓은 아이콘 폴더를 찾아 하나를 선택한다.

Preferred values learn more 옆 + 버튼을 누르고, 그룹 안에서 바꿀 아이콘들을 모두 선택한다. create property를 누른다.

연결이 안 되어있을 것이기 때문에, 컴포넌트 안에 적용시킬 개체를 선택하고 개체 이름 옆에 아이콘 5개가 있을 텐데 두 번째 아이콘(Add instance swap)을 누르면 그룹핑한 아이콘 목록이 나올 것이다. 그걸 눌러서 연결시켜 주면 된다.

 

 

* 컴포넌트 안에서 중복되는 아이콘을 모두 선택해서 적용시킬 경우,

아이콘 하나를 선택하고 이름 옆에 selecting matching layers라는 아이콘을 누르면 한꺼번에 선택된다.

 

 

시멘틱컬러(Sementic) : 의미론적, 특정한 색상을 지칭하는 것이 아닌, 사용 목적에 따라 색상의 이름을 부여하는 것

예를 들어 Blue500이라는 명칭 대신 Primary Color(주색), Secondary Color(보조색)같은 형식

 

 

 

• 18일(월) - 스타일 라이브러리

UI 디자인의 일관성 확보로 일관된 사용자 경험을 제공할 수 있고, 유지 보수가 용이하다.

스타일은 4가지 종류가 있는데 Text, Color, Effect, Grid이다.

그룹으로 따로 묶어서 사용하고 싶다면 이름을 쓸 때 /슬래시를 입력한다. (예: Layer/Primary color)

앞이 그룹명 뒤가 속한 이름이다.

 

- 컬러 스타일(900이 어둡고 0으로 갈수록 밝아진다.[구글 마테리얼 디자인])

- 텍스트 스타일 폰트 종류, 굵기, 사이즈, 자간, 행간 등의 정보가 스타일로 등록된다.

*정렬은 스타일에 포함되지 않는다!

- 그리드 스타일 화면의 그리드를 제작 시 유용하다.

- 이펙트 스타일 각종 쉐도우등 이펙트 효과도 등록이 가능하다.

 

[컬러 스타일의 경우]

추가할 색상 도형 누르고 fill 우측 네모 네 개 상자 누르기 > 라이브러리 패널 옆 + 버튼 누르기 >

스타일로 들어가서 네임과 디스크립션에 각각 이름과 설명 넣고 크리에이트 스타일 누르면 스타일 적용 완성!

아래 3가지 스타일들도 등록이 비슷하다.

 

2. 오늘 겪은 시행착오 / 어려운 점이 있었나요? 

• 13일(수) - 오토 레이아웃이 제일 어렵다고 생각했는데, 더 어려운 것이 나타났다. 프로퍼티 적용하는 것을 강사님이 세 번이나 설명해 주셨는데, 이해가 잘 안 됐다.  잘못 선택하는 바람에 따라 가는 것을 놓치기도 하고ㅎ.. 설명 들었을 때는 대충 뭔지 알 것 같은데? 그걸 예제로 만드려고 하니까 생각보다 잘 안됐다. 뭐가 하나 꼬이거나 연결이 안 되었다고 떴는데도 왜 이런 건지..? 모르겠고 프로퍼티 4가지가 제일 멘붕이었다. 
• 15일(금) - 전날 밤 프로퍼티 만드는 게 이해가 가지 않아 타 유튜버들의 영상을 찾아봤다. 그리고 예제를 다시 만들어 보려는데 계속 난관에 부딪쳤다. 새벽 1시까지 하다가 시간이 너무 늦어 결국 포기하고 잠들었는데, 이번 수업에 강사님이 한번 더 프로퍼티에 대해서 천천히 설명해 주시면서 같이 버튼 컴포넌트 세트를 만들었다. 어려웠던 것들을 다시 설명을 들으면서 따라 해보니 이해가 갔다. 나는 인스턴스 스왑을 어려워했던 것 같다. 유튜버들 영상에는 그냥 개체 하나만 만들어서 그걸 적용시켰는데 예제에서는 개체가 4개라 그랬던 것 같다. 
• 11일(월) - 스타일 라이브러리 만들기는 4주 차에서 배운 것들 중 비교적 수월하였다!

3. 앞으로 적용해야겠다고 느낀 점이 있다면 무엇이고, 어떻게 해보면 좋을까요?

• 컴포넌트 전체로 프로퍼티 적용 후 적용할 개체 선택해서 연결시켜 주기, 프로퍼티 적용하는 것이 4가지가 조금씩 다른 것 기억해 두기
• 컴포넌트로 색상 바꿀 아이콘들 있으면 확인해 보고 유니온 셀렉션으로 만들어 놓기, 아이콘들 '/'넣고 그룹핑하기

4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표를 공유해 주세요.

• 디자인 시스템. 스타일 가이드를 만들어 놓으면 작업할 때 도움이 될 것 같다. 

 

 

 

* 본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성되었습니다.