Week 8
2024.12.11(Wed)
- 디자인 시스템
2024.12.13(Fri)
- 디자인 토큰
2024.12.16(Mon)
- 라이브러리 퍼블리싱
22일차(2024.12.11)
개념 정리
디자인 시스템이란?
디자인시스템 = 일관된 시스템
- 서비스의 목적에 맞도록, 일관되게 구성한 공유된 규칙
- 디자인을 할때 공통으로 사용하는 컬러, 폰트, 레이아웃, UI구성요소 등 일관된 집합을 두고 이를 어떻게 구성하는지 체계를 만든 것.
디자인 시스템의 장점
- 일관성 :
디자인 시스템은 여러프로젝트에 적용가능한 표준화된 구성요소를 기반으로 하기에, 디자인 일관성 유지할 수 있다. - 시간단축 & 비용절감 & 생산성향상 :
재활용 가능한 컴포넌트를 통해 작업시간 단축하여 서비스를 시장에 빠르게 출시하여 테스트할 수 있으며, 생산성이 향상되어 더 적은 수의 디자이너가 많은 것을 만들 수 있다. - 원활한 협업과 소통 :
공통된 시각 언어 리소스로, 협업시 이해관계자들의 소통을 도움을 준다. - 쉬운 유지보수 :
개발에 필요한 리소스를 줄이고, 유지보수에 도움을 주어 리스크 최소화
(인하우스/큰구모의 기업에서 꼭 필요한 개념) - 확장성 :
서비스를 확장할때 더 빠르고, 오류는 적은 디자인을 만들 수 있다.
디자인 시스템 안에 들어가야 하는 내용
- 컬러
- 텍스트
- 레이아웃
- 컴포넌트
- 아이콘
- 디자인토큰
디자인 시스템 제작 순서
-
파운데이션 (컬러, 폰트, 레이아웃)
컬러, 둥글기, 간격, 효과, 규격 등 컴포넌트 구성요소들의 기반을 구축 -
컴포넌트 제작
파운데이션을 토대로 일정한 규칙을 가진 컴포넌트 생성 -
템플릿 제작
컴포넌트를 조합에 서비스에 반영할 UI이 설계
확장할 수 있도록 구성하여, 다양한 상황에 쉽게 활용할 수 있도록 제작
과제
요구사항
- 현재 진행중인 프로젝트의 디자인 시스템을 구성해볼것
실습과정 및 결과
디자인 시스템 전체 화면(템플릿 구성은 못했다)
foundation 구성(폰트 및 색상)
component 구성(아이콘 및 컴포넌트)
23일차(2024.12.13)
개념 정리
디자인 토큰이란?
컬러, 텍스트, 라운드값, 간격 등 디자인을 할때 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것
- 헥사코드만 있으면, 다른사람(개발자, 기획자, 마케터)들은 어디에 어떻게 사용되는지 모른다.
- ex. 버튼을 만들때 배경에 들어가는 메일컬러인 레드에요 -> 디자인 토큰으로 정리 가능
**토큰 : 실질적인 현금의 값 외에 가치를 부여한 것 - 규칙(시스템)은 베리어블을 사용하여 정리
과제
요구사항
- 페이지를 따로 만든 후 베리어블을 통해 디자인 토큰을 설정하여 컴포넌트를 만들어볼것
실습과정 및 결과
오늘은 많이 하진 못했다...ㅠㅠ
썸네일 만들어주고...
각 collection을 나누고 그 안에 작은 값부터 집어넣었다.
24일차(2024.12.16)
개념 정리
라이브러리 퍼블리싱이란?
디자인시스템 에셋들을 디자인시안파일에 가져오는 것
- 디자인시스템파일과 디자인시안파일을 함께 두면, 어떤것이 시스템파일이고, 어떤것이 디자인시안파일인지 혼동할 수 있음(나는 구분할 수 있다고 하여도, 협업할때 혼동될 수 있음)
- 이때 디자인시스템 에셋들을 디자인시안파일에 가져오는 것이 라이브러리퍼블리싱
라이브러리 퍼블리싱 특징
- 디자인시스템파일의 라이브러리를 퍼블리싱하여 여러 시안에 뿌려서 사용가능
- 디자인시스템파일-> 라이브러리 내보내기(Publish)
- 디자인시안파일-> 라이브러리 가져오기(Add to)
- 디자인시스템파일을 업데이트 하였다면, 전체 시안에서도 업데이트 가능
- 자동으로 연동되지 않으며, 라이브러리 업데이트 필수
전체 회고
이번 한 주는 프로젝트 막바지와 강의 과제가 겹치면서 많은 것을 놓치고 간다는 아쉬움이 남는 시간이었다. 발표 자료 준비와 프로젝트 작업이 점점 더 큰 비중을 차지하다 보니, 오전 수업 시간에도 틈틈이 작업을 이어가야 했고, 강사님이 내주신 과제들을 제대로 수행하지 못했다. 과제 자체가 시간 내에 해결하기 조금 빠듯한 경우도 있었고, 스스로도 여유를 갖고 해결할 여건이 부족했던 점이 아쉽다.
그럼에도 불구하고, 강의는 하나도 놓치지 않으려 했다. 실무 준비에 정말 필요한 내용들이 담겨 있었기 때문이다. 이번 주 가장 기억에 남는 부분은 디자인 토큰이라는 개념이었다. 이전에도 디자인 토큰이라는 단어는 들어봤지만, 이번 강의를 통해 비로소 제대로 이해하게 되었다. 디자인 토큰은 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것이라는 점이 핵심인데, 이를 베리어블(variable)로 활용해 작업하는 구체적인 방법까지 배운 점이 정말 인상 깊었다.
피그마를 오래 사용하면서도 이런 부분은 간과하고 넘어갔던 터라, 실무를 준비하면서 얼마나 중요한지 다시 한번 깨닫게 되었다. 특히, 강의 내용을 들으며 어떤 부분을 중점적으로 고려하고 작업해야 할지 꼼꼼히 메모했다. 한 가지 아쉬웠던 점이라면, 베리어블이나 프로퍼티 같은 그룹핑 작업 시 네이밍을 어떻게 하면 효과적으로 할 수 있을지에 대한 언급이 부족했던 것이다. 물론 회사마다 다를 수 있겠지만, 대체적으로 통용되는 가이드라인이나 정형화된 예시를 공유해주셨다면 더욱 도움이 되었을 것 같다.
이번 주는 갑작스럽게 면접과 면접과제까지 있었던 터라 몸과 마음이 바쁘고 조금은 지쳤던 시간이었지만, 강의를 통해 배우는 과정 자체가 여전히 유익하고 즐겁다. 부족했던 부분은 앞으로 더 열심히 보완해나가며, 최종 발표를 잘 준비해야겠다고 다짐하게 된다.
(+번외)
이번 주 수요일에는 간담회가 열렸다. 푸짐한 간식들이 준비되어 있었는데, 간식 자체도 좋았지만, 수강생들이 함께 친해질 수 있는 시간을 마련해준 세심한 배려에 더 큰 감동을 받았다. 새싹은 처음부터 시설과 커리큘럼이 뛰어났지만, 이렇게 수강생들의 의견을 반영하며 소통의 장을 만들어주는 모습을 보며 다시 한번 신뢰를 느꼈다. 취준생 입장에서 이런 따뜻한 배려는 정말 큰 힘이 된다.
게다가 중간평가에서 우수자로 선정되어 상품도 받았다. 사실 블로그 글을 쓴 것뿐인데 이렇게 인정받으니 기쁘기도 하고 뿌듯했다. 그런데 문제가 있었다. 상품으로 받은 스타벅스 기프티콘을 확인해보니, 처음엔 5,000원짜리라고 생각해서 화가 났다. "우수자로 뽑혔는데 이게 뭐야?"라는 생각이 들며 괜시리 불만을 표출했는데, 몇 시간 뒤 다시 확인해보니 기프티콘 카드가 두 장이었던 거다. 그리고 그중 하나는 무려 3만 원짜리였다! 내가 기존에 있던 카드를 혼동하여 착각한 건지 아니면 누군가 같은 카드를 넣어준 건지 모르겠지만, 내가 왜 그렇게 화를 냈나 싶어 솔직히 조금 민망했다.
이렇게 소소한 해프닝 덕분에 간담회는 더 기억에 남는 시간이 되었다. 앞으로는 너무 빠르게 불만을 내기보다 한 번 더 확인해보는 습관을 들여야겠다는 교훈도 얻었다😊
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
