UX UI 공부 1일차 [ 그리드 시스템, 모작, 단축키 ]

 디자인 계의 올라운더가 되고 싶었던 나,, 일러스트도 그리고 영상도 만들고 UX UI도 공부하자고 생각했지만, UX UI 공부는 결국 한 번도 안 했다. 그런데 이번에 동아리 선배 소개로 토이 프로젝트에 참가하게 되었다. 사실 일러스트를 그리는 줄 알고 들어갔으나 UX UI 디자이너의 역할을 맡게 되었다(?). 잘할 수 있을까 걱정되긴 하지만, 이번 기회에 UX UI를 공부해야겠다는 의지가 마구 샘솟았다. 
 아직 UX UI에 대해 1도 모르지만 오늘부터 열심히 공부해보려 한다. 일단 많이들 사용하는 피그마(Figma)로 시작해야겠다!

---

[ 그리드 시스템 ]

 

 UI에서 그리드 시스템은 정말 정말 중요하다. 그리드 시스템을 먼저 잘 정리해놓아야 가이드라인 잡기도 편하고 퍼블리셔와의 소통도 원활해진다고 한다.

 

 그리드 시스템의 요소에는 크게 '컨테이너, column, width, gutter'가 있다. 여기서 컨테이너란, 콘텐츠 영역 중 가장 큰 폭을 의미한다. column, width는 말 그대로 단, 단의 너비이다. 마지막으로 gutter는 단과 단 사이의 간격을 말한다.

 

 여기저기 찾아본 결과 많은 디자이너들이 사용하는 그리드 시스템은 이러했다.

• 컨테이너 폭: 1200px
• column: 12개
• width: 72px or 70px
• gutter: 30px

 참고로 여기서 column이 12인 이유는 2단, 4단, 6단으로 나누었을 때 모두 정수 값이 나오므로 가이드라인 잡기가 편하기 때문이다!

 

 

위의 그리드 시스템을 피그마에 직접 적용하기 위해

우측에 있는 Layout grid를 클릭하여 값을 각각 입력해주고, Type를 Center로 설정하였다.

 

그 결과 이러한 그리드가 나오게 되었다! 이제 이 그리드에 맞추어 모작을 해보겠다.

---

[ 모작 ]

 

 평소 자주 보는 사이트인 '브런치'를 모작해보았다. 사실 작가 소개 box? 크기가 column에 딱 맞아떨어지진 않았지만, 그다지 큰 차이가 안 나서 나는 그리드에 맞게 작업했다.

 

아래 사진은 그리드가 없는 모습! 이거 하나 따라 만드는 데도 힘들었다..ㅎ

그래도 모작을 해보니 패턴이나 반복되는 폰트 사이즈가 점점 눈에 익었다.

모작을 통해 알게 된 것을 정리해보자면,

 

서체: 피그마에서 기본적으로 설정되어 있던 Roboto를 사용했는데, 2가지 정도의 서체 빼고는 다 Roboto 같았다. (이번 모작은 그냥 다 Roboto로 적용했다.)

 

폰트 사이즈 : 거의 다 15pt였고, 작가명은 24pt, 그 이외에는 18pt였다. 이 페이지만 놓고 봤을 때 15-18-24 이외의 폰트 사이즈는 없었다.

 

세부 설명 행간: 7px

 

버튼 : 둥근 사각형은 radius값이 모두 최대였다.

 

---

[ 새롭게 알게 된 단축키 ]

shift + 2	화면 중앙 맞춤
ctrl + R	프레임 이름 변경
shift + ctrl + K	사진 불러오기
shift + R	Ruler 켜기
ctrl + shift + 4	그리드 on/off