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

2024.12.18 ~ 12. 24(열일곱 번째 일지)

 

SeSAC 동대문 캠퍼스

 

 

 

오전

피그마 실습 1

 

클레이 & 글래스 모피즘

 

 

 

피그마 실습 2

 

 

목업 제작

 

 

 

 

 

 

 

 

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

 

 

• 18일(수) - 디자인 토큰 네이밍

디자인 토큰이란? : 컬러, 텍스트, 라운드 값, 간격 등 디자인을 할 때 공통적으로 반복되는 요소들의 값을

규칙(시스템)에 따라 정리한 것.

 

ex ) $button-bg-primary-red500 [ 버튼을 만들 때, 배경에 들어가는 메인 컬러인 레드]

 

계층 구조에 따라 속성으로 토큰 네이밍을 만들고, 베리어블과 스타일 라이브러리를 이용하고 참조해서

계층 구조 시스템을 만든다.

 

디자인 토큰 네이밍 구조(기본 구조가 되는 4가지)

Name(시스템명이나 도메인) - Object(구체적인 UI요소) - Base(변하지 않는 속성)-Modifier(변하는 속성)

해당하는 속성을 연결해 네이밍 구조를 짠다.

 

명확성

토큰 이름은 그 기능과 의미를 명확하게 전달해야 한다. 협업하는 모두가 알 수 있도록 작성해야 한다.

길이를 무조건 짧게 하기 보다는, 길어지더라도 의미가 명확하도록 짠다.

 

일관성

명명규칙은 전체 디자인시스템에서 일관되어야 한다. 팀 내 협업을 원활하게 하고, 시스템 유지보수를 쉽게 할 수 있도록 한다.

 

계층구조

토큰 이름에 계층 구조를 반영하여, 사용 범위나 용도를 명확하게 구분한다.

 

재사용성

재사용의 가능성을 고려해서 설정한다. 특정 디자인 요소에만 국한되지 않고, 다양한 곳에 활용될 수 있는 이름을 사용한다.

 

문서화

모든 토큰과 그 명명 규칙은 문서화되어야 하며, 이는 팀원들이 디자인 시스템을 이해하고 활용하는데 도움을 준다.

(정리한 토큰네이밍은 디자인시스템에 추가하여, 각 엘리먼트들이 어디에 어떻게 쓰이는지 정의한다.)

 

 

 

• 20일(금) - 목업 제작

Mock-up : 시제품을 제작하는 행위

많은 기술발달로, 시제품을 사진으로 찍는 것처럼 합성하고 묘사하는 것이 다양한 툴로 가능하게 되었다. 이전에는 포토샵으로 합성하였으나, 요즘엔 다양한 AI플러그인의 도움을 받아 손쉽게 제작이 가능하다.

 

Mockup plugin에서 고정 이미지로 목업 제작을 할 수 있다. 손으로 핸드폰 기종을 든 모습 같은 것들

MockRocket이라는 플러그인에서는 카메라뷰 설정 이미지를 만들 수 있다. 핸드폰을 보는 방향을 돌려서 만들 수 있다.

Rotato 3D mockups+ Explosions에서는 3D로 돌아가는 핸드폰의 기종을 역동적이게 영상으로  만들 수 있다. 무료인 대신에 아래에 자체 로고가 붙는다.

 

 

 

• 23일(월) - 팀프로젝트 최종발표 준비

팀프로젝트 최종발표 준비를 위해 UI를 수정하는 시간을 가졌다.

- UI를 수정할 때에, 터치 대상(버튼)은 충분히 커야한다(최소 44x44)

- 인쇄물보다 행간을 1.5배 키워야한다.

 

 

 

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

• 18일(수) - 디자인 토큰 네이밍을 설정하는 게 쉽지 않았던 것 같다. 디자인 토큰의 정의와 계층구조를 배운 후에 팀프로젝트에서 디자인 시스템 페이지를 만들고 토큰 네이밍을 설정하려는데, 색상은 마테리얼 디자인에서 단계별로 했다고 치지만, 타이포에서 이 타이포가 어떤 부분에서 어떻게로만 쓰여야 하는지에 대해 생각하고 정해야 하는데 모호한 것들이 있어서 정하는게 어려웠던 것 같다.
• 20일(금) - 팀프로젝트에서 만들었던 화면의 상단 부분의 이미지가 목업에 넣을 때 잘려서 애먹었지만 조정해서 성공적으로 목업을 만들었다.

 

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

• 디자인 토큰 네이밍을 정하는 것을 헷갈리지 않고, 누구나 잘 알아볼 수 있게 체계적으로 잘 설정해야겠다는 생각이 들었고, 쓰임에 맞는 지정을 잘해야겠다는 생각이 들었다.

 

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

• 어느덧, 피그마 실습이 끝이 나고 팀프로젝트의 발표까지 끝내게 되었다. 이번주 금요일과 다음 주 월요일 특강까지 듣고 나면 다시 새로운 기업 프로젝트를 시작하게 된다. 지금까지 배웠던 피그마 실습들을 까먹지 않고 앞으로도 잘 활용할 수 있도록 해야겠다.

 

 

 

 

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