[UXUI TIL] 230112_스타일 가이드 시안에 적용/포트폴리오
01
외주 ㅣ 스타일 가이드 시안에 적용
스타일 가이드 파일에서 [Publish Library] 한 후에 작업 파일에서 시안에 적용시키는 작업을 했다. 파일 이름은 디자인 시스템인데 지금은 개발 코드가 포함되지 않은 스타일 가이드 개념 정도여서 스타일 가이드라 말하겠다.
여러 컴포넌트들을 베리언트로 결합하면 점선 박스가 생긴다. 그러면 하나의 인스턴트를 오른쪽 패널에서 상황에 맞게 쉽게 변경하여 사용할 수 있어서 편하다! 버튼은 아이콘을 사용하지 않는 경우/왼쪽에 넣는 경우/오른쪽에 넣는 경우로 나누었고 일반/눌렸을 때/비활성화 됐을 때의 경우도 고려하여 만들었는데, 이런 경우도 베리언트 기능이 유용하게 쓰인다.
시안 화면에 적용해 보면서 스타일 가이드 만들 때는 놓쳤던 부분들을 알 수 있었다.
1. 우선 시안 적용시 빠르게 찾아서 작업할 수 있도록 한 그룹에 들어가 있을 수 있도록 하기 위해서 네이밍 정리가 필요하다. 지금은 엉뚱한 그룹에 들어간 컴포넌트들이 있다ㅠ
2. 아래 사진처럼 하나의 모듈을 오토 레이아웃으로 여러개 생성한 상태로 컴포넌트를 걸었더니 시안에 적용할 때 모듈 추가에 어려움이 있었다. 하나의 모듈만 컴포넌트화하고 시안 작업할 때 오토레이아웃을 거는 방식으로 해야할 것 같다.
3. 베리언트 기능은 네비게이션(GNB, 하단 탭), 버튼처럼 같은 형식 안에서 조금씩 변형되는 경우에만 적용하고, 나머지는 다시 개별로 관리되도록 하는 것이 좋겠다. 아래 사진과 같이 한 화면에서 쓰이는 다른 형태의 컴포넌트들을 베리언트 기능으로 묶어뒀더니 작업할 때 찾기가 어려웠다.
02
제로베이스 ㅣ 포트폴리오 강의
포트폴리오 강의를 다 들었다! UIUX 디자이너로 취업하려면 어떤 포트폴리오를 만들어야 하는지 전반적으로 알 수 있어서 좋은 강의였다. 특히 지금 과제로 진행하고 있는 두 번째 다이아몬드 단계에서 UX Concept, 시각적 메타포, 와이어프레임이 중요한 이유에 대한 설명이 많은 도움이 됐다. 설정한 시각적 메타포를 가지고 Design Guideline에서 컬러, 폰트, 아이콘로 풀어내야 하고, UX Concept에 따라서 와이어프레임으로 그릴 화면이 정해지기 때문에 각 단계가 논리적으로 탄탄해야한다. 그리고 두 번째 다이아몬드 단계에서는 포트폴리오에 내 창의적인 디자인 능력을 마구마구 쏟아 넣어야 한다.
03
제로베이스 ㅣ 포트폴리오 과제
와이어프레임 작업을 시작했는데 무에서 유를 창조하는 것 같다..🫠 어렵다. 오늘은 와이어프레임 화면 두 개 정도 그렸고 레퍼런스를 찾아보는데 시간을 썼다. 내일은 레퍼런스 더 찾아보고 속도를 내서 그려봐야겠다!
