Search

노션을 활용한 첫 홈페이지 제작과 그 한계

태그
생성 일시
2024/06/11 23:24

1인 사업가를 꿈꾸다

나는 평범한 직장인으로, 지금까지 한 번도 홈페이지를 만들어 본 적이 없다. 티스토리 블로그는 약 10년 동안 사용했지만, 구조나 형식, 호스팅 관리는 모두 티스토리가 대신해 줬기 때문에 신경 쓸 필요가 없었다.
최근, 나만의 웹서비스를 구축하여 1인 사업가가 되고 싶은 꿈이 생기면서, 나만의 홈페이지가 필요하게 되었다. 티스토리로부터 독립하여 모든 것을 스스로 해결해야 할 시기가 온 것이다.

첫 번째 관문: 홈페이지 제작

웹서비스 구축의 첫 번째 관문은 바로 나만의 홈페이지를 제작하는 일이다. 이를 위해 구조와 디자인 측면을 함께 고려해야 한다.

전통적인 방법 vs. 현대적인 방법

과거 전통적인 방법으로 홈페이지를 제작하려면, HTML, CSS, JavaScript 등을 모두 공부해야 했고, 시간도 많이 소요되었다. 하지만 최근에는 인공지능과 노코드 툴의 발전으로 훨씬 쉽게 만들 수 있게 되었다.

노코드 툴의 선택

웹플로우, 프레이머, 피그마, 노션 등 수많은 노코드 툴 중에서 나에게 가장 적합한 도구를 선택해야 했다. 따라서, 이러한 도구들의 특성과 장단점을 파악하는 과정이 필요했다.

홈페이지 목적에 맞는 도구 선정

내 홈페이지의 목적은 웹서비스 구축에 필요한 기술들을 모아서 정리하고, 홍보용 글을 꾸준히 작성하여 브랜드를 구축하고 잠재 고객을 확보하는 것이다. 따라서 콘텐츠 제작과 수정이 용이하고, 지속적으로 콘텐츠를 쌓아갈 수 있어야 한다.

노션 선택

이 목적에 가장 적합한 도구는 노션이었다. 노션은 중요한 아이디어와 자료를 정리하고, 프로젝트와 일정 관리에 특화된 플랫폼으로, 원하는 페이지를 웹에 게시하는 기능도 제공한다. 하지만 화려한 디자인이나 다양한 웹서비스 구축에는 한계가 있다.

홈페이지 제작 과정

도구의 활용

홈페이지 제작 도구로 노션을 선택하고, 홈페이지 헤더 디자인에는 캔바를 이용했다. 각종 이미지와 로고는 챗GPT-4o를 사용했고, 홈페이지 카피도 AI를 적극 활용했다.
현재 내 홈페이지 메인에 사용된 문구들은 AI와의 많은 상의 끝에 만들어졌다. 초안을 AI에게 물어보고, AI의 코칭대로 초안을 만들고, 다시 AI가 검토하는 등 여러번의 피드백을 거쳤다.

디자인과 레이아웃

홈페이지 요소들을 디자인하고 레이아웃하는 과정에서 많은 시행착오를 겪었다. 사용자 경험(UX)과 사용자 인터페이스(UI)를 고려하여 설계해야 했고, 반응형 디자인을 적용하여 데스크톱과 휴대폰 등 어떤 기기에서도 잘 동작하도록 했다.

도메인과 호스팅 선택

노션에 특화된 우피(oopy)를 이용하면 e-navi.oopy.io 와 같은 간편한 주소를 얻을 수 있고, 월 5,900원의 저렴한 비용으로 호스팅 서비스까지 받을 수 있다.
그 밖에도 다양한 기능을 제공하기 때문에, 노션으로 홈페이지를 제작한다면 우피도 함께 이용할 것을 추천한다. 참고로, 우피 회원 가입 시 추천인을 등록하면 추천인과 가입자 모두 50% 할인 혜택을 받는다.
만약, e-navi.me와 같은 나만의 도메인(커스텀 도메인)을 갖고 싶다면 따로 구매해야 한다.

도메인 구매

도메인 등록업체로 나는 ‘호스팅케이알’을 선택했다. 호스팅케이알에서 내 홈페이지 이름에 해당하는 ‘e-navi’로 등록 가능한 도메인을 검색해 보았다.
도메인 검색 결과
위 그림처럼 도메인별로 구매 가격이 다르며, 누군가 사용 중인 경우도 많다.
보통 인기가 많은 .com, .net 등은 이미 사용자가 있었고, 최근 주목받기 시작한 .io, .ai 등은 가격이 높았다. 그래서 챗GPT-4o와 상의한 끝에 e-navi.me, e-navi.co.kr, e-navi.xyz 등 총 3개의 도메인을 구매했다.

도메인별 장단점

".me": 개인화된 서비스나 사용자 중심의 브랜드에 적합.
장점: 기억하기 쉽고 독창적인 도메인이다.
단점: 기업용보다는 개인 블로그나 포트폴리오 등에 더 적합하다.
".co.kr": 한국 시장을 타겟으로 한 경우 신뢰성과 현지화 강조.
장점: 한국 사용자들이 더 신뢰할 가능성이 높다.
단점: 글로벌 사용자를 타겟으로 할 경우, 국가 코드(kr)가 제약이 될 수 있다.
".xyz": 스타트업과 혁신적인 기업들이 많이 사용하는 도메인.
장점: 글로벌 사용자들을 타겟으로 삼을 수 있고, 기억하기 쉽다.
단점: ".com" 등 기존 도메인에 비해 인지도가 낮을 수 있다.

도메인 선택 이유와 전략

내가 이 3개의 도메인을 모두 구매한 이유가 있다.
아직 나만의 웹서비스가 준비되지 않았기 때문에 당장은 개인 브랜드 구축에 유리한 .me가 적합해 보이지만, 언젠가 내가 정말 1인 사업가로 성공할 경우를 대비해 .co.kr과 .xyz도 미리 확보해 두고 싶었다. (다른 사람에게 뺏길 위험이 있음)
챗GPT-4o도 이에 적극 찬성하였다. 브랜드 보호, 특화된 웹사이트 운영, SEO 및 마케팅 등에 유리하고, 미래의 불확실성을 줄일 수 있다고 한다. 초기 비용이 조금 더 들겠지만, 장기적인 관점에서 매우 유리한 전략이라고 하였다.
도메인 구매 내역

도메인과 호스팅의 역할

앞으로 매년 부가세 포함 28,270원을 꼬박꼬박 결제해야 하지만, 왠지 모르게 가슴이 뿌듯하다.
도메인 구입이 끝나면 호스팅 서비스도 신청해야 하는데, e-navi.me의 경우 우피(oopy)와 연결해 놓았고, 나머지 e-navi.co.kr과 e-navi.xyz는 나중에 필요할 때 신청할 계획이다.
아래 내용은 도메인과 호스팅의 역할을 설명한 것인데, 참고할 만하다.
도메인을 구매한 후, 웹사이트를 운영하려면 호스팅이 필요합니다. 도메인과 호스팅은 서로 다른 역할을 합니다:

도메인과 호스팅의 역할

1.
도메인:
도메인은 웹사이트 주소입니다. 예를 들어, "example.com"과 같은 URL입니다.
도메인은 사람들이 웹사이트를 쉽게 찾을 수 있도록 도와줍니다.
도메인을 구매하면, 그 주소를 사용하여 웹사이트에 접속할 수 있습니다.
2.
호스팅:
호스팅은 웹사이트 파일, 데이터베이스, 콘텐츠 등을 저장하고, 인터넷을 통해 사용자에게 제공하는 서버 공간입니다.
웹 호스팅 서비스는 웹사이트가 온라인 상태를 유지하고, 방문자들이 접속할 수 있도록 합니다.

왜 호스팅이 필요한가?

도메인은 웹사이트의 주소일 뿐이며, 실제로 웹사이트의 콘텐츠와 데이터를 저장하고 제공하기 위해서는 호스팅이 필요합니다. 호스팅 없이 도메인만으로는 웹사이트를 운영할 수 없습니다. 호스팅 서비스는 웹사이트의 모든 파일을 저장하고, 사용자들이 웹사이트에 접속할 때 이러한 파일을 제공하는 역할을 합니다.

웹사이트 운영을 위한 기본 단계

1.
도메인 구매:
도메인 등록업체를 통해 원하는 도메인을 구매합니다.
2.
호스팅 서비스 선택:
웹사이트의 요구 사항에 맞는 호스팅 서비스를 선택합니다. 공유 호스팅, VPS 호스팅, 전용 서버 호스팅, 클라우드 호스팅 등 다양한 옵션이 있습니다.
3.
도메인과 호스팅 연결:
도메인 관리 페이지에서 도메인의 DNS 설정을 호스팅 서버의 네임서버로 변경합니다. 이렇게 하면 도메인이 호스팅 서버와 연결됩니다.
4.
웹사이트 구축:
웹사이트 파일을 호스팅 서버에 업로드하고, 필요한 경우 데이터베이스를 설정합니다.
웹사이트 빌더, CMS(예: WordPress) 등을 사용하여 웹사이트를 구축할 수 있습니다.
5.
웹사이트 운영 및 유지보수:
웹사이트를 정기적으로 업데이트하고, 백업을 수행하며, 보안을 유지합니다.

앞으로의 계획

e-navi.me: 개인 브랜드용으로 운영하면서, 저렴한 우피를 계속 이용.
e-navi.co.kr: 향후 웹서비스 구축에 사용, 데이터 저장 및 트래픽 규모에 맞춰 호스팅 플랜 조정.
대규모 데이터 저장과 대규모 트래픽이 어떤 상황을 의미하는지 쉽게 설명해드리겠습니다.

대규모 데이터 저장

대규모 데이터 저장이 필요한 경우는 주로 아래와 같은 상황입니다:
큰 파일 저장: 동영상, 고해상도 이미지, 대용량 문서 등을 많이 업로드하고 저장해야 하는 경우.
데이터베이스 크기: 데이터베이스에 많은 양의 데이터를 저장해야 하는 경우. 예를 들어, 수많은 사용자 정보, 거래 기록, 제품 카탈로그 등을 저장해야 하는 경우.
웹 애플리케이션: 복잡한 웹 애플리케이션을 운영하며, 이 애플리케이션이 많은 데이터를 저장하고 관리해야 하는 경우.

예시:

사진 공유 사이트: 사용자들이 사진을 업로드할 수 있는 사이트를 운영하고 있다고 가정해보세요. 수많은 사용자가 고해상도 사진을 올리면 금방 2GB 용량을 초과하게 됩니다.
온라인 스토어: 수천 개의 제품을 가진 대형 온라인 스토어는 제품 정보, 이미지, 사용자 리뷰 등을 저장해야 하므로 많은 저장 공간이 필요합니다.

대규모 트래픽

대규모 트래픽이 발생하는 경우는 주로 아래와 같은 상황입니다:
많은 방문자: 웹사이트에 하루에 수천, 수만 명의 방문자가 접속하는 경우.
고용량 콘텐츠: 스트리밍 비디오, 음악 등 많은 데이터 전송을 요구하는 콘텐츠를 제공하는 경우.
인터랙티브 웹 애플리케이션: 실시간으로 많은 사용자와 상호작용하는 애플리케이션(예: 실시간 채팅, 온라인 게임 등)을 운영하는 경우.

예시:

뉴스 사이트: 핫한 뉴스가 있을 때 많은 사람들이 동시에 접속하여 기사를 읽고, 동영상을 볼 때 트래픽이 급증합니다.
스트리밍 서비스: Netflix와 같은 동영상 스트리밍 서비스를 운영하면, 많은 사용자들이 동영상을 시청하면서 많은 양의 데이터가 전송됩니다.

왜 중요할까요?

저장 공간 부족: 저장 공간이 부족하면 새로운 파일을 업로드할 수 없게 되고, 사이트 기능에 제한이 생깁니다.
트래픽 제한: 트래픽 용량을 초과하면 웹사이트가 느려지거나, 아예 접속할 수 없는 상황이 발생할 수 있습니다.

대규모 데이터 저장과 트래픽을 처리하기 위한 호스팅 선택

대규모 데이터를 저장하거나 많은 트래픽을 처리해야 하는 경우, 아래와 같은 호스팅 옵션을 고려할 수 있습니다:
VPS 호스팅: 가상 사설 서버를 이용하여 더 많은 자원을 사용할 수 있습니다.
전용 서버 호스팅: 전체 서버를 하나의 웹사이트에 전용으로 사용할 수 있습니다.
클라우드 호스팅: 필요한 만큼 자원을 유연하게 늘리고 줄일 수 있어 트래픽 변동에 유리합니다.

결론

현재 선택한 호스팅 서비스는 소규모에서 중규모 웹사이트에 적합합니다. 대용량 파일을 저장하거나, 하루 수천 명 이상의 방문자를 처리해야 하는 경우에는 더 많은 저장 공간과 트래픽을 제공하는 호스팅 옵션을 고려해야 합니다. 초보자라면, 처음에는 작은 호스팅 플랜으로 시작하여 필요에 따라 더 큰 플랜으로 업그레이드하는 것도 좋은 방법입니다.

현재까지 사용한 도구와 비용

챗GPT-4o: 월 22달러, 원화로 약 3만원
노션: 무료 플랜
캔바: 무료 플랜
호스팅: 우피(oopy) 월 5,900원
도메인 구입비: 연 28,270원

노션으로 첫 홈페이지를 만든 후 깨달은 점

전체적인 구조와 디자인을 고려하고, 홈페이지에 사용할 카피 문구까지 만들어 본 것은 좋은 경험이었지만, 홈페이지가 완성되는 순간 바로 깨달았다. 노션으로 해볼 수 있는 것은 여기까지란 것을...
노션 홈페이지는 홍보나 랜딩페이지로는 활용할 수 있으나, 그 이상은 어렵다. 하위 페이지를 쉽게 만들고 수정할 수 있는 장점이 있지만, 댓글 기능이 없는 등 개인 블로그로 사용하기에도 부족하다. (커뮤니케이션 창구로 쓸 수 없음)
나의 최종 목표는 온라인 쇼핑몰, 온라인 교육, 결제 및 구독, 블로그 포스팅, 게시판 기능, API 활용 등을 포함한 웹서비스 구축이다. 노션은 이러한 기능을 구현하기 어렵고, SEO에도 불리하다. 검색 엔진이 노션 홈페이지를 인식할 가능성도 낮다.
결론적으로, 노션으로 만든 첫 홈페이지는 하나의 '프로토타입'으로 남을 것이며, 곧 두 번째 프로젝트로 넘어갈 계획이다.
오늘은, 여기까지…