누구나 쉽게 기술 블로그 쓸 수 있게 하기: 타다 기술 블로그 2026 리뉴얼

안녕하세요, 타다에서 웹 프론트엔드 개발을 담당하고 있는 우정균입니다.

최근 웹 팀에서는 기술 블로그 디자인을 개선하고 최신 기술 스택을 적용하기 위한 블로그 리뉴얼 프로젝트를 자체적으로 진행했습니다. 이번 글에서는 단순한 블로그 리뉴얼 과정에 그치지 않고, '어떻게 하면 팀원들이 글을 더 쉽게 쓰고 발행할 수 있을까?'라는 고민과 이를 실행에 옮긴 과정을 공유하려 합니다.

이번 리뉴얼은 웹 팀에서 기획부터 디자인, 개발까지 모두 담당해 진행했습니다. 다양한 AI 도구로 팀원 간 싱크를 맞춰갔고, 사용한 도구들은 다음과 같습니다.

• 기획 (Gemini): 정통적인 기획서 작성이라기보다는 구현 아이디어 가능성 검증과 시나리오 정리 위주로 활용했습니다. Gemini와 수차례 대화를 주고받으며 했던 논의 사항들을 모두 하나의 문서로 정리했고, 이 문서는 다음 단계 다른 도구들의 기준점이 되는 컨텍스트 덩어리가 되었습니다.
• 디자인 (Stitch): 다양한 AI 디자인 도구들을 사용해봤고, 최종적으로 Figma Make와 Stitch를 두고 고민했습니다. Figma Make는 결과물을 React 코드로 웹 형태로 보여주는 장점이 있지만, 코드를 거쳐 표현되는 과정에서 디자인 디테일이 약간 아쉬운 느낌을 받았습니다. 반면 Stitch는 시안 자체의 완성도에 집중하기 좋았습니다. 코드는 어차피 직접 제어할 계획이었으므로 표현력이 좋은 Stitch를 선택했습니다.

  

• 개발 (Next.js + Claude Code): 기획서와 시안을 Claude Code에 전달해 전체 프로젝트 구조와 디자인 시스템을 잡았습니다. 블로그 프레임워크로는 Next.js를 선택했습니다. 팀원들에게 가장 익숙한 스택이기도 했지만, 정적 페이지(SSG)와 후술할 API Route를 한 프로젝트 안에서 관리한다는 점이 적합하다고 판단했습니다.

위와 같은 AI 도구들의 도움으로 프로젝트는 순식간에 진행됐고, 블로그 사이트 구현 자체는 금방 마칠 수 있었습니다. 다만 이번 리뉴얼 프로젝트를 단순한 UI 디자인 변경과 기술 스택 개편으로만 끝내고 싶지는 않았습니다.

기존 블로그가 가진 구조적인 문제점도 함께 개선하고 싶었습니다. 기존 블로그는 글을 하나 작성하고 발행하기까지의 과정이 꽤 번거로웠고, 이는 팀원들이 글을 쓰는 데 느끼는 심리적 진입 장벽을 높이는 주요 원인이었습니다.

기존 타다 기술 블로그에 글 한 편을 올리려면 다음과 같은 7단계를 거쳐야 했습니다.

1. 썸네일 요청: 사내 채널로 브랜드 디자인팀에 이미지 요청
2. 환경 세팅: 블로그 GitHub 레포지토리 클론 및 개인 브랜치 생성
3. 글 작성: 마크다운(Markdown) 양식에 맞춰 본문 작성, 이미지 첨부 시 이미지 경로 수동 매핑
4. PR 생성: GitHub에 푸시 후 Pull Request 생성
5. 리뷰: 팀원들의 코드 리뷰 및 피드백 반영
6. OG 이미지 업로드: 별도 정적 서버에 이미지 직접 업로드
7. 배포: main 브랜치 머지 후 실서버 자동 배포

단계가 많아 번거로운 것은 물론, 모든 과정이 GitHub 사용 경험과 마크다운 문법을 알아야 한다는 점이 큰 장벽이었습니다.

기술 블로그라고 해서 꼭 개발자만 글을 써야 할 필요는 없다고 생각합니다. 디자이너, PO 등 비개발 직군도 공유하고 싶은 인사이트가 있다면 개발자의 도움 없이 언제든 쉽게 글을 쓰고 발행하는 환경을 만들고 싶었습니다.

처음에는 글 작성과 발행을 관리할 어드민 시스템을 직접 개발하려 했습니다. WYSIWYG 에디터 라이브러리를 탑재하고 코멘트 기반의 리뷰 시스템과 권한 관리 기능을 구현할 계획이었습니다.

다만 구체적인 작업 범위를 산정해 보니 생각보다 리소스가 많이 필요했습니다. 에디터의 안정성 및 사용성, 자동 저장, 이미지 처리, 동시 편집, 권한 제어 등 고려해야 할 요소들이 꽤 많았고, 사이드 프로젝트 성격으로 진행한 프로젝트였기 때문에 배보다 배꼽이 더 클 수도 있는 상황이었습니다.

이 시점에 대안으로 떠오른 것이 노션이었습니다. 노션은 이미 개발자뿐만 아니라 모든 팀원들에게 매우 익숙한 도구였고 에디터의 사용성도 검증되어 있었습니다. 또한 공식 API를 제공하고 있어 외부 시스템과 연동하기 위한 확장성도 충분했습니다.

저희는 바퀴를 다시 발명하지 않기로 했고, 이미 잘 만들어진 노션의 인프라를 통해 고민이 되었던 에디터 시스템 구현 문제를 해결했습니다. 글 작성과 리뷰는 노션에 맡기고, 웹 팀은 노션 데이터를 블로그로 실어나르는 발행 시스템 구현에만 집중하기로 방향을 전환했습니다.

별도의 어드민 사이트를 만드는 대신, 글을 쓰는 노션 페이지 안에서 발행까지 처리하는 구조를 설계했습니다.

노션 데이터베이스를 글 저장소로 삼고 Title, Slug, Category, Status, CoverImage 등 발행에 필요한 메타데이터를 컬럼(속성)으로 정의했습니다. 카테고리나 태그를 추가할 때 코드를 수정할 필요 없이 노션에서 옵션만 바꾸면 되므로 운영이 편리해졌습니다.

아티클 하단의 댓글 기능 역시 별도 DB 없이 노션 API로 구현했습니다. 독자가 댓글을 쓰면 노션 댓글 DB에 새로운 행으로 추가되는 방식입니다. 덕분에 외부 데이터베이스 인프라를 세팅하고 관리하는 부담을 없앨 수 있었습니다.

노션의 버튼 블록 기능을 활용했습니다. 노션 버튼은 클릭 시 외부 URL로 웹훅(Webhook) 요청을 보냅니다.

글 작성을 위한 페이지 템플릿에 [발행하기], [분석하기], [맞춤법 검사] 등 버튼을 배치하고, 이 버튼들을 Next.js의 API Route 엔드포인트와 연결했습니다.

글쓴이가 노션에서 버튼을 누르면 서버가 이를 트리거로 인식해 필요한 로직을 수행합니다. 덕분에 별도의 관리 UI를 만들지 않고도 노션 페이지 안에서 발행 시스템을 제어하게 되었습니다.

[발행하기] 버튼을 눌렀을 때 내부적으로 처리되는 과정은 다음과 같습니다.

1. 발행 전 검증: 노션 API로 페이지 메타데이터를 읽고 필수 값/리뷰어가 채워져 있는지 확인합니다. 조건이 맞지 않으면 노션 페이지 내 결과 창에 사유를 기록하고 발행을 중단합니다.
2. 데이터 정적화: 발행 시점에 노션 API로 본문 데이터(노션 페이지)를 가져와 해당 데이터를 JSON 정적 파일로 변환해 저장합니다. 실제 블로그는 이 정적 파일로 화면을 빠르게 렌더링합니다. 정적 파일로 전환함으로써 SEO 성능을 높이고, 빠른 페이지 전환이 가능하게 됩니다.
3. 이미지 처리: 노션이 호스팅하는 이미지 URL은 일정 시간이 지나면 만료됩니다. 그래서 발행 과정에서 본문 이미지를 다운로드해 블로그 프로젝트 내 정적 파일 디렉터리에 저장하고, 본문 안의 URL을 로컬 경로로 매칭하여 자동 치환하도록 구현했습니다.
4. 단일 커밋 처리: 글 한 편에 포함된 데이터와 여러 이미지를 파일별로 푸시하면 커밋 히스토리가 복잡해집니다. GitHub Git Tree API로 모든 변경 사항을 하나의 커밋으로 묶어 main 브랜치에 직접 푸시해 빌드가 깨지는 현상을 방지했습니다.

이후 GCP가 변경 사항을 감지해 자동으로 빌드/배포를 수행하며, 몇 분 뒤 라이브 서버에 반영됩니다. 레포지토리에 저장된 본문 JSON은 빌드 시점에 SSG(Static-Site-Generation)로 처리되며, 직접 구현한 <NotionBlocks/> 컴포넌트로 노션 블록 타입에 맞춰 알맞은 UI를 렌더링합니다.

노션 버튼과 API를 연결하는 구조를 잡아두니 부가 기능을 확장하기도 수월했습니다.

• 분석 및 메타데이터 자동 완성: [분석하기] 버튼을 누르면 Gemini가 본문을 파악해 요약문, 슬러그, 카테고리, 태그, 예상 읽기 시간을 추론하고 노션 페이지 속성에 자동으로 채워줍니다.

• 맞춤법/문맥 AI 검사: [맞춤법 검사] 버튼을 누르면 Gemini가 찾은 오류와 문맥 수정 제안을 노션 페이지 상단의 콜아웃 블록에 리스트 형태로 보여줍니다.

• 실시간 미리보기: 노션 데이터를 실시간으로 읽어와 실제 블로그 UI로 보여주는 임시 미리보기 링크를 생성해 줍니다.
• 썸네일 자동 생성: [썸네일 생성] 버튼을 구현했습니다. Gemini가 본문을 요약해 프롬프트를 작성하면 Imagen 모델이 16:9 비율 이미지를 생성하고 노션 커버 이미지로 등록합니다. 단색 배경, 3D 오브젝트 활용 등의 스타일 가이드를 프롬프트에 포함해 톤앤매너를 일정하게 유지했습니다.

현재 제공하는 기능 외에도, 목차만 나열하면 초안을 작성해준다거나, 적절한 글 구조를 제안하는 등 AI를 활용한 글쓰기 보조 도구들을 추가할 예정입니다. 기능을 확장하기 쉬운 구조로 설계한 만큼, 앞으로도 팀원들이 글을 쓰는 과정에서 느끼는 불편함을 찾아 꾸준히 기능을 보충해 나갈 계획입니다.

지금 읽고 계신 이 글도 노션에서 작성되었습니다. 글 작성을 마친 뒤 상단의 [발행하기] 버튼을 누르면 잠시 후 라이브 서버에 반영될 예정입니다.

이번 프로젝트의 핵심은 이미 잘 만들어진 도구를 활용하고, AI를 적재적소에 연결해 프로세스를 단순하게 만드는 데 있었습니다. 덕분에 git이나 마크다운을 익히지 않아도 노션 안에서 글쓰기와 발행을 마칠 수 있게 되었습니다.

앞으로 다양한 직군의 팀원들이 이 환경에서 유익한 인사이트를 더 편하게 공유할 수 있기를 기대합니다. 감사합니다.