이건 제 이야기입니다 — 이 홈페이지, 노션으로 직접 만들었습니다. 노션을 전문으로 다루고 구글 시트 HTML을 만지며 사는 사람이, 한국 서비스 우피를 만나 내 스타일대로 놀아본 후기입니다.
이번엔 내 스타일대로 만들어보고 싶었습니다
사실 회사 홈페이지는 이미 노션 홈페이지를 제작하는 외국 플랫폼을 통해 잘 운영하고 있습니다. 그러니까 이번 프로젝트는 "홈페이지가 없어서"가 아니라, 한국 업체를 써서 내 스타일대로 자유롭게 만들어보자는 즐거운 실험에 가까웠습니다.
게다가 저는 노션을 전문으로 다루고, 구글 시트에서 HTML 코드도 오래 다루어왔습니다. 노션 페이지를 그대로 웹사이트로 바꿔주는 우피(Oopy)를 발견했을 때 나중에~ 한번 해보자 했는데. 게흘러서 그런지 3년이 지난 이제서야 만들었습니다. ㅠㅠ 사실 제작은 도메인 구매 및 연결까지 3시간도 안걸렸습니다.
조합은 이렇습니다: 노션 + 우피
역할 | 도구 | 비용 |
콘텐츠 작성·관리 | 노션 | 무료 |
도메인 연결·사이트 변환 | 우피(Oopy) | 월 5,900원 |
구조는 간단합니다. 노션에서 페이지를 쓰면, 우피가 그 페이지를 진짜 웹사이트처럼 보여줍니다. 커스텀 도메인 연결, 메뉴, 검색 노출 설정까지 우피가 처리해 줍니다.
•
글 수정이 필요하면? 노션에서 고치면 끝. 사이트에 바로 반영됩니다.
•
새 사례를 올리고 싶으면? 데이터베이스에 한 줄 추가하면 끝.
•
유지보수 걱정은? 서버도 코드도 없으니 걱정할 대상 자체가 없습니다.
그런데 "노션 티"가 나는 게 싫었습니다
노션 사이트의 유일한 아쉬움은 어딜 가나 비슷해 보인다는 것. 그래서 꺼낸 카드가 HTML 블록 활용 전략입니다.
1.
첫인상은 HTML로. 메인 상단의 히어로 배너(큰 제목 + 버튼)는 HTML과 CSS로 직접 만들었습니다. 그라데이션 배경, 둥근 버튼, 호버 효과까지 넣으면 "어? 이거 노션 아닌데?" 소리가 나옵니다.
2.
콘텐츠는 노션 블록으로. 글, 데이터베이스, 토글처럼 자주 고치는 부분은 순수 노션으로 남겨뒀습니다. 꾸미는 건 HTML, 운영하는 건 노션 — 이 분리가 핵심입니다.
3.
버튼에는 진짜 링크를. HTML 버튼에 문의 폼, 사례 페이지 주소를 연결하면 방문자 동선이 자연스럽게 이어집니다.
지켜야 할 규칙
•
규칙 1: HTML은 얼굴(메인 배너·소개·문의 영역)에만 쓴다. 본문까지 HTML로 만들면 수정이 지옥이 된다.
•
규칙 2: 자주 바뀌는 콘텐츠는 반드시 노션 데이터베이스로 관리한다. 글 하나 올리는 데 코드를 열어야 한다면 실패한 구조다.
•
규칙 3: 모바일 화면을 꼭 확인한다. HTML 영역은 화면 크기에 따라 깨질 수 있으니 작은 화면 기준으로 한 번 더 본다.
솔직한 결론
•
제작 기간: 주말 이틀 — 노션과 HTML에 익숙하다면 개발이라기보다 놀이에 가깝습니다
•
비용: 월 5,900원 — 부담이 없으니 실험도 마음껏 할 수 있습니다
•
만족도: 내 스타일대로 만들고, 노션에서 바로 고치는 이 자유가 최고입니다
홈페이지의 본질은 화려한 디자인이 아니라 "꾸준히 업데이트되는 콘텐츠"입니다. 관리가 쉬워야 콘텐츠가 쌓이고, 콘텐츠가 쌓여야 홈페이지가 삽니다. 노션 + 우피는 그 본질 위에서 내 스타일을 마음껏 펼치게 해준 조합이었습니다.