블로그 디자인을 결정하면서 소소하게 정리한 것들의 기록이다.
거창한 이유는 아닐지라도 나름 이유가 있어서 결정한 것들이다.

전적으로 내가 좋아하는 색상과 폰트, 내가 편리한 디자인으로 만든 블로그이다.

우선은 으레 만들던것처럼 블로그를 만들고 있었는데, 내가 꾸준히 쓰려고 만든 블로그니까 해보고 싶었던 것들을 모두 해보려 한다. 하나하나 이유를 가진 디자인으로 만들어 보려고 한다.

사이즈: 반응형 웹

무슨 기기에서든지 불편하면 블로그의 의미가 없다고 생각했기 때문이다. 블로그 주인도 보기 불편한 블로그라면 의미가 없지.

참고한 자료는 다음과 같다.

mobile size

Figma에서 제공하는 디바이스 사이즈

width

우선 px단위로 정해진 절대적인 사이즈가 필요한 너비는 총 5개이다.

  1. 최대 사이즈: 1200px

    • 데스크탑의 최대 넓이

웹은 모니터 크기에 따라 사정없이 넓어질 수 있으므로, 디바이스 사이즈는 사실상 의미가 없다. 그래서 최대 사이즈를 잡아두고 그것보다 커질땐 배경만 늘어나도록 작업한다.
아래 컨텐츠 최대 사이즈를 포함하여 여러 컨테이너를 포함하여 최대 사이즈가 1200px이다.

  1. 컨텐츠 최대 사이즈: 1024px

    • 컨텐츠는 이 사이즈보다 커지지 않는다. 하지만 개인적으로 컨텐츠를 포함하고 있는 컨테이너의 너비로 1200px를 쓰기엔 넓게 느껴진다. 그래서 컨테이너의 사이즈를 결정하기 위해 대표적인 포털사이트 두 곳을 살펴보았다.

potal width

네이버 1190px(위)/다음 990px(아래)

개인적으로 1190px는 넓게쓰는 만큼 시원시원했지만, 모니터를 분할하여 쓰는 나에게는 페이지가 생각보다 많이 잘려 스크롤을 움직여야 했다. 990px는 대체적으로 적당하다고 생각했으나, 전체화면으로 바꾸었을때 좌우 여백이 지나치게 많아 보였다. 그래서 그 사이 어딘가로 결정해야 했다. 현재 단이 1개이므로 1000px이 넘어도 된다고 생각했다. 그중 가장 익숙한 사이즈인 1024px 혹은 1080px에 맞추려고 했는데 작은 것에 맞춰야 더 포괄적이니 1024px로 결정하였다.

  1. 최소 사이즈: 320px

    • 모바일의 최소 너비
    • 컨텐츠는 이 사이즈보다 작아지지 않는다.

가장 작은 모바일에서 잘 나오면 되므로, 가장 작은 디바이스 사이즈까지만 제공을 하면 된다. Figma에서 제공하는 모바일 사이즈를 보면, 가장 작은 사이즈가 iPhone SE로 320px이다. SE2도 나온 마당에 360px에 맞출까 싶었지만, 그래도 안전하게 320px로... 최소 컨텐츠 사이즈가 따로 없는 모바일로 넘어가면 메인컨텐츠가 하나의 다단이어야 하므로, 최소 사이즈가 곧 최소 컨텐츠 사이즈이다.

  1. 데스크탑 ➔ 태블릿 브레이크 포인트: 1024px

    • 데스크탑에서 타블렛으로 넘어가는 기준 넓이.

최근들어 태블릿이 노트북을 대신하려는 시도가 보이면서, 태블릿 사이즈가 점점 의미가 없어진다. 그래서 데스크탑과 테블릿은 마진과 패딩을 정리하는 정도로 하고, 데스크탑과 모바일 정도만 디자인을 다르게하려 한다. 부분적으로 필요할 때만 태블릿 사이즈 브레이크 포인트를 사용할 것이다.

  1. 태블릿 ➔ 모바일 브레이크 포인트: 767px

    • 태블릿에서 모바일로 넘어가는 사이즈.

모바일 사이즈도 해상도가 높아지면서, iPhone 11 Pro Max의 세로사이즈가 896px로 iPad pro 11" 가로 사이즈보다 크다. 이런 상황에서 디바이스 사이즈로만 결정하긴 힘들어졌다. 그래서 태블릿 세로사이즈에선 무조건 테블릿 디자인으로 나오는 것을 목적으로하고 사이즈를 정하기로 했다. 가장 작은 태블릿 디바이스가 iPad mini로 768px이다. 768px까진 태블릿 디자인으로 나오고, 그 미만으로는 모바일 디자인으로 나타날 것이다.(iPhone 11 시리즈는 가로로 회전시 태블릿 디자인을 전환될 것이다.)

버튼: 뉴모피즘(Neumorphism)디자인

최근 애플이 big sur를 공개하면서 화재가 되었던 것이 변화된 아이콘이었다.

icon

살짝 올록볼록해진, 그렇다고 완벽히 3D는 아닌, 묘하게 익숙하면서도 초면인 아이콘들이었다.
이에 따라 논쟁아닌 논쟁이 있었나 보다.

스큐어모피즘으로 회귀하려나보다.
이게 무슨 스큐어모피즘이냐 여전히 머터리얼디자인이다.
아니다 다르다 이제 뉴모피즘이다!
무슨 뉴모피즘이야 그리고 뉴모피즘은 존재하지 않는 단어야.
...

이때 처음으로 뉴모피즘이라는 단어를 접했다. 새로운 스큐어모피즘으로 추정되는데, 스큐어모피즘은 아이폰을 오래전부터 썼던 사람이라면 꽤 익숙한 디자인이다.

3gs

플랫 디자인(좌) / 스큐어모피즘 디자인(우)

스큐어모피즘(Skeuomorphism)은 사실적으로 표현하는 디자인이다. 오른쪽 사진은 iOS7 이전 시절의 아이콘으로, 스큐어모피즘이 잘 드러난 디자인이다. 카메라의 렌즈의 표현이나, 뉴스스텐드 등을 보면 확실하게 알 수 있다. 스마트폰 초창기 시대에 아날로그적인 느낌을 그대로 디바이스로 가져오려는 노력이 돋보인다.

이후, 스마트폰이 대중화되면서 스큐어모픽한 디자인에 점점 피로도를 느끼게 된다. 이에 복잡하고 어지러운 그래픽을 단순하게 표현한 플랫 디자인(Flat Design)이 등장하게 된다. 단순하지만 누구나 바로 의미를 알 수 있는 직관적인 표현은 작은 화면에서 많은 것을 가능하게 해야하는 스마트폰에서 큰 두각을 나타냈고, 애플은 iOS7부터 적용하기 시작하였다.

이후 미니멀리즘이 대두되면서 플랫 디자인은 점점 더 가벼워졌다. 그러다보니 가독성이 떨어지거나 너무 밋밋한 느낌이 들기 시작하였다. 그래서 단점을 보완한 머터리얼 디자인(Material design)이 등장했다. 구글이 제시한 디자인인데, 플랫한디자인에 그림자를 살짝 추가함으로써 디자인은 입체감을 얻게된다. 플랫디자인의 깔끔하고 간결함을 유지하면서도 공간감을 갖게되어 이질적이거나 밋밋한 느낌이 들지 않아 현재까지도 많은 사랑을 받고있다.

뉴모피즘(Neumorphism)은 디자인 커뮤니티 dribbble에 한 디자이너로부터 시작되었다고 한다.

dribbble

Alexander Plyuto의 neumorphism 작품(업로드한 작품은 Skeuomorph라 되어있다.)

나는 전문가가 아니라 정확한 개념이나 정의를 내릴 수는 없지만, 뉴모피즘 작품이라는 것을 여러장 찾아보고 스스로 내린 결론은, 그림자로 입체감을 도드라지게 만들어 사실적인 표현을 하는 디자인이다. 입체감으로 차이를 표현하고, 만지면 그 형태가 다 느껴질 것 같은 사실성을 주는 것이라 생각한다. 만질 수 없는 '촉각'의 강조라 하면될까...

포스팅 초반에 등장한 big sur 아이콘이 뉴모피즘인지는 잘 모르겠고, 어쩌면 사실 중요한 문제가 아닐지 모른다. 사실 이런 점에서 뉴모피즘 디자인은 오래가지 못할 확률이 크다. 디자인이 전반적으로 입체감으로만 이루어지니, 무엇을 강조하고 싶은지 전달력이 떨어지게되니 앱의 목적성도 흐릿해진다. 입체감만으로 표현하기엔 정보 전달의 한계가 보이고, 디자인적으로 예쁜 것과 사용자 경험은 큰 차이가 보이기 때문이다.

그럼에도 불구하고 뉴모피즘은 무척 흥미롭다. 지금까지 나는 웹과 앱에서 디자인은 스큐어모피즘과 플랫디자인 사이에서 항상 방황할 것이라 생각했다. 개인적으로 머터리얼디자인은 (적어도 스크린안에서는) 완벽하게 완성된 디자인이라고 생각하기 때문에 크게 벗어나진 않을 것이라고 생각했기 때문이다. 그런데 뉴모피즘을 보며, 언젠가는 이런 흐름을 뒤흔들만한 상상도 못한 디자인이 나올 수도 있겠다는 생각이 들었다.

나는 이 블로그의 일부분에 뉴모피즘 디자인을 적용하려한다. 만들어보지 않았던 디자인이라 재밌는 공부가 될 것 같고, 일단 마음에 드는 부분이 있기 때문이다🤗 개인적으로 항상 색상을 고르는게 가장 어려운데, 뉴모피즘은 포인트 컬러 한두개와 그림자만으로 세련되게 표현이 가능해 보이기 때문이다. 그래서 만져보고 싶게 눌러보고 싶게 만드는 '촉각'을 제공하는 장점을 이용하여 버튼 쪽에 적용할 생각이다.

참고로 뉴모피즘 버튼을 만드는 css의 원리는 Alexander Plyuto가 링크를 걸어둔 Figma Neomorphism Guide 2.0와 뉴모피즘 디자인을 만들어주는 generator Neumoriphism.io가 큰 도움이 되었다.

일러스트

처음엔 이모지와 애플의 미모지를 사용하여 작업을 했었는데, 내가 만들다 질려버렸...다... 그리고 마침 재밌는 일러스트 사이트들을 많이 발견해서, 이것을 이용하여 블로그를 구성해보았다.

open peeps

Open Peeps 페이지와 적용 화면

해더에 머리만 있는(!) 아이콘과 404page의 일러스트는 Open Peeps를 이용해 만들었다.
표정, 헤어스타일, 모자 안경과 같은 아이템까지 커스텀 할 수 있고 Figma를 사용하여 쉽게 적용할 수 있다.

Open Peeps 일러스트는 CC0라이선스이다. CC0라이선스란 저작권과 저작인접권을 포기한다는 의미로 퍼블릭 도메인을 의미한다. 퍼블릭 도메인은 저작권이 소멸된 저작물 혹은 저작권을 포기한 저작물이다. 그러므로 변형, 상업적 이용이 가능하고, 출처 표기 의무도 없다.

drawkit

DrawKit의 일러스트 페이지와 적용 화면

각 페이지 배너로 사용된 이미지는 DrawKitPeople Working Illustrations일러스트이다. 커스텀을 할 수는 없지만 컴퓨터를 하는 모습이 충분히 다양하게 포함되어 있어 적용하였다. 그리고 개인적으로 머리를 가리는게 마음에 들어서 위로 올려버렸다ㅋㅋㅋ

DrawKit에서는 CC0이라고 명시하고 있지는 않다. 포스터, 프린터, 머그, 티셔츠 등으로 변형되지 않은 카피를 팔아선 안되고, 이미지나 아이콘을 편집하여 재배포 해서는 안된다. 하지만 이 외에 상업적 및 비상업적 목적으로 다운로드, 복사, 수정 및 사용이 가능하다.

두 일러스트 모두 개인 블로그에 제작하기엔 충분한 라이선스를 가지고 있어서, 불편함 없이 사용하였다.

폰트

계속 느끼는 점인데, 폰트가 참 중요하다. 같은 내용의 글이어도, 폰트에 따라 글의 뉘앙스가 달라지는 것 같은 착각이 든다.

모두 웹폰트이며, 구글폰트눈누를 통해 적용된다. 많이 사용되는 폰트 몇가지만 소개하려 한다.

기본 폰트

$font-main: 'Spoqa Han Sans', 'Noto Sans KR', Sans-serif;

특별하게 정하지 않는다면 기본적으로 적용될 폰트이다. 블로그 포스트 본문 폰트이다. 전부 고딕체가 바탕이다.

개인적으로 지금까지 Noto Sans를 많이 사용하곤 했는데, Spoqa Han Sans와 비교해보니 각 글자의 길이가 조금 더 줄어들었고, 자간이 정리가 되어 더 안정적이었다.

제목

$font-title: 'Roboto', 'GmarketSansMedium', 'Noto Sans KR', Sans-serif;

대체로 <h1>~<h6>표제와 버튼에 적용되는 폰트이다. 포스트의 제목으로 사용되므로 기본폰트와 어울리지만 구분도 되어야 했다. 또한 한글과 영문이 함께 사용되므로 서로 어울려야한다.

기본 폰트가 스포카한산스로 고딕체인데, 이것과 어울리면서 차별성이 있어야 했다. 그래서 정사각형에 가까운 고딕체를 찾아보았는데 에스코어드림옴니고딕, 지마켓산스였다. 옴니고딕은 기본 라이선스만 가지고 있어서 임베딩으로 사용할 수 없어서 아쉽지만 포기했다.

그리고 데스크탑이 아닌 다른 디바이스에서 자간이 살짝 넓어지는 것을 확인했다. 에스코어드림은 자간이 넓어지니 불안정한 느낌이 들었다. 내가 선택한 폰트틑 Gmarket Sans이다. 자간이 넓어지더라도 비교적 안정적이었고 형태도 가장 정사각형으로 차별성이 있었다. 그런데 영문은 정사각형에 가까우면 길이가 너무 길어지고, 가독성이 떨어지는 문제가 발생하였다.

그래서 영문과 숫자 폰트는 Roboto로 대체하기로 하였다. 대체하고나서도 한글폰트와도 잘 어울리고, 특히 버튼과 같은 작은 사이즈에서도 안정적이라 마음에 들었다.

마무리

내가 직접만든 첫 블로그니까 이것저것 많이 생각했고, 고민했던 것을 짧게나마 기록으로 남기고 싶었다. 그 중 디자인적으로 이것 저것 찾아보고 적용한 것들을 모았다. 디자인은 나중에야 바뀔 수 있는 부분이지만... 개인적으로 고민한 시간만큼 마음에 든다.🤪

Reference & Learn More

Apple Human Interface Guidelines Dark Mode
MATERIAL DESIGN Dark theme
MATERIAL DESIGN COLOR TOOL
MATERIAL DESIGN The color system
dribbble Alexander Plyuto
Neumorphism in user interfaces
Figma Neomorphism Guide 2.0
Neumoriphism.io

Comments