새로운 블로그 만들어보기
#Design Process, #Design · 2024. 1. 21
21년 3월쯤음에 첫 블로그를 만들고 나서 23년에 12월에 두 번째 블로그를 다시 만들었다. 함께 일하는 동료와 우스갯소리로 '이제 새로운 것을 올릴 때마다 새로 만들고 싶어질 거다'라는 이야기를 했었는데, 벌써 다른 아이디어들이 생각나는 걸 보면 정말 그렇게 될 것 같기도 하다.
첫 버전의 블로그에도 '블로그 만들기라는 글'을 썼는데 지금 다시 읽어보니 살짝 멋쩍다. 쑥스럽다고 느끼는 건 아마 그때보다 지금이 아주 조금 더 디자인을 알고, 제품을 알아서가 아닐까라고 생각해 본다. 이 글에서도 여전히 쑥스럽고 멋쩍지만, 블로그 만들기를 다뤄보려고 한다. 다만 다른 점이 있다면 첫 번째 블로그에서 배운 점으로 두 번째 블로그를 어떻게 만들었는지를 조금 더 중심으로 이야기한다.
첫 블로그는 전부 직접 디자인하고 코딩으로 구현했다. 매우 복잡한 기술을 사용한 건 아니었고 UI는 Sketch를 활용했고, 블로그 구현은 HTML, SCSS, JS, Jekyll과 약간의 Ruby를 사용했다. 만드는 동안 내가 뭐가 되는 것이고 안되는 것인지 모른 상태로 작업했기 때문에 어쩔 수 없이 많은 품이 들었다.
우선 직접 모든걸 다 만들다보니 하고 싶은 것은 모두 시도해 볼 수 있었다. 특히 Animation 요소나 자잘자잘한 Hover Transition 들고 다양하게 적용해 보았고, 이 과정에서 CSS 속성들이 어떻게 적용되는지 배운 건 실제로 내가 회사에서 제품을 만드는 데 활용해 볼 수 있을 만큼 도움이 되었다.
블로그 Transition 예시
이전까지의 경험상 디자인 시안을 엔지니어에게 Hand-off하고 구현이 다 된 시점에야 다시 확인하는 과정을 거쳤던 나에게 '디자인 → 구현 → 확인'이 바로 가능한 과정은 엄청 자극적이었다. 디자인 시안으로만 생각했던 구조와 실제 동작을 곧바로 확인해 보면 괜찮다고 생각했던 부분이 어색하게 느껴질 때가 많았고, 그런 크고 작은 부분들을 튜닝하면서 시간을 쏟는 게 시간도 빨리 가고 재미있는 지점이었다
디자인 요소도 작업 시점에는 나름 많은 공을 들여서 여러 타입의 시안도 작업해 보고 서체도 여러 가지를 봐보면서 작업했던 것 같다. 그 시점에는 커머스 제품을 만들다가 채팅 제품을 만들던 시점이어서 형태적으로 많은 제약을 두고서 디자인했었는데, 아무것도 없는 블로그 작업은 좀 더 환기되는 과정이었던 것 같다.
이제 시간이 좀 지나서 재미있었던 점은 좀 희석되고 새로운 블로그를 만들게 된 문제로 느꼈던 것과 배운 것이 좀 더 많아졌는데, 그중에 몇 가지를 이야기해 보려고 한다.
블로그를 만들고서 가장 크게 간과한 점은 내가 능숙하게 다루기 어려운 언어와 코드 베이스 문제다. CSS나 약간의 스크립트를 활용한 작업은 가능하지만, Jekyll은 기본적으로 Ruby를 사용하기 때문에 익숙하지 않은 내가 새로운 메뉴를 추가, 페이지 경로를 수정하거나, Jekyll에서 기본적으로 제공되는 기능도 마음대로 사용하기가 어려웠다. 시간을 들여서 공부하면 해결될 문제기는 한데, 애초에 Jekyll은 도메인 호스팅 비용을 아끼기 위해서 선택한 방향이어서 더 시간을 투자하고 싶지는 않았다.
단순한 웹사이트를 만들기에는 쉽다.
따라서 이건 Jekyll을 계속 사용한다면 해결해야 할 문제였고, 이 지점에서 나는 새로운 블로그는 언어든 기술이든 내가 컨트롤하고 좀 더 관심을 두고 싶은 영역에서 작업을 해야겠다는 점을 배웠다. 내가 모르는, 욕심이 없는 영역이 너무 크다면 흥미가 쉽게 떨어질 수 있다.
디자인 요소도 작게 자주 수정하고 튜닝 작업을 진행하기는 했는데 아무래도 욕심을 많이 부린 디자인이 부담스러워진 것도 한몫했다. 솔직하게는 만들던 시점에는 꽤 괜찮아보였는데, 시간이 좀 지나면서 수정을 해봐도 본판의 타이포그래피나 검은색 컬러가 너무 촌스럽게 느껴져서 작게 수정하는 작업이 아니라 아예 바꾸고 싶은 마음이 커졌다.
이외에도 순수 코드 베이스라서 글을 작성하거나 프로젝트를 올리려면 공을 많이 들여야 하고 오히려 거꾸로 화면을 디자인해서 올리는 게 아니다 보니 흥미가 좀 떨어진 것도 있었다. 근데 이건, 대부분의 Jekyll 블로그가 다 비슷할 것 같기는 한데 결론적으로 글을 올리는 과정이 어렵다면 글을 작성하는 마음을 먹기가 더 어려워질 수 있다는 것도 배웠다.
더 이상 첫 블로그에 흥미를 붙이지 못하고 두 번째 블로그를 만들기로 마음먹었고, 첫 블로그에서 흥미를 잃게 만든 요소들을 이번에는 좀 더 줄이기 위해서 여러 가지 방식을 생각했다.
일단 코드를 사용해서 전부 다 만든다는 생각은 빠르게 접었다. 코드에 관심이 있는 것도 맞고 약간의 코드를 다룰 수 있는 것도 맞지만 수단이 정답이 되는 것보다는, 내가 쉽게 다룰 수 있고 익숙한 툴을 찾기로 했다. 정말 운이 좋게도 딱 내 니즈와 맞는 툴이 있었는데 'Framer'였다. Framer는 프로토타이핑 툴이었지만 현재는 웹 퍼블리싱 툴로 좀 더 방향이 바뀌었고 나에게 꽤 익숙한 일종에 노코드 + 코드 컴포넌트 구성의 툴이었기 때문에 내가 원하는 방향에 맞고 기본적으로 제공하는 기능도 살짝 부족하기는 했지만, 문제로 느껴질 만큼은 아니었다.
Framer 결제 영수증.. 생각보다 비쌈
디자인은 역시 Figma를 그대로 사용했고 다른 작업도 열심히 할 요량으로 플랜 결제도 했다. 우선 만들고 싶은 방향이 있어야 제대로 시작할 수 있을 것 같아서 이런저런 시안을 주말이나 퇴근 후에 작업했다. 몇 가지 방향을 테스트하면서 지난번…. 기억 때문인지 힘을 많이 뺀 무드의 UI 스타일들로 초점을 맞췄고, 많은 레이아웃 규칙이나 서체를 활용하는 것 보다 좀 더 단순하게 접근했다. 전반적으로 이미지에 공을 많이 들였던 이전 방향에서도 타이포그래피를 더 많이 다뤄보는 쪽으로 변경했다.
지금 버전이랑 크게 다른 점은 없다
23년 중순쯤에 블로그를 완성했지만, 프로젝트 내용이나 넣어둘 글을 다 정리해 둔 게 아니라서 잠깐 표류하는 상태가 되었다. 외형은 완성했는데 내부에 넣어야 할 내용물이 완성되지 않아서 꽤 오래 방치했고 10월쯤부터 다시 들여다보기 시작했다. 이때 진행했던 건 블로그 전반적인 UI를 다시 작업한 것도 있었는데, 프로젝트를 정리하는 작업의 시간을 많이 쏟았다.
블로그 외적으로도 디자인 업을 시작한 지 6년 - 7년 차가 되던 시점이라서 지금까지 수행했던 프로젝트들을 정리하고 싶었던 시점이기도 했고, 결국 내용이 없으면 공허하게 느껴져서 내용 먼저 만들고 싶었던 것도 있다. 내용을 정리하는 건 디자인을 하는 것도 블로그를 직접 만드는 과정도 아니라서 매우 지루하게 느껴지기는 했는데, 돌이켜서 생각해 보면 이 지루했던 시간이 블로그 작업하면서 지금까지 내가 무엇을 했는지 정말 천천히 다시 돌아봤던 제일 의미 있는 시간이었던 것 같다.
아무 기능 없이 진짜 텍스트만 작성할 수 있다.
프로젝트 정리를 하면서 글을 잘 쓰려면 역시 툴이 중요하다고 생각했는데 (직접 손으로 쓸 게 아니라면) 처음에는 Notion으로 시작했지만, Notion에 순수한 텍스트 편집 기능만 들어가 있는 것도 아닌 점, 너무 많이 사용해 봐서 더이상 흥미가 생기지 않는 점이 항상 아쉬웠다.
딱 그 시점에 Craft, IA Writer를 시험 삼아 사용해 보기는 했지만, Craft는 너무 Notion 스타일의 제품이었고, IA Writer 마크다운 문법을 충실히 제공해 주기는 하지만 이미지 같은 것을 에디터에서 직접 볼 수 없어서 너무 아쉬웠다. 결국 Nota MD라는 매우 광적인 아무런 기능도 없는 순수 마크다운 에디터+위키 구성 툴로 정착했다. 주변에서 아무 기능도 없는 데 왜 쓰냐고 물어보는데 나름 단순해서 마음에 든다. (지금도 Nota MD로 작성하고 있음)
내 상황에서 최선의 선택이 Framer이기는 했지만, 내가 한 번도 다뤄본 적이 없는 툴이라서 블로그를 만드는데 가장 큰 장애물 역시 Framer였다. Framer는 기본적으로 디자인 툴인데 Figma, Sketch보다 코드 레벨이 매우 강 결합된 제품이고 디자인 기능도 있지만 애니메이션, 트렌지션, CSS 속성을 기준으로 작업해야 하는 툴이다. (이 블로그에도 몇 가지 코드 컴포넌트와 커스텀 코드들을 오버라이드 했다)
개인적으로 처음 툴을 접근할 때 반드시 포함되어 있는 모든 기능을 사용해서 만들지 않아도 괜찮다고 생각한다. 오히려 툴을 쉽게 배우려면 만들고 싶은 게 명확하게 있는 게 더 중요하고 그 안에서 필요한 기능들만 우선 사용해 보면서 익숙해져야 배우는 재미를 쉽게 느낄 수 있다. 그 지점에서 나는 블로그를 만들고 싶었고 내가 원하는 속성이나 필요한 기능들을 어느 정도 알고 있었던 점은 긍정적으로 다가왔다.
UI 디자인은 Framer의 Figma 플러그인이 그래도 옮겨줘서 신경 쓸 필요가 없었고, Framer의 인터렉션과 트렌지션, 레이아웃, 컴포넌트 개념만 익히면 되었는데, 여기서 Framer의 컴포넌트 개념이 Figma 개념과 비슷하면서도 달라서 살짝 애를 먹었다. Figma에서는 필요하다면 여러 상태를 Variants, Value, Boolean 같은 Prop으로 조합해서 다뤄줄 수 있는 반면에 Framer는 제품에서 기능적으로 State를 따로 다뤄주고 조합형 Prop이 아니라 Variants로만 상태를 관리할 수 있다. Figma를 사용하면 당연한 개념이 Framer에서는 지나치게 1차원적으로 다뤄져서 적응이 쉽지 않았다.
블로그를 직접 만들면서도 이것저것 써보면서 배웠지만, 제일 열심히 했던 건 튜토리얼 영상 보기와 다른 메이커들이 만든 Remix Component (외부 공유용 에셋), Demo를 열어서 어떻게 만들었는지 확인하는 것에 매우 집중했다. 모든 것을 다 찾아본 것은 아니고 예를 들면 페이지 전환 트렌지션이 필요하다 싶으면 우선 유튜브 튜토리얼을 다 보고, Framer 템플릿이나 트위터에 올라오는 Demo들을 다 저장해서 하나씩 열어보는 식이다.
Framer 유튜브가 의외로 아주 친절하고 자료도 많아서 도움이 많이 되었다. (출퇴근할 때 매일 챙겨봤다.)
Framer 유튜브는 의외로 엄청 유익하게 정리가 잘 되어있다
첫 버전 블로그에서는 내가 만들고 싶은 것을 만드느라 이미지 용량이나 트렌지션을 마구잡이식으로 넣었는데, 그러다보니 필요없게 느린 페이지도 많고 트렌지션을 기다리느라 느려진 페이지도 많았다. 이번 블로그에서는 그런 지점들을 최대한 줄이는데 신경썼다.
그 중에서도 아무래도 프로젝트에 UI 이미지들이 많다보니, 이미지 용량을 줄이는데 다양한 시도를 해보았는데, 나름대로 찾은 조합은 ImageOptim을 활용해서 기본적인 용량을 줄이고, Raycast 플러그인 Image Modification에서 webp으로 이미지를 컨버팅해서 올리는 방식이 제일 효과적이었다. Framer가 용량에 따라서 자동으로 Image Resize 해버린다면 힘들었을 것 같은데 없어서 다행이기도 했다.
Raycast의 Image Modification App
또 남들은 잘 놓칠 것 같은 OG Image들도 나름 신경써서 놓치지 않고 작업해두었다. 내 블로그가 유명한 블로그도 아니고 동료나 지인들에게 링크로 공유하면서 직접 보내줄 것 같은데 그때 아무 이미지도 없이 하이퍼링크(..)스타일만 톡 간다면 민망하기도 하고, 완성도도 없어보일 것 같아서, 소심하게 챙겨봤다.
OG Image
디자이너로 일을 하다 보면 실제로 동작 가능한 스펙을 갖고 있는 화면을 그리기 위해서 정말 많은 노력을 하지만, 내가 직접 동작하는 무언가를 만드는 일을 경험하기에는 쉽지 않다. 문제를 찾고 문제를 해결하기 위해서 디자인하고, 구현하고 사용자에게 전달되는 게 제품이라고 한다면 업으로서 디자이너는 순수하게 작업의 총량에서 아쉽게도 절반 또는 절반에 못 미치는 기여를 한다고 느껴질 때도 많다. (아마 이건 제품을 만드는 모든 직군이 각자 동일하게 생각할 수 있다.)
그 지점에서 블로그를 나를 표방하는 제품으로 바라본다면, 디자이너로서 처음부터 끝까지 모든 걸 원하는 방식으로 만들어볼 수 있는 제품중에 하나인 것 같다. 필요하다면 메뉴 구조를 없앨 수 있고, 원한다면 페이지가 아니라 모든 것을 Modal로 구성하는 것도 가능하다. 제품을 만들때는 시간이 없어서 포기했던 디테일들을 블로그를 만들면서는 하루 종일, 원하는 시간을 쏟아서 튜닝해보는 것도 가능하다.
블로그를 만드는 건 아주 큰 재미지만, 그것보다 블로그를 만들어보면서 배운 게 있다면 내가 어디까지 신경을 써서 만드는 게 가능한지, 내가 알고 있는 내가 사용할 수 있는 기술과 표현 역량 안에서 최대치가 얼마나 될 수 있을지 고민해 보면서 나름대로 포기하는 결정도 내려보고, 앞으로 유지보수하기 위해서 어떻게 설계해야 할지 주체적으로 결정해 보는 과정이 돌이켜보면 더 재미있고 의미 있게 다가오는 것 같다.
마치면서 아내에게 블로그를 이제 오픈한다고 하니 '오픈'은 옥상에서 블로그 오픈 광고 전단지 뿌리면 되는 거냐고 만들어준 그림으로 대신한다. (왜 잘 그렸지?) 고마워요!
