Hot Page - 그래픽 사이트 빌더

 (hot.page)
4P by GN⁺ | ★ favorite | 댓글 1개
  • Hot Page는 실제 HTML, CSS, JavaScript를 쓰면서도 시각 도구와 드래그앤드롭으로 웹사이트를 만들 수 있는 그래픽 코드 편집기임
  • “no code”의 제약 대신 yes code를 표방하며, 템플릿 의존보다 페이지 소스 코드를 보고 복사·리믹스하는 제작 방식을 강조함
  • 단순 사이트는 무료로 만들고 자체 도메인을 연결할 수 있으며, 더 많은 옵션이 필요할 때만 업그레이드하는 모델임
  • 만든 사이트는 다운로드해 다른 곳에 호스팅할 수 있고, 프런트엔드 프레임워크·커스텀 엘리먼트·웹 플랫폼 API·오픈소스 코드 조각도 활용 가능함
  • 웹 표준 위에서 작업하며 웹 개발 기술을 익히는 흐름이라, 별도 추상화나 새 편집기 인터페이스를 배워야 하는 부담을 줄임

실제 코드 기반의 시각적 제작

  • Hot Page는 웹사이트를 만들 때 실제 HTML, CSS, JavaScript를 사용하는 그래픽 사이트 빌더임
  • 편집기는 드래그앤드롭 코드 편집기와 시각 도구를 결합해, 처음부터 고유한 디자인을 만들 수 있게 함
  • 바로 써볼 수 있는 에디터 체험을 제공하며, 무료 웹사이트 생성은 가입 페이지에서 시작할 수 있음
  • 템플릿을 제공하지 않는 대신 모든 페이지의 소스 코드를 볼 수 있고, 이를 복사해 어디서든 리믹스할 수 있음
  • 필요한 기능은 인터넷의 프런트엔드 프레임워크, 커스텀 엘리먼트, 코드 조각, 오픈소스 구현을 가져와 붙일 수 있음

배포와 소유권

  • 단순 사이트는 무료로 만들 수 있고 자체 도메인도 무료로 사용할 수 있으며, 더 많은 옵션이 필요할 때만 업그레이드하면 됨
  • Hot Page에서 떠나고 싶을 때는 사이트를 다운로드해 가져갈 수 있고, 어디서든 호스팅할 수 있음

웹 개발 학습에 맞춘 흐름

  • 웹 개발 입문자는 사이트를 만들면서 코딩을 배울 수 있고, 이미 웹 개발을 아는 사용자는 기존 지식으로 바로 사용할 수 있음
  • 핵심 웹 기술을 그대로 쓰기 때문에 새 추상화나 편집기 인터페이스를 익히는 부담이 줄고, 웹의 하위 호환성도 장점으로 강조됨
  • 추천문은 깨끗한 시맨틱 코드 출력, 12컬럼 반응형 레이아웃 제작, 빠른 랜딩 페이지 조정, 새 CSS 기능과 웹 플랫폼 API 사용, 즉시 로드되는 반응형 사이트 출력을 장점으로 꼽음
  • HotFX library는 색상과 모션을 더하는 특수 효과 컬렉션임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Hot Page를 만든 Tim임. 오래된 사이드 프로젝트였고, 지금은 친구 몇 명의 도움을 받아 부트스트랩으로 키우는 중임
    목표는 Squarespace나 Wix 같은 끌어다 놓기 편집기의 편리함을 가져오되, HTML 요소와 CSS 규칙 같은 웹 페이지의 기본 구성요소와의 연결은 잃지 않는 것임. Web Components의 등장으로 이 모델이 훨씬 강력해졌다고 봄
    원래는 몇 달 뒤 직접 HN에 올릴 생각이었는데, 지금 편집기를 훨씬 강력하게 만들 기능들을 작업 중임. 시각적으로 CSS 속성을 더 많이 편집하되 생성되는 CSS와 1:1 연결을 유지하는 기능, :hover와 미디어 쿼리를 쓸 수 있는 요소별 인라인 CSS 편집기, 왼쪽 패널에 기본 요소와 함께 들어갈 코드 조각 라이브러리, Web Components와의 더 긴밀한 통합, VS Code 언어 서버를 통한 정확한 자동완성 등을 계획하고 있음
    HN은 오래 눈팅해 왔고 이 커뮤니티를 좋아해 왔음. 특히 마케팅이 정말 어려운 과제로 드러나고 있어서, 생각과 피드백을 모두 환영함

    • microflash가 먼저 치고 나왔으니 나도 덧붙임. https://fx.hot.page/에 Web Components 몇 개가 있음
      slinky는 바보 같지만 재미있고, 갤러리 컴포넌트는 꽤 멋짐. 가볍고 쓰기 쉬워 보였고, 무슨 일이 일어나는지 자세히 풀어 쓴 주석 달린 소스 코드 페이지가 인상적이었음. 뛰고 소용돌이치고 여러 색으로 빛나는 텍스트가 미션이라면, 강점은 직접 쓴 문서화 쪽으로 보임
    • Web Components와 시각적 앱 빌더의 조합은 정말 매력적인 영역임. 나도 비슷한 것을 만들고 있어서 더 많은 접근이 나오는 게 반가움
      스타일이 명백히 훌륭하고, 그 감각이 고객 사이트에도 스며들어 웹에 더 재미있고 우스꽝스럽지만 실제로 쓸 수 있는 것들이 많아지면 좋겠음
      시각적 빌더와 병행해 Web Components 카탈로그와 custom elements manifest 검증기도 만들고 있음. 이런 도구들이 쓸 수 있는 고품질 Web Components가 늘어나고, 카탈로그도 빌더 안에 임베드 가능해지면 좋겠음
    • HN 출시 계획을 망쳐서 미안함. 우연히 발견했는데, 웹에서는 이런 우연이 생기곤 하니까, 멋져 보여서 여기 올려버렸음. 앞으로 나올 것들이 기대됨
    • 평범한 순정 웹을 좋아하는 입장에서, 현재의 hot.page가 전부 마음에 듦. 드디어 개성 있는 웹 자산이 나왔다는 느낌임
      커뮤니케이션과 문서화가 좋다는 AstroJetson의 말에 동의함. 가격제와 무료 플랜에도 커스텀 도메인 지원을 넣은 점도 좋음. 이런 것들을 보면 괜찮은 사람들 같고 응원하게 됨
    • HyperCard를 떠올리게 하는 스타일이 정말 마음에 드는데, 어떻게 만든 건지 궁금함
      완전히 0부터 시작했는지, 아니면 기반으로 쓴 기존 CSS 키트가 있었는지 궁금함

  • 둘러보다가 쇼케이스 예시 중 https://alice.hot.page/를 발견했는데, 진짜로 5분 동안 이상한 나라의 앨리스를 읽고 있었음. 시간을 어떻게 쓰고 있는지 좀 돌아봐야 할 것 같음

    • 아래로 계속 내려가는 스크롤 효과가 정말 멋졌음. 알려줘서 고마움

  • 꽤 좋아 보임. 이상하게도 거의 20년 전 학생 시절로 돌아간 느낌이 들었음. 도메인 이름을 살 돈은 없었지만 월드 와이드 웹에 웹사이트 몇 개를 만들고 싶었음
    무료 호스팅을 찾다가 Geocities를 알게 됐지만, 거기는 foo.geocities.com 같은 하위 도메인이 아니라 geocities.com/foo 같은 경로 아래에 사이트가 호스팅됐음
    결국 이름 그대로 20MB 무료 호스팅 공간을 제공하던 20m.com을 발견했고, 가장 좋았던 점은 내 웹사이트를 하위 도메인 아래에 공개할 수 있었다는 것임
    놀랍게도 그때 만든 사이트 하나가 아직도 살아 있음: http://encoders.20m.com/ 내용은 판단하지 말아줬으면 함. 어렸고 순진했고 그냥 웹을 가지고 놀던 때였음

    • 2002년에 나도 비슷했음. Geocities는 못 봤고 바로 freeservers.com을 찾아서 davinder.8m.net 사이트를 만들었는데, 아직도 살아 있음
      2007년부터 2022년까지 비밀번호를 잃어버렸다가, Yahoo 이메일 계정을 복구하면서 다시 찾았음

  • 여기서 쓰는 미학이 마음에 듦. 같은 결의 다른 프로젝트인 https://mmm.page/가 떠오름

  • 자체 호스팅도 가능한 오픈소스 콘텐츠 조작 시스템 Hotglue[1]에서 영감을 받은 건가 싶음
    [1]https://hotglue.me/

    • Hot Page는 내 프로젝트인데, 어쩌다 보니 Hot Glue는 모르고 있었음. 지금 살펴보니 겉보기에는 비슷하지만 실제로는 다르다고 봄
      Hot Page는 추상화를 쓰지 않는 시각적 끌어다 놓기 웹 편집기라서, 사용하는 내내 결과 DOM 전체를 완전히 제어할 수 있음. 모든 요소, 중첩, 속성, CSS 규칙 등을 직접 다룰 수 있는 셈임. 그래서 실제 사이트를 만들기 위한 CodePen 같은 느낌임. 이 철학에 대해서는 여기 더 써뒀음: https://hot.page/takes/picking-the-right-abstraction
    • 별로 비슷하다고 생각하지 않음. 개인적으로는 90년대에 잠깐 인기가 있었던 오래된 HTML/페이지 편집기 HoTMeTaL이 떠올랐음
      페이지를 시각적인 준 WYSIWYG와 준 요소 트리 모드로 보여주는 비슷한 접근이 있었음
    • 나도 처음 떠올린 건 Hotglue였음. 섹션을 편집해 사용자 코드와 스타일을 넣을 수 있는, 진짜 자유형 웹 디자인 도구였음
      설치도 대체로 PHP가 되는 웹 서버에 폴더 하나 넣는 것 말고는 필요 없었음. 몇 달 전에 리뷰 글도 썼음: https://rafichaudhury.com/site/blog/Freehand-Web
    • 이미 누가 먼저 말했네. 원래 프로젝트와 관련이 없다면 이름을 그렇게 비슷하게 쓰지 말았어야 한다고 봄. 닫힌 소스 Hotglue 복제판/SaaS/영감작처럼 보임
      어쨌든 Hotglue가 지난 몇 년간 개발이 멈춰 있는 건 아쉬움. 친구 몇 명은 개인 사이트에 아직 쓰고 있음
    • HoTMetaL이나 HotDog도 떠오름. 둘 다 90년대 HTML 편집기였음

  • 이상하고 번쩍이는 유행이 돌아와서 반가움. 너무 오래 깔끔하고 평평한 디자인의 세계에 머물러 있었음
    이제는 좀 더 자의식이 있고 냉소와 자기비하도 피할 수 없지만, 그게 포스트모더니즘이라는 생각도 듦

  • 디자인과 소통 방식이 정말 좋음. 나와 제품 둘 다 팬이 되게 만들었음
    처음에는 HN 제목보다 제품이 훨씬 더 흥미로울 것 같다는 느낌 때문에 클릭했음. 사이트에 들어가자마자 “드디어 합의로 다듬어진 디자인을 벗어나는 걸 두려워하지 않는 사람이 있구나”라는 느낌이 들었고, 계속 과감했으면 좋겠음
    이 디자인을 좋아할 사람들을 알고 있다는 생각도 들었음. 친구들 사이트를 만들어 달라는 부탁을 자주 받지만, 시간과 유연성 부족, 작은 사업체가 자기 도메인으로 운영하기엔 짜증 날 정도로 높은 비용 때문에 자주 거절해야 했음. 랜딩 페이지를 보니 딱 그걸 제공하려는 것 같았음. 개발자로서는 빠르게 만들 수 있고, 보기 좋고, 비용도 많이 안 드는 방식이 가능해 보임
    HN 스레드를 읽기 시작하고는 얼마나 진정성 있고 현실적인 사람처럼 보이는지 놀랐음. 제품을 써보고, 불완전함도 참고 기다릴 생각임. 가입하는 사람들과 지금 HN에서처럼 계속 소통한다면, 당신과 제품을 밀어주고 싶어 하는 팬이 많이 생길 것 같음

    • 고마움. 사실 거의 혼자 고립된 상태로 만들어 왔기 때문에 이렇게 열정적인 피드백을 받으니 정말 좋음
      Hot Page는 내 자원으로 부트스트랩하는 데 진심이라, 누구도 디자인을 더 평범하게 만들라거나 고객을 착취하는 방향으로 압박할 수 없게 하고 싶음. 물론 프로그래밍 전부와 마케팅 대부분을 직접 하는 건 쉽지 않았음
      지금은 베타 버전을 써보고 피드백을 줄 수 있는 고객이 정말 필요함. 지원해줘서 고마움

  • 토요일 이른 아침에 내 Geocities 페이지를 떠올리게 해줘서 고마움. 빙글빙글 도는 공사 중 표지판도 추가할 수 있으면 좋겠음. 그런 게 제일 좋았음

    • 이전 홈페이지를 봤어야 함: https://old.hot.page/ Web 1.0에 고개를 끄덕이는 아이디어가 정말 좋았지만, 조금은 너무 투박했음
    • 내 프로젝트가 아니라 바꿀 수는 없지만, 나도 Geocities 느낌을 받아서 올렸음

  • 가격을 보니 월 9달러에 대역폭 5GB인데, 비합리적으로 비싸게 들림

    • 이건 S3가 아님. 대역폭은 그냥 요금제를 나누는 기준 중 하나일 뿐임

  • 개인적으로 이름은 별로라고 말해도 될지 모르겠음. 여성들은 자기 이름을 하위 도메인에 넣는 걸 망설일 것 같음

    • “Hot”이 항상 “섹시함”을 뜻하지는 않음. 실제 웹사이트를 한 번 보면 그 점이 아주 분명함
      다만 Neocities 같은 곳에서 호스팅하는 걸 더 선호할 수는 있음. 그건 Neocities에 고양이가 있고 전체적으로 더 귀엽게 보이기 때문일 가능성이 큼
    • Hotmail도 그 이름으로 잘 됐음
    • 초기 HTML 편집기 중 하나인 HoTMetaL이 떠올랐음
    • 그래도 커스텀 도메인을 쓸 수 있다고 되어 있음
답변달기