블로그를 시작하며

들어가며

• "그 기술은 찾아볼 자료가 많이 없어요."
• "국내에는 그 기술 쓰는 사람이 거의 없지 않나요?"
• "참고 자료가 많이 없어서 생태계에 노하우가 아직은 부족하다고 생각해요."

제가 면접 과정 중에 종종 듣던 이야기예요. 그때마다 마음이 아팠어요. 기술 생태계에 기여하고 있는 사람으로서 부담감과 묘한 책임감 같은 것도 느꼈습니다. 컨퍼런스 발표나 커뮤니티 활동을 많이 했고, 기술에 대한 인사이트도 충분히 전달했다고 생각했지만, 분명 새로운 기술을 접하는 가장 가까운 통로는 블로그일 테니까요. 그렇지만 저는 블로그를 시작하지 못했습니다. 왜냐면 제게 있어 글이라는 것은 큰 파급력이 있다고 생각했거든요. 나쁜 말은 잊힐 수 있지만 나쁜 글은 주워 담을 수 없다고 생각했고요. 잘 쓴 글이 좋은 영향을 미치는 사례들도 많지만, 나쁜 글이 나쁜 영향을 끼치는 사례들을 저는 많이 알고 있었어요. 그래서 앞서 이야기한 부담감과 책임감을 한동안 마음의 짐으로써 간직만 하고 있었습니다.

그러던 중 2021년이 지나가고, 저는 앞으로의 방향에 대해서 많이 고민했어요. 빠르게 성장하는 회사에서 여러 기술적 실패들을 함께 돌파하고, 동료와 한줄 한줄 치열하게 코드 리뷰하면서, 저 스스로 많이 성장했다는 느낌을 받았어요. 드디어 이제는 코딩을 잘할 수 있다는 확신이 들었어요. 그렇지만 혼자 성장하는 것은 그 자체로 한계가 있었습니다. 더 나은 솔루션을 성공시키려면, 동료와 문제 인식을 함께 공감할 수 있도록 같이 높은 수준에 올라야 한다는 것을 알게 되었어요.

그래서 저는 제 커리어의 2022년 목표를 "함께 성장하기" 로 정했습니다. 인사이트를 나누고, 생각하는 방식과 일하는 방식을 기록하고, 공유하는데 더 많은 리소스를 쏟으려고 합니다. 그렇다면 가장 좋은 솔루션이 무엇일까요? 불현듯 예전에 있던 제 마음속 짐들을 다시 살펴보게 되었고, 그렇게 블로그를 준비하게 되었습니다.

블로그의 본질

키보드에 손을 올려놓기 전에 고민했어요. 수많은 매체 중에서도 돋보이는 블로그를 만들고 싶었거든요. 저는 돋보이려면 다른 것들보다 기능을 빼야 한다고 생각해요. 그래서 기존의 블로그에서 뺄 게 무엇이 있을까를 고민해보고, 먼저 다음 방법으로 접근했습니다.

• 글을 읽는 독자는 블로그에 어떻게 접근하고 탐험할까

첫 번째로 글을 읽는 독자에 대해서 고민하고, 접근 형태에 대해서 생각해봤어요. 대부분이 검색엔진이나 공유를 통해 상세페이지로 진입할 것이고, 만약 해당 글에서 정보나 인사이트를 얻었다면 바로 이탈하겠다고 생각했어요. 제가 그래왔고 저 스스로 그걸 권장하기도 하고요. 그렇다면 반대로 제 블로그를 즐겨찾기하고, 인덱스 페이지로부터 제 글들을 체계적으로 탐험하거나 검색해서 보는 사람의 수는 어느 정도 될까요? 제 직관이 맞는다면 아마 거의 없을 거예요. 그렇다면 이러한 유저 경험을 고려했을 때 아래 기능은 의미가 있을까요?

• 카테고리
• 태그

유저 경험 안에서 이 기능들은 의미가 전혀 없었어요. 그래서 빼기로 했습니다.

두 번째로 "댓글" 기능은 어떨까요? 저는 이것만큼은 뺄 수 없는 기능이라고 판단했어요. 무엇보다도 저는 소통과 맥락을 중요하게 생각하거든요. 오히려 글 제목이나 글 내용을 빼는 게 상대적으로 더 낫다고 생각할 정도입니다. 이런 관점은 또 다른 생각으로 이어지게 되었어요.

블로그에서 글 내용을 빼고 글 제목만 남기는 아이디어는 오히려 혁신적이라고 생각했고, 여전히 긍정적으로 검토하고 있어요.

"글이 글로써 멈춰있지 않고, 살아 숨 쉬듯 느껴지는 블로그가 있다면, 어떤 모습일까?"

그러면서 "영상" 콘텐츠를 블로그 글에 더해보는 것은 어떨까 하는 아이디어를 떠올렸습니다. 실제로 사내에서 문서 상단에 해당 내용을 설명하는 영상을 함께 올리면 인기가 더해지는 것을 한번 증명해본 적이 있거든요.

그래서 결론적으로 다른 기능은 전부 제외하고 제가 실험하고픈

• 댓글
• 영상 (준비 중)

기능만 추려서 글과 함께 살려보기로 했습니다.

디자인

심플한 형태이지만 제 개인 브랜드를 잘 살릴 수 있도록 신경 썼어요. 글에서 신뢰감이 묻어날 수 있도록 메인 페이지에도 프로필을 넣었고요. 어디서든 글쓴이가 어떤 사람인지 확인할 수 있도록 이력서를 연결했어요. (저는 read.cv를 사용하고 있어요) 그리고 독자에게 진심으로 다가가고 싶은 마음이 전달됐으면 해서 제 솔직한 다짐도 메인 페이지에 담아봤답니다.

"시간이 흐르고 기술이 낡아도 부끄럽지 않은 글이 되기를"

로고는 그 다짐을 잘 표현할 수 있는 수단이 무엇이 있을까 고민하다가 "시간"과 "시계"를 메타포로 사용하기로 했어요. 그리고 무언가 서서히 흘러가는 모습을 애니메이션을 통해 표현하기로 했어요. 직관적이기보다는 추상적이고 은은한 흐름의 느낌을 표현하기 위해 시계의 모습이 연상되는 로고¹보다는 메시 그레디언트를 활용한 로고²로 최종 결정하게 되었습니다. 천천히 무작위로 움직이는 애니메이션을 통해 "시간"에 대한 메타포는 유지했어요.

만들기

자 그러면 이제 키보드에 손을 올려볼 차례인데요. 저는 GraphQL과 React에 매우 익숙한 상태이기 때문에 당연히도 Gatsby를 사용했어요.

• 메인 페이지
• 글 상세 페이지
• 404 페이지

총 3개 페이지를 만드는 과정이 있었고, 대부분의 기능을 제외했기 때문에 코드 양은 매우 적었습니다. 디자인과 코딩까지 합쳐서 1.5일 정도 걸린 거 같네요.

기술적인 시도를 어떤걸 해볼까 하다가 이번에는 CSS Solution으로 Vanilla Extract를 좀 제대로 사용해봤는데요. Functional CSS (a.k.a. Atomic CSS)로 재사용할 유틸 클래스들을 쌓아나가면서 작업하는 경험은 상당히 좋았습니다.

/**
 * Logo.css.ts
 */
import { style } from "@vanilla-extract/css";

// 쌓아놓은 유틸 스타일
import { F } from "../styles";

// 스타일 조각을 선언해요
export const logoSize = style({
  width: "1.5rem",
  height: "1.5rem",
});

// 스타일을 조합해서 사용해요
// (나만의 CSS lodash를 쓰는 느낌이랄까요?)
export const container = style([
  F.flexAlignedCenter,
  F.preventSelect,
  F.borderRadiusCircle,
  logoSize,
]);

/**
 * Logo.tsx
 */
import React from "react";

import * as styles from "./Logo.css";

const Logo: React.FC = () => {
  return (
    <div className={styles.container}>
      <>{/* ... */}</>
    </div>
  );
};

export default Logo;

CSS 번들 사이즈도 덕분에 굉장히 절약할 수 있었습니다. 이 웹사이트의 전체 CSS는 400줄밖에 되지 않는답니다.

배포는 Vercel로 진행했습니다. 별다른 CI 설정도 필요 없이 클릭만 몇 번 하면 빌드부터 배포까지 완료되고, PR을 생성하면 자동으로 Preview 링크도 댓글로 달아줍니다. Gatsby 환경에서 빌드 캐시도 잘 잡아줘서 빌드부터 배포까지 30-40초 내외로 굉장히 빠르네요.

끝내며

커뮤니티에서 이런저런 활동들을 하면서, 단편적인 정보 제공은 언젠가는 낡는다는 생각을 하게 되었어요. 그렇지만 동시에 그 정보가 탄생한 맥락과 생각, 의견, 통찰은 오래 남는다는 생각도 함께 갖게 되었습니다. 낡지 않는 글을 쓰고 싶습니다. 이 마음가짐으로 글을 자주 쓸 수 있을지는 모르겠어요. 어쩌면 부담감에 억눌려서 한동안 새 글이 없을 수도 있습니다. 그렇지만 제가 블로그를 시작한 초심은 거기에 있어요. 큰 꿈일 수 있겠지만 저는 이 블로그가 그저 구글에 스쳐지나는 정보 조각이 아니었으면 좋겠습니다. "아하" 싶은 순간을 만들어드리고 싶고, 이를 통해 함께 성장하는 모멘텀이 제 글이 되었으면 좋겠습니다.

$ git commit -m "Initial Commit"