시각보정

아무래도 내가 FE(Front-End) 포지션에 있다보니 디자인을 무작정 따라서 페이지를 만드는 것보다 디자인의 사소한 하나까지 이해하면서 해야겠다는 생각이 조금씩 든다.

디자인을 잘 모르는 나로써는 사실 왜 이렇게 픽셀이 나왔는지 잘 모르니까 그냥 제플린을 보고 따라하기는 하는데… 그게 나한테는 득이 될 게 없다는 생각이 문득 들면서…

디자인을 배울 때마다 하나씩 글을 써보려 한다.

디자인 가이드에 대해서…

우리 회사는 항상 프로젝트를 시작할 때 그 프로젝트의 디자인(css)가이드를 먼저 잡고 작업에 들어간다.

예를 들어 h1, h2, sub-text의 폰트 사이즈, 컬러, 마진을 먼저 잡는다. (많이 사용하게 되는 것)

폰트 사이즈는 디폴트(기준이 되는)를 잡고, 디폴트에 대한 small, smaller, large, larger이런식으로…

색은, primary, secondary, waning, danger, hightlight 정도로

폰트 색은, primary, light, lighter, dark, highlight 정도로

라인 색이 필요하다면 그것도 정의를 해준다.

이용약관 동의 화면에서…

위와 같이 이용약관 동의 페이지에서 아래 디스클레이머(※)같은 경우는 margin-top을 20px로 잡으라고 가이드 되어 있다.

제플린데 표시된 걸 보면, select-box로 정보 수신동의 (선택) 영역이 잡혀있고, 디스클레이머는 margin이 먹고 있지 않다. 사실 이 부분은 사소하게 넘어갈 수 있는 부분이지만, 디자인에서는 이걸 시각보정이라고 한다!!

select-box는 padding-top, bottom을 21, 20이라고 잡아놓았기 때문에 이미 디스클레이머의 margin영역을 잡고 있는 것이다. 만약, margin을 추가했다면, 사용자들은 너무 간격이 떨어져있어서 뭔가 이상하게 느낄 것이다.

그리고 또 한가지는, 정보 수신동의 (선택)왼쪽 부분에 16px을 띄었는데 이것도 디스클레이머의 위치와 페이지의 padding을 맞추려고 한 것이다.

되게 사소한데, 알고보면 수치에 의미가 있었다는…

개발도 어렵지만, 디자인도 어렵다 ㅎㅎ