이 블로그 만들기 #2

나의 디자인 방식

디자인은 상당부분 레퍼런스를 참고한다. 물론 혼자 정말 멋진 걸 스크래치부터 만들려고 해볼 수도 있겠지만, 아직은 스스로 내공이 부족하다고 생각한다. 객관적으로도 맞을 것이다.

나아가, 실력 향상 측면에서도 레퍼런스를 참고하는 것이 스크래치부터 만드는 것보다 좋은 방법이라고 생각한다. 물론 스크래치부터 정말 멋진 걸 만들어보려고 고민하고 노력하는 과정이 실력 향상에 큰 도움이 되겠지만, 개인적으로는 그것보다는 자신이 정말 멋지다고 생각하는 레퍼런스들을 딥하게 찾고 왜 그게 마음에 드는지, 어떤 점이 잘된 것인지 분석하고 내 상황에 맞게 정교하게 따라하고 조정하는 것이 더 실력 향상에 큰 도움이 될거라고 생각한다.

이건 재즈 피아노에서 배운 방법이다. 뭔가를 창조하려면 훌륭한 작품을 많이, 디테일하게 베껴본 경험이 아주 많이 누적되어야 한다. 많이, 정교하게 베껴볼 수록 원본을 만들어본 아티스트/디자이너의 의도와 스타일을 내 몸에 스며들게 할 수 있다.

따라서 훌륭하다고 생각하는 작품들을 골라내는 안목, 취향도 굉장히 중요하다. 훌륭한 아티스트/디자이너가 되는 방법에 방향과 속도란게 있다면, 방향은 안목이고 속도는 성실함일것이라 생각한다.

그렇게 찾은 레퍼런스들

간지나는 웹사이트들

처음에는 아주 간지나게 만들고 싶었다. 포트폴리오를 포함하고 싶었던 이상, 웹 개발자의 실력을 보여주려면 화려한 애니메이션을 넣는게 좋겠다고 생각했기 때문이다. awwwards나 fwa에서 가끔 봤던 디자이너/개발자들의 포트폴리오는 아주 화려하거나, 적어도 사진의 컨셉이 '멋짐'인 것이 많았다. 예를 들면 Michael Aust는 흑백으로 아주 분위기 있게 멋진 자신의 사진으로 가득 Hero Section을 채우고, 고급스러운 폰트들의 조합으로 자신의 이름을 적어두었다.

스크롤을 하면 parallax로 스크롤 내리는 속도와 화면이 내려가거나 움직이는 속도가 다른 애니메이션 효과는 이런 사이트들에는 기본적으로 들어가있었다.

너무 멋지잖아?!

첫번째로 만난 장벽은 사진이었다. 간지나는 사진을 이렇게 내가 안 찍었었나? 가끔은 중2병 걸린것처럼 포즈를 잡아봤어야 했는데. 사진관을 가봐야하나?

이런 생각을 하면서 겨우 하나의 사진(웨딩 사진 촬영을 하며 우연히 찍은 독사진이 있었다)을 건져 만들고, 와이프에게 보여줬다. 와이프는 이렇게 말해주었다:

"너무 멋지긴 한데, 자기 같은 느낌이 좀 덜한것 같아."

정말 그랬다. 내가 언제 정장을 입고 언제 이렇게 쿨한 이미지였다고. 내 자신을 보여줘야하는 포트폴리오 사이트에 이 컨셉은 좀 아닌것 같았다.

귀여운 웹사이트들

하지만 그렇다고 화려한 웹사이트를 포기하기는 일렀다. awwwards에서 나는 아주 마음에 드는, gurbov의 웹사이트를 찾았다.

이 웹사이트는 의도된 허접함을 연출해, 내려보는 사람들에게 자연스럽게 웃음을 주고 관심을 유도한다. 이 컨셉은 아주 맘에 들었고, 자기 자신을 멋지다고 말하지 않고도 멋짐을 보여줄 수 있는 방법 같았다.

그런데 막상 만들려고 하니 정말 보통 일이 아니었다. 레퍼런스의 상당 부분을 참고하려고 했던 내게, 이 웹사이트는 모든 것들이 참 유기적으로 들어가 있었고 하나를 다른 하나로 살짝 바꾼다고 그 느낌이 나는 웹사이트가 아니었다.

예를 들면, 위 이미지에서 묘하게 어색하지만 잘 어울리는것 같기도 한 모나리자 그림은 눌러보면 제작자 Gurbov가 모나리자 실물 앞에서 찍은 사진이 나온다. 아래에 있는 스펀지밥, 심슨 캐릭터들은 Gurbov와는 아주 잘 어울렸지만 내가 친숙한 캐릭터들은 아니었다. 즉, 이것 또한 내 자신을 보여주는 디자인은 아니었던 셈이다. '베낄 주제에 무슨 네 자신이냐?'라고 할 수도 있겠지만 남의 포트폴리오를 만들어주는 것도 아니고, 내 자신의 포트폴리오를 만드는데 지켜져야할 선은 지켜야만 했다.

하지만 Gurbov 웹사이트는 결국 내 웹사이트의 랜딩 페이지에 큰 영향을 주었다. 우선, 랜딩 페이지가 반드시 간지날 필요는 없다는 점을 알려주었다. Gurbov의 웹사이트는 딱 봐도 유머러스한 사람일 것이라는 인상을 주고, 덕분에 이 사람이 보다 친근하고, 함께 일하고 싶은 사람일 것이라는 느낌을 주었다.

또, 귀엽고 순박한(또는, 친근하고 함께 일하고 싶은 사람일 것이라는 인상을 주기 위한) 컨셉을 지향하려고 했을 때는 참 애매한 배경 디자인을 모눈종이 느낌의 배경으로 할 수 있다는 것을 알려주기도 했다. 솔리드한 배경은 약간이지만 필요 이상으로 세련되었고 차갑게 느껴졌다.(아니면 이상한 색깔 선택으로 맹한 느낌을 주거나)

블로그 목적에 충실한 웹사이트

지난 포스팅에서도 언급했듯이 이 웹사이트는 포트폴리오 웹사이트기도 했지만, 블로그이자 Til 사이트기도 했다. 어차피 포트폴리오 탭과 블로그, Til은 별개로 들어가는 것이었기에, 나는 적어도 기능 구현은 어떻게 할지, 블로그와 Til은 어떻게 디자인할지도 찾으러 다녔다. 그러던 중 다음 포스팅에서 아주 핵심으로 언급할 Josh W.Comeau의 블로그도 발견하고, 타이밍이 묘하게 다른 프로젝트(이 프로젝트에 대해서도 언젠가 글을 쓸 날이 올 거라고 생각한다)와 겹쳐 loophole letters도 발견했다. 다른 계기로 우연히 macarthur.me도 발견했다. 이 블로그들은 모두 아주 훌륭한 내용의 글들을 포함하고 있었다.

이런 '훌륭한 글'에 충실한 블로그들을 보고 나니, 디자인이 아주 화려할 필요가 있나?하는 생각이 들었다. 실상은, awwwards와 fwa에서 봤던 대다수의 사이트들이 아주 멋지긴 한데 아주 일정한 간격으로 스크롤을 내릴것을 전제로 하거나, 너무 화려해서 화려하다는 인상만 기억에 남고 딱히 무슨 작업을 하셨던 분인지가 기억에 남지 않았다는 생각이 들었다.

이러던 와중에 발견한게 Yadl이었다.

독일인 다운 실용성과 깔끔함으로 구성된 이 사이트는 아주 눈에 잘 들어왔다. 내 원대한 구상(포트폴리오 + 블로그 + Til에 더해 난 이미 이 시점에 스크랩, 리뷰 등 오만걸 다 넣은 프랑켄슈타인을 구상하고 있었다)과 맞게 내비게이션에 아주 탭이 많았던 첫 사례기도 했다. 텍스트가 내 기준에선 지나치게 많긴 했지만, 포트폴리오나 자신의 기술 스택, 경력을 밝힌 부분은 랜딩 페이지의 다른 부분들과 일관성도 있는 한편 눈에도 잘 들어왔다.

랜딩 페이지 외의 디자인 1: 포스팅 목록 보여주기

Yadl이라는 확실한 레퍼런스가 있었지만, 앞서 언급한 Josh W.Comeau, loophole letters, macarthur, Yadl을 포함한 내가 참고한 개발자 블로그들 모두가 블로그 포스트를 보여주는 곳에서는 아주 아름다운 방법을 택하진 않았다. 그들은 정말 실용적으로 시간 역순으로 쭉 포스팅들을 일관적인 grid 형태로 보여주는 방식을 택했는데, 이건 아마 이들의 글들이 순수 본인 창작의 글들이어서 그랬던것 같다. 아, 물론 Ykss님처럼 번역글이 많은 경우도 있었다. 하지만 내 말은, '번역'이라는 가치를 더하는 것과 '정리'라는 가치를 더하는 것은 굉장히 다른 영역이고, 정리라는 가치를 더하는 일은 사실 조금은 더 아름다울 필요가 있었다.

예를 들어, 나는 여러 권의 책을 완독하고 각각의 책마다 여러 장을 나눠서 비교적 오랜 기간동안 정리하는 작업을 하려고 했기에 여러 개의 포스팅들을 같은 책 카테고리 안에 묶는 기능이 필요했다. 개별 아티클을 번역하는 것보다 일관적으로, 순서에 맞게 포스팅들을 묶어 보여줄 수 있는 기능이 필요했고 이것은 깔끔하고 아름다울 필요가 있었다. 길게 말했지만 쉽게 정리하자면 단순히 포스팅들을 시간 역순으로 쭉 나열하는 것보단 복잡한 방법이 필요했다.

이 방법에서 가장 괜찮다고 생각한 레퍼런스는 언젠가 봤던(또, 언젠가 이 블로그에도 한번 쭉 정리해볼) 모던 JavaScript 튜토리얼이었다. 이 웹사이트 자체가 모던 JavaScript 튜토리얼이라는 책을 체계적으로 정리한 사이트여서 내 의도와 딱 맞았다.

다만, 이 포스팅 목록 보여주기 방식은 오직 공부 관련된 내용에만 적용될 수 있는 것이었다. 내 생각을 정리하는 Devlog 페이지에선 Yadl의 방식을 따랐고, Scrap 페이지에서는 loophole letters와 크게 다르지 않은 방식을 택했다.(사실, 정확히 말하자면 모든 페이지가 이렇게 생겼었으나 다른 페이지들은 수정을 한 반면 Scrap 페이지만 그대로 뒀다.) Review 페이지에는 음반 리뷰건, 전시 리뷰건 반드시 앨범 자켓이나 홍보용 포스터 같은 이미지가 있을 것으로 생각해 이미지가 포함된 카드 컴포넌트를 임의로 만들었다.

또, 각 페이지의 포스팅들에는 스타일 태그들이 있다. 하도 다양한 범위의 글을 쓰려고 욕심내다보니 필연적으로 들어간 기능이다. 이 태그들을 필터링하고 보여주는 방식은 Lemonbase Camp와 melonicedlatte의 모서리가 둥근 사각형 방식을 참고했다. 물론 흔하다면 흔한 디자인이고 여기의 디자인에서 많이 바뀌긴 했지만 이 사이트들에서 영감을 얻었다.

랜딩 페이지 외의 디자인 2: 포스팅 내용

포스팅을 멋지게 보여주는 것도 중요한 부분이다. 이 부분에선 Journo Portfolio가 가장 마음에 들었다. 큼지막한 사진과 제목이 글 내용에선 제한되어 있는 읽기 구역을 벗어나 화면 전체 공간을 채우면서 시선을 집중시켰고, 그렇게 자연스럽게 스크롤을 내리면 내용이 이어졌다.

하지만 이 형식은 지금 읽고 있는 것과 같은 Devlog 페이지의 포스팅에는 어울리지만, 공부 내용을 정리한 포스팅에는 어울리지 않았다. 공부 내용을 정리한 포스팅에는 앞서 언급한 모던 JavaScript 튜토리얼에서 쓰는 헤더를 썼고, 이후 공부한 내용들을 훑을 때 빠르게 훑을 수 있도록 요약과 퀴즈를 추가했다. 즉, 이 두 기능은 나름대로 독자적으로 생각하고 디자인해서 넣은 기능들이다. 더 좋은 대안이 없기에 Scrap 페이지도 비슷한 형식으로 포스팅 내용을 보여준다.

Review는 좋은 대안이 될 만한 레퍼런스를 찾았다. 왓차피디아는 커다란 이미지로 일종의 Hero Section을 구성하고 메타데이터를 보여준 후, 아래에 평가를 배치한다. 이 방식이 마음에 들어서(브런치도 비슷한 경험을 제공한다) 리뷰만큼은 이 양식을 차용해서 포스팅 내용을 보여주기로 했다.

그 외: 폰트와 색깔, Til과 Board

한편, 하이라이트의 경우는 몇번 실생활 디자인에서도 봤지만 datoybi 블로그를 보던 중 약간 아래에 칠해진게 멋져보여서 참고했다. 이 블로그는 유독 가독성이 좋아서 글씨체도 참고하려고 했으나, 개인적으로 적용해본 결과 이전부터 써온 Pretendard가 가장 눈에 잘 들어오는 것 같아 결국 Pretendard를 채용했다. 영문 폰트에 쓰인 Figtree는 앞서 언급한 macarthur의 블로그에서 보고 멋지다고 생각한 폰트다.

색깔은 단순했다. 다음 포스팅에서 구현 관련 내용을 다루면서 언급하겠지만 이 웹사이트 개발엔 Tailwind CSS를 쓰기로 생각했기 때문에 Tailwind에서 지원하는 기본 색상 팔레트를 그대로 사용했고, 주요 색은 다른 색보다는 파란색이 개인적으로 가장 많이 나와 관련된 색이라고 생각했기 때문에(가장 많이 쓰는 카카오톡 이모티콘 '블루와 옐로'도 파란색이고, 재즈를 좋아하는 내게 Blue라는 말이 아주 익숙했다.) 파란색 계열을 사용했다.

Til 페이지는 예전부터 한다면 나무 브랜치형 디자인으로 하고 싶다는 생각이 있어 그대로 적용했다. Study와 Scrap의 포스트들만을 나열하며, 호버 시 요약을 띄우는 것은 이 두 탭의 포스트들을 비슷한 방식으로 구현하기에 만들기 쉬웠다.(그렇기에 한동안 Study와 Scrap 탭을 합쳤다가 분리했다가 헤매기도 했다.)

Board 페이지는 비교적 최근에 추가한 것이다. 이미 당시에도 내비게이션에 메뉴가 너무 많았다고 생각했지만, 그래도 적을 글들, 할 일들, Devlog에 적기에는 짧지만 적어두고 싶은 메모들을 적을 공간이 필요하다고 생각해 추가했다. 이 메모를 적는 공간 역시 Yadl의 Notes 탭에서 영감을 얻은 것이다. 다만, 메모만 있는 이 탭에서 나는 To-Write와 To-Do를 추가했다. 사실 이 To-Write와 To-Do는 마이그레이션 당시 몇 안되는 방문자들이 혹시나 다른 글들도 읽고 이 탭도 방문했을 때 "여러분이 보시는 건 마이그레이션 중인 과정이니 완성물이라고 오해하지 말아주세요"라는 일종의 변명거리로 만든 것이었다.

어쨌든, 여기까지가 25년 5월 5일 시점 이 블로그의 대략적인 디자인 구상 이야기다. 실은, 랜딩 페이지가 아직 마음에 드는 수준은 아니며(포트폴리오를 보여주는 부분은 아직도 미뤄둔 숙제다) 일부 탭들도 디자인적으로 완성과는 거리가 있다. 또, 포스팅 내용들의 자간이라던가 텍스트간 간격, 글씨 크기 세팅 등도 Tailwind CSS의 기본 세팅에서 일부 조정했으며 이 블로그는 보기보단 커스텀 컴포넌트들이 꽤 있다.(예를 들면 코드나 코드 블록, 강조 박스 등) 이 얘기들을 생략한 것은 아직도 이 요소들이 완성과는 거리가 있다고 생각해서이며, 현재의 상태는 '이런 것들에 대한 고민을 지나치게 하면 아무것도 진행할 수 없기에' 넘어간 일종의 타협안이다. 아마 이후 어느 정도 만족할 만한 디자인 방법이나 레퍼런스를 찾아 디자인을 바꾸고 나면 다시 얘기할 기회가 있을지도 모르겠다.

디자인에 대한 고민을 했지만, 어쨌든 난 디자이너라기보단 개발자다. 블로그의 이 모든 기능들과 디자인을 어떻게 구현했는지에 대한 얘기는 다음 포스팅에서 다룬다.