Webflow(일본어)

HTML 코드를 내보낼 수 있는 노코드 툴 비교|무료 추천도

HTML 코드를 내보낼 수 있는 노코드 툴 비교|무료 추천도
코드 내보내기
코드 내보내기란 노코드 툴로 구축한 웹사이트를 HTML·CSS·JS 등의 코드 파일로 출력하는 기능입니다. 툴에 묶이지 않고 자체 서버에서 사이트를 운영할 수 있으며, 기업에 코드를 납품할 때도 사용됩니다.

안녕하세요, Webflow 전문으로 사업을 하는 마사토입니다.
이번에는 이런 궁금증에 답해 봅니다.

  • 노코드로 만들고 HTML로 내보내고 싶은데 선택지가 있을까?
  • 실제로 코드를 내보내 사이트를 납품할 수 있을까?
  • 실제로 코드 내보내기를 쓰는 사람의 의견이 궁금하다.

당사는 노코드 웹 개발 툴 "Webflow"로 웹 제작과 외부 툴 도입 지원을 하고 있습니다. 그 과정에서 코드를 내보내 기업에 납품한 경험도 있어 그 사례도 함께 소개합니다.

그럼 노코드 툴을 소개하겠습니다.

코드 내보내기가 가능한 노코드 웹 개발 툴

현재 노코드 중 코드 내보내기가 가능한 것은 많지 않습니다. 안정적인 지원을 제공하는 것은 많아야 2〜5개 정도입니다.

이번에는 코드 내보내기 기능이 있는 툴만 소개합니다.

  • Tip: 제작 툴에 묶이면 웹사이트를 잃을 수도 있습니다. 반드시 코드 내보내기가 가능한 웹 개발 툴을 사용합시다. 당사는 노코드의 단점을 해설한 글도 공개하고 있습니다.

Webflow: 웹 디자이너를 위한 웹 개발 툴

코드 내보내기가 가능한 웹 디자인 툴 Webflow의 홈페이지

당사가 전문으로 사용하는 Webflow. 사이트 제작에 특화되어 구축부터 공개·운영까지 모두 할 수 있습니다.

코드 내보내기는 HTML·CSS·JS 전부를 Zip 파일로 한 번에 출력할 수 있습니다.

2021년 시점의 이야기지만, 자금 조달에 관해서는 “미국에서 2,100억 엔의 가치가 있다고 하는 Webflow란?”에서 소개했습니다. 기업 규모와 자금 조달까지 고려하면, 코드 내보내기가 가능한 노코드 중 Webflow가 가장 유명하고 안정적입니다.

저 역시 사용 4년 차가 될 만큼 계속 쓰고 있습니다. 특별한 문제 없이 쾌적해서 진심으로 추천합니다.

코드 내보내기에 드는 요금

Webflow에서 코드를 내보내려면 워크스페이스 플랜에 가입해야 합니다. 요금은 최저 월 16달러입니다. 프리랜서 플랜이 가장 적합합니다.

장점·단점

장점: 원클릭으로 HTML, CSS, JS 등 전부를 Zip 파일로 출력할 수 있습니다. CMS 내용은 별도로 CSV 파일로 출력해야 합니다.

단점: 지원 언어가 영어입니다. 내보낸 코드의 주석도 영어로 적혀 있습니다.

Nicepage: WordPress 출력 가능

WordPress 출력을 지원하는 노코드 툴 Nicepage 사이트

Nicepage도 코드 내보내기가 가능합니다. Wix처럼 드래그만으로 만들 수 있고, 저렴하며, 수준 높은 템플릿이 풍부합니다. WordPress 플러그인으로도 사용할 수 있습니다.

추가: 아직 사용하기엔 시기상조라고 판단했습니다. “무겁다·동작이 매끄럽지 않다·코드를 내보내면 고치기 힘들다.” Webflow 쪽이 경영·기능·지원 모두 안정적이라는 인상입니다.

코드 내보내기에 드는 요금

무려 무료.

장점·단점

장점은 무료로 코드를 내보낼 수 있다는 것. Webflow보다 쉽게 사이트를 만들 수 있고 템플릿이 매우 풍부합니다. 만들기 쉬운 정도는 “Wix”와 비슷합니다. Wix는 코드 내보내기가 안 되므로, 영어가 가능하다면 Wix보다 Nicepage를 추천합니다.

단점은 툴 자체가 무겁다는 것. 동작이 하나하나 느립니다. UI도 조금 어수선해 보기 불편합니다. CMS 기능이 없으므로 블로그를 운영하려면 WordPress로 출력해 사용해야 합니다. “또 WordPress야?”라는 분께는 Webflow를 추천합니다.

readymag

코드 내보내기를 지원하는 디자인 툴 readymag 사이트

이쪽은 코드 내보내기 기능을 여는 플랜 요금이 매우 비싼 것이 흠입니다. 저는 사용해 본 적이 없어 자세한 내용은 쓸 수 없습니다. 관심이 있다면 직접 사용해 보세요.

그 밖의 코드 내보내기 가능한 노코드는 아래 글에 정리되어 있습니다.
7 FREE ONLINE WEBPAGE BUILDER WITH HTML CODE EXPORT(영문)

코드 내보내기에 드는 요금

코드를 내보내려면 Business 플랜 가입이 필요합니다. Business 플랜은 월 65달러.

장점·단점

장점은 신생 툴이라 앞으로의 업데이트로 점점 좋아질 가능성이 있다는 것.

단점은 현재 Webflow, Nicepage, STUDIO, Wix 등과 비교했을 때 특별히 눈에 띄는 이점이 없다는 것입니다. 사용 중인 분이 있다면 이야기를 들어보고 싶습니다.

코드 내보내기로 고른다면 Webflow 추천

코드 내보내기를 고려한다면 Webflow를 추천합니다. 실제로 Webflow에서 출력한 코드를 공유하고 있으니 확인하고 싶은 분은 다운로드(일본어)해 보세요.

Webflow는 기본적으로 수치를 지정하며 만들어 갑니다. 지금까지 코드를 써 온 분이라면 비교적 금방 익숙해지는 구조입니다.

Nicepage는 눈으로 보며 만드는 이미지입니다. 일러스트레이터나 포토샵에 가까운 감각이죠. 물론 수치로도 관리할 수 있습니다.

[무료 다운로드 OK] 실제로 Webflow에서 코드를 내보내 봤다

고양이 지원 카페 사이트

Webflow에서 코드를 내보내 제작한 고양이 지원 카페 사이트

Webflow에서 출력한 샘플 코드를 공유하고 있으니 확인해 보세요. ※위 이미지는 자원봉사로 만든 사이트입니다. 코드 내보내기 확인 용도로만 사용해 주세요.

이 사이트는 무료 템플릿을 사용했기 때문에 Webflow 규약상 일반 공개가 가능한지 판단할 수 없어 한정 페이지로 공개하고 있습니다.

뉴스레터에 등록하면 비밀번호가 표시됩니다. 출력된 코드를 다운로드하고 싶은 분은 비밀번호 페이지(일본어)에서 뉴스레터에 등록해 주세요.

[경험담] 코드를 내보내 기업에 납품해 봤다

여기서는 다음 3가지 경험담을 이야기합니다.

  • 실제로 사이트 코드를 내보내 운영 중
  • 베테랑 웹 디자이너에게 직접 들은 Webflow 코드의 품질
  • Webflow 커뮤니티에서 들은 코드 납품 경험담

실제로 사이트 코드를 내보내 운영 중

New페인트|지역 밀착형 젊은 도장 업체

Webflow 코드 납품으로 운영 중인 도장 업체 New페인트 사이트

홈페이지는 제가 아직 신인이던 시절 의뢰받아 디자인부터 Webflow 구현, 운영까지 담당했습니다.

엔/달러 환율의 영향도 있어, 현재 이 사이트는 Webflow에서 코드를 내보내 일본 서버에서 운영하고 있습니다. 그 방법은 다른 글에서 해설합니다.

당사는 WordPress에서 Webflow로의 이전, Webflow에서 코드로의 이전도 지원합니다.

베테랑 웹 디자이너에게 직접 들은 Webflow 코드의 품질

저는 2025년 1월 현재 5개 회사에 Webflow 사용법을 지원하고 있습니다. 그중 베테랑 웹 디자이너와 이야기할 기회가 있어 일부를 공유합니다.

  1. A: “실제로 Webflow에서 출력된 코드를 보고 싶어요”
  2. 나: "여기(일본어)요~!"
  3. A: “대단해! 사람이 쓴 것보다 깔끔한데요!”

이렇게 무척 감동하셨습니다. 이유는 다음과 같습니다.

  • 코드 정렬이 매우 깔끔하다!
  • 필요한 곳에 주석이 있어 보기 쉽다.
  • 작성 방식이 고정되어 있어 수정이 편하다!
  • 자체 서버로의 사이트 공개가 아주 쉽다

종합적으로 최고 수준이라는 평가였습니다.

실제로 저도 코드를 내보내 사이트를 관리한 경험에서, 자체 서버에 쉽게 호스팅할 수 있다는 점을 체감했습니다. 다만 “쉽다”는 것은 개발자 관점에서의 이야기이니 초보자는 조심해서 작업합시다.

Webflow 커뮤니티에서 들은 코드 납품 경험담

커뮤니티에서 실제로 기업에 납품한 경험이 있는 분에게 들은 이야기입니다.

그는 정규직 웹 디자이너로 일하며, 소속 회사에 Webflow에서 출력한 코드 파일을 납품했다고 합니다. 그는 이렇게 말했습니다.

  • 기업에 납품할 때는 Webflow의 출력 기능임을 명시한다
  • 그랬더니 Webflow로 출력한 코드가 더 선호되기 시작했다
  • Webflow 코드에 익숙해지면 틀이 모두 같아서 수정하기 쉽다

영어 주석은 모를 때만 번역해서 쓴다고 합니다. 지금이라면 AI가 전부 번역해 줄지도 모르겠네요.

노코드 코드 내보내기로 수익을 내는 방법 3가지

크라우드소싱 사이트에서 벌기

Lancers, CrowdWorks, Coconala(일본의 크라우드소싱 서비스) 등을 이용해 수익을 낼 수 있습니다. 노코드 툴 프로젝트는 물론 코드 납품을 원하는 프로젝트에도 도전할 수 있어 수입을 올리기 쉽습니다.

솔직히 2025년에 시작해도 늦지 않습니다. 저는 Webflow를 다룰 수 있는 1호로서 크라우드소싱에서 프로젝트를 받던 시기도 있었습니다.

노코드 툴을 쓰는 기업에 취업하기

노코드 툴 전문 기업은 최근 늘고 있습니다. 얼마 전까지 “노코드”라고 하면 비웃음을 샀지만, 2025년에는 노코드가 압도적으로 승리했습니다.

대기업조차 보안 측면을 고려해 노코드를 사용하기 시작했습니다. 당사도 웹 디자이너와 Webflow 코더를 상시 모집하고 있습니다. 업무 위탁 단건부터 시작하니 희망하시면 문의해 주세요.

노코드로 영업하기

노코드를 최대한 활용해 영업하는 것도 수익을 내는 길입니다. 저도 초기에는 방문 영업을 하고 전단지를 돌리는 등 여러 경험을 했습니다.

지금은 영업 대행을 하고 싶은 분을 모으는 쪽이 되었습니다. 레비뉴 셰어 같은 업무 계약으로 앞으로 더 사업 확대를 생각하고 있습니다.

“노코드를 씁니다”에 대한 세간의 반응

이번에는 코드 내보내기가 가능한 웹 개발 툴을 소개했습니다. 노코드를 다룰 수 있는 것만으로 수익을 낼 수 있고, 코드 내보내기가 가능하면 그 폭은 더 넓어집니다. 하지만 세상에는 아직 비판적인 의견이 많습니다. 아래는 제가 일본 일주 중에 만난 웹 디자이너들의 실제 반응입니다(일본어 트윗).

미묘한 반응이 많기에 오히려 아직 Webflow로 벌 수 있다고 실감합니다. 기능과 안정성을 보면 Webflow 웹 제작이 최고입니다. 진심으로 그렇게 생각하기에 저는 Webflow로 사업을 시작해 매일 다양한 사이트를 만들고 있습니다. 궁금하다면 먼저 무료로 사용감을 확인해 보는 건 어떨까요.

Webharu에서는 Webflow 수탁 개발도 받고 있습니다. 요금 페이지(일본어)에서 상담해 주세요.

자주 묻는 질문

Webflow에서 코드를 내보내려면 요금이 드나요?

워크스페이스 플랜 가입이 필요합니다. 요금은 최저 월 16달러이며 프리랜서 플랜이 가장 적합합니다.

Webflow 코드 내보내기에서는 어떤 파일이 출력되나요?

원클릭으로 HTML·CSS·JS 등 전부를 Zip 파일로 출력할 수 있습니다. CMS 내용은 별도로 CSV 파일로 출력해야 합니다.

무료로 코드를 내보낼 수 있는 노코드 툴이 있나요?

Nicepage는 무료로 코드 내보내기가 가능하고 WordPress 플러그인으로도 쓸 수 있습니다. 다만 툴 자체가 무겁고 CMS 기능이 없는 점에 주의해야 합니다.

Webflow에서 출력한 코드의 품질은 실무 수준인가요?

베테랑 웹 디자이너로부터 "사람이 코드를 쓰는 것보다 깔끔하다"는 평가를 받았습니다. 코드 정렬이 깔끔하고, 필요한 곳에 주석이 있으며, 작성 방식이 고정되어 수정이 편하기 때문입니다.

この記事を日本語で読む → Read in English →

Webflow 전문가에게 직접 물어보세요.

읽다가 막히면, 상담은 무료입니다.

이 글의 저자(Webflow 해설 블로그 필자)가 직접 답변합니다. 일본어·영어 대응.