UI 클론디자인 iOS 앱, 카드 만들기 (계속), Sketch 앱 사용법 기초 - 패스트캠퍼스 챌린지 15일차

---

강의수강화면

실습화면

3일 연속으로 오늘도 계속 이어서 앱스토어 페이지 클론 디자인 작업을 실습하고 있다. 페이지에서 타이틀 부분 아래에 총 3개의 카드를 강사님의 가이드를 따라서 완성했다. 위 이미지가 내가 Sketch 앱을 통해서 완성한 3장의 카드 모습이다.

 

오늘 배운 내용 : 

• 텍스트 수정창에서 옵션 키 + 엔터를 치면 줄바꿈 가능
• 줄바꿈이나 제목추가 등으로 간격이 달라지는 경우에 해당하는 심볼 variation 작업
• 아트보드와 라운드사각형 프레임의 구분을 위해 아트보드에 배경색을 채우고 export 되지 않게 하기
• UI디자인 작업을 할 때는 상하좌우 그리고 엘리먼트간의 간격(padding)을 픽셀 단위로 계속 정렬하며 작업해야 함
• 줄자 기능 - 툴바에 줄자 추가하기, 가이드선 긋기, 가이드선 제거하기
• 아트보드 위치를 옮길 때는 캔버스 제목을 클릭하고 드래그앤드롭
• 심볼을 편집할 때는 심볼인 엘리먼트를 클릭하고 엔터 키
• Custom Text Style 추가 방법 및 Components 패널에서 이름 변경
• 손쉬운 아트보드 크기 변경 방법 및 엘리먼트 크기에 맞추는 Fit 기능
• 박스 크기를 넘는 텍스트 줄임 기능(...)은 개발자에게 요청
• 디자인 화면과 실제 앱은 글자 간격이 다름
• 제목박스가 정해진 박스 크기를 넘는 경우 자동 줄바꿈과 함께 가까운 텍스트 위치가 이동하도록 하는 기능

 

오늘은 강사님이 강의 중간에 UI 디자이너라면 모든 요소들의 픽셀 간격을 균등하게 맞추는 것에 예민해져야 한다고 하셨는데, 정신이 번쩍 들었다. 얼핏 보기에는 화면에 요소들을 드래그앤드랍하면 되는 쉬운 작업으로 보이지만, 가장 작은 그래픽 화소 단위인 1픽셀을 신경써가면서 전체를 동시에 볼 수 있어야 하니, 만만한 일이 결코 아닌 것이다. 전체 속의 부분들까지 큰 그림을 보면서 동시에 세밀한 것을 놓치지 않아야 하고, 세밀한 것들을 맞추느라 지연이 되지 않게끔 작업하는 손도 굉장히 빨라야 한다. 

 

내가 앞으로 UI디자인 툴에 능숙해지면 일을 빠르게 할 수 있을텐데, 이제 막 배우기를 시작한 상태에서 너무 작업 속도가 지연되고 있어서 좀 답답하다. 포토샵/일러스트레이터/인디자인/프리미어를 처음 다루기 시작했을 때는 이런 느낌이 아니고 온통 신기한 새로운 세상이었는데, 내 작업 역량에 대한 기준이 이제는 다소 높아졌기 때문인지도 모르겠다. Sketch외의 다른 UI 작업 프로그램은 어떨지 벌써 궁금해진다. 

 

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa