![웹플로우(Webflow)란? 기능·사용법·도입 사례까지 [2026년판]](/assets/posts/6722246bfc0ce536f06c7456_WHY.webp?v=edc593fe)
웹플로우(Webflow)란? 기능·사용법·도입 사례까지 [2026년판]
웹플로우(Webflow)란 무엇을 할 수 있는 툴인지 Webflow 전문 제작사가 해설합니다. 특징·장단점, 기본 사용법, 일본 기업의 도입 사례까지 이 글 하나로 Webflow의 전체상을 파악할 수 있습니다.
자세히 보기 Journal.
기술 블로그
Webflow 해설 기사를 계속 써 온 것이 Webharu의 원점입니다. 사용법의 기초부터 MCP와 바이브 코딩 같은 AI 활용의 최전선까지, 현장에서 시험한 지견을 그대로 공개합니다.
![[2026년판] Webflow 요금 플랜 해설｜신체계 Basic·Premium](/assets/posts/65d4424a6c87fdfe49530f61_---3---------1-.avif?v=2b590578)
[2026년판] Webflow 요금 플랜 해설｜신체계 Basic·Premium
Webflow의 요금 플랜을 전문가가 해설합니다.2026년 5월 개편으로 사이트 플랜은 Starter(무료)·Basic($15/월)·Premium($25/월·CMS 포함) 3단계로 재편.
자세히 보기
【무료】Webflow CMS 완전 이해 가이드
Webflow CMS로 할 수 있는 것(블로그 작성·SEO 자동화·브레드크럼), 실사용에서 보이는 불편한 점과 버그 대책, 비용, 그리고 전문가가 실제로 쓰는 편리 기능까지 경험 기반으로 해설합니다.
자세히 보기
프로 디자이너가 AI로 사이트를 전면 리뉴얼한 전 과정
Webharu의 사이트를 AI(Claude Code)로 풀 리뉴얼. 구축 3일·기획 포함 7일, 인간은 대표 한 명. 26페이지 신규 구축과 글 62개 이전, 디자인 50패턴의 시행착오, 그리고 해 보고 알게 된 것을 전부 공개합니다.
자세히 보기
Webflow로 웹 앱 개발이 왔다! App Gen을 써 봤다
Webflow Cloud와 신기능 “App Gen”의 등장으로 Webflow가 풀스택 개발 환경으로 진화했습니다. UI를 만들고 프롬프트를 던지기만 하면 백엔드가 자동 생성되는 실제 검증 리포트와, 지금 시작해야 하는 이유를…
자세히 보기
【음식점 오너 필독】AI로 근태 관리 앱을 만드는 방법
“근태 관리 앱 만들어 줘”라고 채팅에 말 걸기만 하면 시작되는 Figma Make 앱 제작. 백엔드 연동(Supabase), 기능 추가 주문 리스트, 에러 대처, 저장의 요령까지 실제 제작 경험으로 해설합니다.
자세히 보기
Webflow MCP란? AI가 웹사이트를 관리하는 시대가 왔다
Webflow MCP(Model Context Protocol)는 AI와 Webflow를 안전하게 연결하는 구조입니다. SEO 태그·CMS 일괄 갱신 등 현장에서 도움이 되는 기능, 3단계 도입 방법, 실험에서 얻은 주의점을 전문가가 해설합니다.
자세히 보기
AI 바이브 코딩과 Webflow를 결합해 할 수 있는 것 총정리
AI와 대화하며 코드를 생성하는 “AI 바이브 코딩”과 Webflow를 결합하면, 노코드의 디자인력을 유지한 채 데이터베이스·결제·API 연동 등의 제한을 돌파할 수 있습니다.
자세히 보기
HTML 코드를 내보낼 수 있는 노코드 툴 비교｜무료 추천도
HTML 내보내기(코드 출력)가 가능한 노코드 웹 제작 툴을 비교 소개합니다. 실제로 Webflow에서 코드를 내보내 기업에 납품한 경험담, 무료로 다운로드할 수 있는 샘플, 코드 출력으로 수익을 내는 방법까지…
자세히 보기
Webflow에서 SEO 최적화하는 방법【중급편】
기초 SEO 설정 후에 할 8가지——키워드·HTML 태그·이미지 ALT·타이틀과 디스크립션·내부 링크·사이트맵·RSS·로딩 속도 개선——를 해설합니다. 2026년 추가로 AIO 구현과 글 통합 301 등 중급의 그다음까지. SEO 최적화를 합시다.
자세히 보기
모르면 손해. Webflow 조작이 10배 빨라지는 기초 지식
Webflow 완전 초보자가 10배 효율적으로 학습할 수 있도록 기본 조작 지식을 소개합니다. ALL 태그의 존재, CSS 패널 색상의 의미 등 웹플로우 초보자 필수 지식을 정리했습니다.
자세히 보기
Webflow에서 『reCAPTCHA』를 설정하는 방법【10Days】
21Days 코스 10일 차. 문의 폼의 무단 접근을 막는 Google reCAPTCHA를 무료로 도입하는 3단계와, Scale로 크기를 축소하는 요령까지 해설합니다. 도입 예상 시간 15분.
자세히 보기
【일본 여행】ADDress로 일본 일주에 필요한 소지품
ADDress로 1년간 일본 일주한 실체험에서 “필요한 것·불필요한 것·있으면 편리한 것”을 정리했습니다. 수건·드라이어·조미료는 대부분 비치, 시골은 PayPay만 되는 가게가 많다는 리얼한 정보까지.
자세히 보기
주거 구독 서비스 ADDress｜소개 쿠폰(최대 15,000엔) 취득 방법
일본의 주거 구독 서비스 ADDress의 쿠폰 코드를 받는 방법을 소개합니다. 공식 소개 제도의 조건, 가장 이득인 플랜 가입 방법, 공식에 확인한 주의점까지. 소개 링크는 인원 제한 없음.
자세히 보기
【리뷰】나가노현에 있는 ADDress 거점을 정리했습니다
일본 나가노현에서 이용할 수 있는 ADDress 거점 9곳을 정리했습니다. 실제로 묵은 3곳(이즈나·나가노·하쿠바)의 청결·안전 리뷰와 주차장·주방 정보, 목적별 추천 거점까지.
자세히 보기
ADDress 체험담｜숙소 구독을 1년 쓴 솔직한 후기·요금·장단점
일본의 주거 구독 서비스 ADDress를 1년간 커플로 사용한 본심 리뷰. 숙박의 실태, 요금, 얻은 것, 솔직하게 느낀 단점까지 실체험 기반으로 정리했습니다. 더 싸게 시작할 수 있는 2만 엔 쿠폰 취득법도 소개.
자세히 보기
Webflow에서 브레드크럼을 만드는 방법【SEO 최적화/구조화】
Webflow에서 브레드크럼을 도입하는 3패턴을 해설합니다. 가장 추천은 CMS＋커스텀 코드: 하나 만들면 전 페이지 자동 생성＋BreadcrumbList 구조화까지. Google 리치 결과 테스트로의 검증 방법도.
자세히 보기
Webflow로 만든 사이트를 저렴한 서버로 이전하는 방법
Webflow에서 코드를 출력해 저가 렌털 서버로 이전하는 방법을 해설합니다. FTP 업로드와 네임서버 전환으로 작업은 약 5분. CMS·폼의 주의점과 출력 코드의 편집 포인트도.
자세히 보기
【초보자도 간단】Webflow에서 자체 도메인을 설정하는 방법
Webflow에서 자체 도메인을 연결하는 방법을 4단계로 해설합니다. 필요한 요금 플랜, A·CNAME·TXT 레코드의 DNS 설정, www 기본값 설정까지 약 15분이면 완료됩니다.
자세히 보기
Webflow로 초보자도 프로 같은 디자인을 만드는 방법
초보자도 프로급 디자인을 만드는 5단계——쇼케이스 복사→폰트→색→사진→문장——를 해설합니다. 예상 시간(합계 7시간)과 가장 편하고 싸게 만드는 2가지 패턴도.
자세히 보기
홈페이지 제작으로 고향 시오가마에 보답하는 이야기
13년 전 동일본 대지진 때는 아무것도 할 수 없었지만 지금은 홈페이지 제작으로 고향 시오가마를 도울 수 있다——인구당 초밥집이 일본에서 가장 많으면서도 웹에 없는 마을에서, 웹 제작자가 할 수 있는 역할을…
자세히 보기
Figma에서 Webflow로 디자인 복사하기｜3년 쓴 솔직한 후기
Figma to Webflow 플러그인으로 디자인을 복사하는 4단계를 해설합니다. 더해서 실제 프로젝트에서 3년 사용한 솔직한 결론(오토 레이아웃 제약·호환성)과 2026년의 디자인 시스템 동기화로의 진화, 현실적인…
자세히 보기
【전 3패턴 정리】Webflow에 폰트를 추가하는 방법
Webflow에 폰트를 추가하는 3가지 방법——Google 폰트(1분)·Adobe 폰트(API 토큰으로 5분)·커스텀 폰트(2MB 이하로 압축)——를 실제 화면과 함께 해설합니다. 반영되지 않을 때의 대처법도.
자세히 보기
내 목표가 맞는지 불안해져 3일이나 앓아눕는 나의 대책법
목표를 알 수 없게 됐을 때의 대책을 3단계로 소개합니다.①좋아하는 것·Feel Good을 생각한다 ②목표를 떠올린다 ③목표에서 역산해 할 일을 정리한다(기분이 오르지 않으면 쉰다).
자세히 보기![[2025년 최신판] Webflow 사용법을 항목별로 정리했습니다](/assets/posts/65d44819544c7a0b392efa01_Webflow---2--1-.webp?v=913d1d64)
[2025년 최신판] Webflow 사용법을 항목별로 정리했습니다
Webflow 사용법을 “기본·CMS·SEO·요금·Figma 연계·다국어화·Instagram 임베드” 항목별로 정리한 인덱스 페이지입니다. 경험이 없어도 Webflow를 배운 방법과 템플릿 편집 효율을 높이는 테크닉, 자주 쓰는…
자세히 보기
Weglot 사용법 완전 가이드｜도입·제외 설정·문제 해결
다국어화 서비스 Weglot의 사용법을 한 편에 정리했습니다. 3단계 도입, 번역 제외로 비용을 줄이는 정규식, 번역되지 않을 때의 해결법, 서브디렉터리 꿀팁까지 실사용 경험 기반으로 해설합니다.
자세히 보기
【무료】노코드 Webflow에 Instagram을 임베드하는 방법
Webflow에 Instagram을 임베드하고 자동 갱신시키는 방법을 해설합니다. 프로 계정화→Facebook 연동→토큰 취득·연장→JS 기입의 순서와, JS는 Before /body tag에 넣어야 한다는 함정 회피법까지.
자세히 보기
인보이스로 다퉜습니다. 해결했으니 소개합니다｜세무사 감수
일본의 인보이스 제도로 클라이언트와 다퉜던 경험을 공유합니다. 면세사업자와 발주자가 서로 손해 보지 않는 할인 계산법, 세무사 감수의 청구서 템플릿, 2026년 세제 개정 후의 경과조치 일정까지.
자세히 보기
【단점】노코드로 만든 웹사이트는 사라질 수도 있다?!
노코드로 만든 웹사이트는 관리 기업에 의존하며 갑자기 사라질 가능성이 있습니다. 그 이유 3가지와 대책(코드 직접 보관·계정 2개로 복사·코드 출력 가능한 툴 선택)을 해설합니다.
자세히 보기
【초편리】일본 일주에 편리한 신용카드 엄선 소개
일본 일주 중에 실제로 발급한 신용카드 2장——PayPay 카드(최대 2.5% 적립)와 EPOS 카드(연회비 무료·온천 할인·해외여행 보험 자동 적용)——를 실사용 경험으로 소개합니다.
자세히 보기
이주·워홀｜첫날부터 해외 생활을 성공시키는 방법
필리핀·호주 생활과 아시아 일주, 태국 이주까지 경험한 필자가 해외에서 고독을 해소하고 친구를 만드는 방법, 그리고 현지에서 누구보다 많은 경험을 쌓는 방법을 실체험으로 소개합니다.
자세히 보기
【커스텀 코드 없이】Webflow로 만드는 가장 간단한 목차
커스텀 코드 없이 Webflow 안의 기능만으로 페이지 내 링크 달린 목차를 만드는 방법. CMS 리치 텍스트를 분할해 ID를 붙이고, Conditional Visibility로 빈 목차 문제까지 해소합니다.
자세히 보기
【Webflow】오늘부터 쓸 수 있는 무료 템플릿 10선
Webflow에서 무료로 쓸 수 있는 템플릿을 장르별(포트폴리오·음식점·소재)로 소개합니다. 각 템플릿의 변경 예상 시간과 장단점, 저작권(CC0), 그리고 Apple 판매 페이지·Windows95·PS4를 재현한 굉장한…
자세히 보기
Webflow로 만든 노코드 사이트를 Weglot으로 다국어화해 봤다
번역 툴 Weglot을 실제로 Webflow 사이트에 도입해 본 리뷰입니다. 3분 도입, 번역 품질, 좋았던 점·나빴던 점, 서브도메인과 서브디렉터리의 선택, 그리고 2026년 시점의 결론까지.
자세히 보기
Webflow 전문 프리랜서의 2022년 실적을 공개합니다
Webflow 전문 프리랜서로서 개업 4개월(2022년 8〜12월)의 실적을 공개: 의뢰 약 30건·총매출 약 150만 엔·공식 어필리에이트 수익 약 20만 엔. 수주처 내역과 앞으로의 전략(Webflow＋APP)까지.
자세히 보기
Webflow 로컬라이즈를 1년 쓴 경험과 SEO 효과 전부 공개
Webflow 로컬라이즈(다국어화 기능)를 일본어→한국어로 1년 넘게 운영한 솔직한 결과를 공개합니다. 접속은 늘었지만 매출은 불발이었던 이유, 비용, 도입 방법, 그리고 2026년의 결론(AI 번역＋직접 운영)까지.
자세히 보기![Webflow SEO 완전 가이드｜기본 설정부터 AIO까지 [2026년판]](/assets/posts/642bd0976e1153a5fbc425bc_--.webp?v=301dd9e2)
Webflow SEO 완전 가이드｜기본 설정부터 AIO까지 [2026년판]
Webflow의 SEO 최적화를 전문가가 해설합니다. 메타 설정·콘텐츠·링크 대책·기술적 SEO의 기본 4항목에 더해, 2026년 필수가 된 AIO(AI 검색에 인용되는 설계)까지 다룹니다. 자주 묻는 질문 포함.
자세히 보기
21일 Webflow 습득 코스｜Webflow University 한국어 해설
Webflow 공식 21일 학습 코스를 해설한 교재 시리즈의 인덱스입니다. 하루 30분×21일로 포트폴리오 사이트를 완성하며 CMS 구축·SEO 기초·폼 작성까지 배울 수 있습니다. 0일 차부터 14일 차까지의 로드맵.
자세히 보기
【2026년판】Webflow 도입 사례
일본의 Webflow 도입 사례를 소스 코드 검증 기반으로 소개합니다.리코(RICOH360)·Moneytree·니지박스(리크루트 그룹)·손보총연 등 대기업부터 업계 단체까지.
자세히 보기
Webflow에서의 Span 태그 사용법
Webflow에서 Span 태그를 쓰는 방법과, Rich text에서는 Span을 쓸 수 없는 문제의 대처법(Bold=strong·Italicize=em을 활용한 부분 스타일 변경)을 해설합니다.
자세히 보기
Webflow 사용법을 Webflow Forum에서 질문하는 방법
Webflow 사용법을 질문하는 3가지 방법——Webflow Forum·공식 고객 지원·SNS——을 정리했습니다. Forum 계정 생성부터 답변율을 높이는 질문 요령, 실제로 영어로 질문해 본 체험담까지.
자세히 보기해당하는 기사가 없습니다.