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

2024.12.11 ~ 12. 17(열다섯 번째 일지)

 

SeSAC 동대문 캠퍼스

 

 

 

오전

피그마 실습 1

 

디자인 시스템

 

 

 

 

피그마 실습 2

 

디자인 토큰

 

 

 

 

 

피그마 실습 3

 

라이브러리 퍼블리싱

 

 

 

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

 

• 11일(수) - 디자인 시스템

디자인 시스템은 일관된 시스템을 말한다.

서비스의 목적에 맞도록, 일관되게 구성한 공유된 규칙이다.

디자인을 할 때 공통으로 사용되는 컬러, 폰트, 레이아웃, UI구성요소 등

일관된 집합을 두고 이를 어떻게 구성할지 체계를 만드는 것이다.

디자인 시스템은 팀내에서 결정된다.

 

디자인 시스템의 장점

1. 일관성 :  여러 프로젝트에 적용 가능한 표준화된 구성요소를 기반으로 하기 때문에, 디자인의 일관성을

유지할 수 있다.

2. 시간 단축 & 비용 절감 & 생산성 향상 : 재활용 가능한 컴포넌트를 통해 작업시간을 단축하여, 서비스를

시장에 빠르게 출시해서 테스트할 수 있고, 생산성이 향상돼 적은 수의 디자이너도 많은 것들을 만들어 낼 수 있다.

3. 원활한 협업과 소통 : 공통된 시각 언어 리소스이기 때문에, 협업할 때 이해관계자들의 소통에 도움을 줄 수 있다.

4. 쉬운 유지보수 : 개발에 필요한 리소스를 줄이고, 유지보수에 도움을 줘서 리스크를 최소화시킬 수 있다.

5. 확장성 : 서비스를 확장할 때 더 빠르고, 오류가 적은 디자인을 만들 수 있다.

 

디자인 시스템의 내용

 

1. 컬러

2. 텍스트

3. 레이아웃

4. 컴포넌트

5. 아이콘

6. 디자인토큰

 

 

*디자인 시스템을 만들 때, 새로운 파일을 만들어서, 페이지별로 정리

 

• 13일(금) - 디자인 토큰

디자인 토큰: 컬러,텍스트, 라운드값, 간격 등 디자인을 할 때에

공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것

 

헥사코드만 있으면 개발자, 기획자, 마케터들은 어디에 어떻게 쓰이는지 모른다.

규칙(시스템)은 베리어블을 사용해서 정리를 한다.

 

헥사값
단계별로 정리 / 파일명 정리 /페이지 정리

베리어블 - 색상이름에서 우클릭해서 new group with selection으로 그룹을 따로 만들 수 있음.
primitive 전체 컬러선택 - 우클릭 Scope에서 Show in all supported properties해제하면 색상이 안보임


*파일 저장하는 방법 - 피그마버튼 클릭- 파일 - save local copy

 

 

 

• 16일(월) - 라이브러리 퍼블리싱 

디자인 시스템 파일과 디자인 시안 파일을 함께 두면, 어떤 것이 어떤 파일인지 헷갈리게 된다.

그래서 다른 사람들과 협업할 때도 혼란이 올 수 있다. 그래서 디자인 시스템의 에셋들만 

디자인 시안 파일에 가져오는데 이것을 라이브러리 퍼블리싱이라고 한다.

 

디자인 시스템 파일의 라이브러리를 퍼블리싱하면 여러시안에 뿌려 사용할 수 있다.

디자인 시스템 파일 -> 라이브러리 내보내기

디자인 시안 파일 -> 라이브러리 가져오기

 

디자인 시스템 파일을 업데이트했다면, 전체 시안에서도 업데이트가 가능하다.

연동은 자동으로 되지 않기 때문에, 수동으로 해줘야 한다.

 

 

 

 

 

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

• 11일(수) - 현재 진행 중인 프로젝트 페이지 중 5개 정도를 골라와서 디자인 시스템을 한번 만들어봐야 하는데 색상수라던지 다양하지가 않아서 난감했다. 레이아웃 그리드를 맞출 땐 홈화면에 맞추는 게 좋을지 고민했던 것 같다.
• 13일(금) - 베리어블 그룹을 따로 묶어서 만들 때 따로 빼는 게 잘 안 돼서 그 부분이 어려웠던 것 같다.
• 16일(월) - 파일을 다운로드하여서 그걸 연걸로 해서 만들었어야 했는데 그냥 하다 보니 에셋 목록이 없길래 당황해서 설명을 다 듣고 강사님께 다시 여쭤봐서 설명을 듣고 업데이트까지 무사히 했다.

 

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

• 앱을 운영하는 다른 회사들의 디자인 시스템들을 많이 참고해 봐야 할 것 같다는 생각이 들었다.

 

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

• 벌써 중반이나 다 되어가고 있어서, 실습을 잘 마무리했으면 좋겠다. 

 

 

 

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