본문으로 건너뛰기
DEVKBS
작업 원장
013Roowa2024.04 · 약 3주운영 중

Roowa 기업 웹사이트 리뉴얼

Notion을 CMS로 삼은 첫 시도

기간
2024.04 · 약 3주
분류
웹사이트
역할
프론트엔드 단독
구성
디자인 1 · 프론트엔드 1
사이트 방문
Roowa 기업 웹사이트 리뉴얼 데스크톱 화면
Roowa 기업 웹사이트 리뉴얼 모바일 화면

01개요

기업 사이트를 만들 때 늘 반복되는 문제가 있습니다. 사이트를 넘겨주고 나면 '이 문구 좀 바꿔주세요' 요청이 계속 들어옵니다. 그렇다고 작은 사이트에 관리자 시스템을 붙이는 것은 배보다 배꼽이 큽니다.

이 프로젝트에서는 Notion을 CMS로 써 보기로 했습니다. 클라이언트는 이미 Notion을 쓰고 있었고, 새 도구를 배울 필요가 없다는 점이 결정적이었습니다. 개발자는 API로 데이터를 읽어 오기만 하면 되니 별도의 백엔드도 필요 없었습니다.

결과적으로 3주 만에 리뉴얼을 끝냈고, 그 뒤로 문구 수정 요청이 오지 않았습니다. 이 구조가 실제로 통한다는 걸 확인한 뒤 계열사 사이트인 roowaint.kr에도 같은 방식을 적용했습니다.

02기술 결정

문제가 무엇이었고, 무엇을 골랐고, 그래서 어떻게 됐는지.

  1. 결정 01

    별도 CMS를 만들지 않고 Notion을 쓴다

    문제
    소규모 기업 사이트에 관리자 시스템을 만들면 개발·운영 비용이 사이트 자체보다 커집니다. 그렇다고 하드코딩하면 수정 요청이 영원히 개발자에게 돌아옵니다.
    선택
    클라이언트가 이미 쓰고 있는 Notion 데이터베이스를 콘텐츠 원본으로 삼고, Notion API로 읽어 렌더링했습니다.
    결과
    관리자 화면 개발 비용이 0이 됐고, 클라이언트는 학습 없이 콘텐츠를 관리합니다. 이후 프로젝트에서 재사용할 수 있는 패턴이 하나 생겼습니다.
  2. 결정 02

    Notion 응답을 그대로 화면에 넘기지 않는다

    문제
    Notion API 응답은 블록 구조가 깊고 속성 이름이 사람이 정한 한글 문자열입니다. 이걸 컴포넌트가 직접 다루면 화면 코드가 노션 구조에 묶입니다.
    선택
    응답을 도메인 타입으로 변환하는 단계를 두고, 화면은 변환된 결과만 받게 했습니다.
    결과
    노션 쪽 속성 이름이 바뀌어도 변환 함수만 고치면 됩니다. 이 경계 덕분에 다음 프로젝트로 코드를 옮길 수 있었습니다.
  3. 결정 03

    빌드 시점에 굽고, 필요할 때만 다시 굽는다

    문제
    매 요청마다 Notion API를 호출하면 느리고, API 요청 한도에도 걸립니다. 그렇다고 완전 정적으로 만들면 수정이 반영되지 않습니다.
    선택
    페이지를 정적으로 생성하되 revalidate 주기를 두어 주기적으로 다시 굽게 했습니다.
    결과
    사용자는 정적 페이지 속도로 보고, 클라이언트의 수정은 정해진 주기 안에 반영됩니다.

03주요 기능

  • Notion API 연동

    회사 소개·서비스·공지를 Notion 데이터베이스에서 가져와 동적으로 표시.

  • 문의 메일 기능

    서버 액션과 Nodemailer로 사이트에서 바로 문의 메일을 보냅니다.

  • 반응형 레이아웃

    모바일·태블릿·데스크톱에서 각각 읽기 좋은 밀도로 재구성.

04화면

Desktop

Mobile · 반응형

  • Roowa 기업 웹사이트 리뉴얼 모바일 화면 1

    01

  • Roowa 기업 웹사이트 리뉴얼 모바일 화면 2

    02

  • Roowa 기업 웹사이트 리뉴얼 모바일 화면 3

    03

  • Roowa 기업 웹사이트 리뉴얼 모바일 화면 4

    04

05회고

'만들지 않는 것'도 설계라는 걸 배운 프로젝트였습니다. 관리자 시스템을 만들지 않기로 한 결정이 이 프로젝트에서 가장 큰 기술적 판단이었고, 결과적으로 개발 기간과 이후의 유지보수 비용을 모두 줄였습니다.

외부 서비스를 CMS로 쓸 때는 그 서비스의 스키마가 곧 우리 데이터 모델이 된다는 위험이 있습니다. 변환 층을 처음부터 둔 것이 이후 계열사 사이트를 3주 만에 만들 수 있었던 이유였습니다.