코드스쿨에서 제안하는 웹디자인의 기초 중 알맹이들


유료 강의의 내용을 일목요연하게 정리하는 것은 여러모로 문제가 있기 때문에 내가 앞으로 기억해두면 쓸 만한 내용 딱 세 가지만 정리한다. 책상 위에서 며칠째 나뒹굴고 있는 이면지를 처리하기 위한 목적도 있긴 하다.

1. 텍스트

기본적인 바디 텍스트 크기로 16px을 제안한다. 헤드라인(headeline)은 그를 기준으로 3em, 2단계 헤드라인(B-heads)은 1.5em, 내비게이션은 1em, 그리고 필자명 등의 부수정보(byline)은 0.75em을 권장한다. 줄 간격(leading)은 1.2~1.5em라는 기준을 제시했는데 결국 가장 바람직한 답안은 1.5em인 것으로 결론을 내렸다. 한 줄에 들어가는 글자 수는(CPL) 넉넉잡아 50~70, 조금 더 정확하게는 55~65 CPL이 적당하다고 한다. 글자 크기와 텍스트가 들어가는 가로 크기(여기에 모바일 환경에 대한 고려도 물론 포함한다), 폰트의 특성 등을 잘 고려하면 어느 상황에서나 모범적인 예시를 만들어낼 수 있다.

2. 색

솔직히 색은 잘 모르겠지만서도 최소 기본 테마색이 주어졌다는 전제하에 언제든 무난하게 어울릴 수 있는 색 조합을 찾는 것은 그리 어려운 일이 아니었다. HSB 또는 HSV 색 공간에서 단채도(monochromatic) 조합, 유사색(analogous) 조합, 보색(complementary) 조합만 찾더라도, 그것도 일정량의 센스(?)없이 공식에 때려 맞추기만 해도 된다. 단채도는 말 그대로 채도(hue)를 고정하고 나머지 요소를 조금씩 조정한 것, 유사색은 채도를 조금씩 바꾸어 나가는 것, 보색은 단채도 색 두어 개에 그와 채도에서 180도 차이가 나는 색으로 단채도 색 두어 개를 찾으면 된다.

3. 정리

그리드 디자인이며 폰트 매치며 이런 저런 내용이 있었지만 자명하거나 한글에 적용하기 힘든 내용 등을 제외하면 결국 어떤 기준으로 디자인의 완성도를 결정할 수 있느냐가 결론이 아닐까 싶었다. 코드스쿨에서 제안한 한 가지 이야기는 “옹호할 수 없다면 바꿔라.(If you can’t defend it, change it.)”는 거였다. 다분히 주관적인 이야기지만 최소한 그게 한 사람에게나마, 또는 하나의 팀, 집단에게나마 유효하게 적용될 수 있다면 그럭저럭 쓸 만한 룰이라는 생각이다.

Related Posts

비트코인과 페미니즘

비트코인의 세계에는 지갑이라는 개념이 존재한다. 이 지갑이 어떤 로직으로 생성이 되고 보안을 유지하고 어쩌고를 하고 저쩌고를 하는지는 원래는 대단히 중요하고 어려운 이야기지만 오늘의 포스트에서는 별로 주목할 필요가 없다. 이렇게 이야기를 해보자. 최근의 비트코인 지갑은 일정한 안정성과 보안성의 균형을 유지하기 위해 실제 지갑 소유자에게 기억을 하기 쉬운(mnemonic) 단어의 무작위적인 나열을 제시한다. 지갑 소유자가 이 단어를 잃어버리거나 유출하지 않으면 그의 비트코인은 무사하다.