왕초보도 따라하는 Webflow 완전정복 (7단계로 마스터하기)

코딩 몰라도 괜찮습니다! Webflow가 특별한 이유

"웹사이트를 만들고 싶은데 코딩은 하나도 몰라요." 이런 고민, 한 번쯤 해보셨죠? 요즘은 코딩 없이도 전문가 수준의 웹사이트를 만들 수 있는 시대입니다. 그중에서도 Webflow는 단순한 노코드 툴을 넘어선 강력한 디자인 플랫폼으로 주목받고 있습니다.

Webflow는 무엇이고, 왜 지금 배워야 할까요?

Webflow는 시각적인 인터페이스로 웹사이트를 만들 수 있는 노코드 툴입니다. 하지만 Wix나 Squarespace 같은 다른 툴들과는 결정적인 차이가 있습니다.

Webflow를 선택해야 하는 3가지 이유:

1. 완벽한 디자인 통제력 - 템플릿에 갇히지 않고, 픽셀 단위로 원하는 디자인을 구현할 수 있습니다. 마치 포토샵으로 디자인하듯이 자유롭게 작업할 수 있죠.
2. 진짜 반응형 디자인 - 데스크톱, 태블릿, 모바일 각각의 화면에 맞춰 세밀하게 조정할 수 있습니다. 다른 툴처럼 "자동 반응형"에 의존하지 않아도 됩니다.
3. SEO 친화적 구조 - 깨끗한 코드와 빠른 로딩 속도로 검색엔진 최적화에 유리합니다. HTML 태그 구조도 직접 컨트롤할 수 있어 상위노출에 도움이 됩니다.

이 글을 읽으면 얻을 수 있는 것들

이 가이드를 끝까지 따라하시면:

• 실제 작동하는 웹사이트 1개 완성 - 포트폴리오나 개인 브랜딩 사이트로 바로 사용 가능합니다
• 무료 계정으로 모든 실습 가능 - 유료 플랜 없이도 배울 수 있습니다
• Webflow 핵심 기능 마스터 - 레이아웃, 반응형, 퍼블리싱까지 전 과정을 경험합니다

각 단계마다 실제 작업 화면 예시와 함께 설명드리니, 천천히 따라오시면 됩니다.

준비물 체크리스트

시작하기 전에 아래 항목들을 준비해주세요:

✅ Webflow 무료 계정 - webflow.com에서 가입 (구글 계정으로 30초 완료)
✅ 실습용 이미지 파일 - Unsplash나 Pexels에서 무료 다운로드
✅ 크롬 브라우저 - Webflow는 크롬에서 가장 안정적으로 작동합니다
✅ 여유 시간 2-3시간 - 집중해서 따라하면 충분히 완성할 수 있습니다

준비되셨나요? 그럼 시작해볼까요!

---

1단계 - Webflow 계정 만들고 첫 프로젝트 시작하기

회원가입부터 대시보드 살펴보기

먼저 webflow.com 에 접속해주세요. 우측 상단의 "Get Started" 버튼을 클릭하면 회원가입 화면이 나타납니다.

가입 방법:

• 구글 계정으로 로그인하는 것을 추천합니다 (가장 빠름)
• 또는 이메일 주소로 직접 가입해도 됩니다
• 비밀번호는 8자 이상으로 설정하세요

가입이 완료되면 Webflow 대시보드가 나타납니다. 여기서 주요 메뉴를 확인해보세요:

• Sites - 내가 만든 웹사이트 프로젝트 목록
• Templates - 미리 만들어진 템플릿 구경 (나중에 활용 가능)
• Webflow University - 공식 튜토리얼 영상들 (영어지만 자막 있음)

첫 프로젝트 생성: 빈 캔버스 vs 템플릿 선택

대시보드에서 "New Project" 또는 "+ New site" 버튼을 클릭합니다. 그러면 두 가지 선택지가 나타납니다:

1. Start from scratch (빈 캔버스) ← 우리는 이것을 선택합니다!
2. Use a template (템플릿 사용)

처음 배울 때는 반드시 빈 캔버스로 시작하세요. 템플릿을 사용하면 구조를 이해하기 어렵고, 나중에 커스터마이징할 때 더 헷갈립니다.

프로젝트 이름 짓기 팁:

• "My First Website" 또는 "Practice Site" 처럼 간단하게
• 나중에 프로젝트가 많아질 때 찾기 쉽게 날짜를 포함해도 좋습니다 (예: 2025-Portfolio)

반응형

Designer 화면 구조 이해하기

프로젝트를 만들면 "Designer"라는 작업 화면이 열립니다. 처음엔 복잡해 보이지만, 크게 4개 영역만 기억하세요:

1. 좌측 패널 (Add Elements)

• 여기서 텍스트, 이미지, 버튼 등을 끌어다 쓸 수 있습니다
• "+" 버튼을 누르면 추가 가능한 요소들이 쭉 나타납니다

2. 중앙 캔버스 (Canvas)

• 실제로 디자인을 그리는 작업 공간입니다
• 마우스로 드래그해서 요소들을 배치합니다

3. 우측 패널 (Style Panel)

• 선택한 요소의 색상, 크기, 여백 등을 조정합니다
• 포토샵의 속성 패널과 비슷한 역할입니다

4. 상단 바 (Responsive View)

• 데스크톱/태블릿/모바일 화면 전환 버튼이 있습니다
• 지금은 데스크톱 모드 그대로 두고 작업하세요

이제 본격적으로 웹사이트를 만들어볼 시간입니다!

---

2단계 - 섹션과 컨테이너로 페이지 뼈대 만들기

Section과 Container의 차이점 완벽 이해

웹사이트는 마치 레고 블록처럼 여러 덩어리로 나뉩니다. Webflow에서는 이 덩어리를 Section과 Container로 구성합니다.

Section이란?

• 페이지를 수평으로 가르는 큰 영역입니다
• 예: 헤더 영역, 메인 콘텐츠 영역, 푸터 영역
• 배경색이나 배경 이미지를 넣을 때 사용합니다

Container란?

• Section 안에 들어가는 내용물을 담는 그릇입니다
• 콘텐츠가 화면 양 옆으로 너무 퍼지지 않게 중앙 정렬해줍니다
• 보통 최대 너비를 1200px 정도로 제한합니다

실제 웹사이트로 비유하면:

• Section = 집의 방 (거실, 침실, 주방)
• Container = 각 방 안의 가구를 모아놓은 공간

첫 섹션 만들기 실습

이제 직접 만들어봅시다!

① 좌측 패널에서 Section 찾기

• "+" 버튼 클릭 → "Elements" 카테고리 → "Section" 드래그

② 캔버스에 드롭하기

• 캔버스 중앙으로 끌어다 놓으면 자동으로 배치됩니다

③ 배경색 변경해보기

• Section을 클릭한 상태에서 우측 패널로 이동
• "Background" → "Color" 클릭
• 원하는 색상 선택 (예: 연한 회색 #F5F5F5)

④ 높이 조절하기

• 우측 패널에서 "Size" 찾기
• "Height" 값을 "500px"로 입력해보세요
• 섹션이 세로로 길어지는 걸 확인할 수 있습니다

 

Container 추가하고 콘텐츠 영역 설정

이제 Section 안에 Container를 넣어봅시다.

① Container 추가하기

• Section이 선택된 상태에서 좌측 패널의 "Container" 드래그
• Section 안쪽(내부)에 드롭해야 합니다

② Max Width 설정하기

• Container 클릭 → 우측 패널 "Size"
• "Max Width" 값을 "1200px"로 설정
• 이렇게 하면 콘텐츠가 너무 넓게 퍼지지 않습니다

③ 중앙 정렬 확인

• Webflow의 Container는 자동으로 중앙 정렬됩니다
• 브라우저 창 크기를 줄였다 늘렸다 해보세요
• Container가 항상 중앙에 위치하는 걸 확인할 수 있습니다

여백(Padding) 추가하기:

• Container 선택 → 우측 패널 "Spacing"
• Padding 값을 상하좌우 "20px"씩 추가
• 이제 콘텐츠가 Container 벽에 딱 붙지 않고 여유가 생겼습니다

축하합니다! 첫 번째 Section과 Container가 완성되었습니다. 이 구조를 반복해서 여러 섹션을 만들 수 있습니다.

---

3단계 - 텍스트와 이미지 추가하기

Heading과 Paragraph 삽입

이제 빈 공간에 내용을 채워볼 차례입니다. 텍스트부터 시작해볼까요?

① Heading(제목) 추가하기

• 좌측 패널 → "Typography" → "Heading" 드래그
• Container 안쪽에 배치합니다
• 기본적으로 "H1" 태그로 생성됩니다

② 텍스트 입력하기

• Heading을 더블클릭하면 편집 모드로 전환됩니다
• "안녕하세요, 저는 김개발입니다" 같은 텍스트 입력
• Enter 키를 누르면 편집 종료

③ Heading 스타일 변경하기

• Heading 선택 → 우측 패널 "Typography"
• Font Size: 48px
• Font Weight: Bold
• Color: 검정색 또는 진한 회색

SEO 팁:
H1 태그는 페이지당 1개만 사용하세요. 검색엔진은 H1을 페이지의 가장 중요한 제목으로 인식합니다.

④ Paragraph(본문) 추가하기

• 좌측 패널 → "Paragraph" 드래그
• Heading 아래에 배치합니다
• "웹 개발자이자 디자이너로 활동하고 있습니다" 같은 소개 문구 입력

⑤ Paragraph 스타일링

• Font Size: 18px
• Color: 중간 회색 (#666666)

이미지 업로드 및 최적화

① Image 요소 추가

• 좌측 패널 → "Media" → "Image" 드래그
• Paragraph 아래에 배치합니다

② 이미지 파일 업로드

• 이미지를 클릭하면 "Choose Image" 버튼 나타남
• "Upload" 탭에서 내 컴퓨터의 이미지 선택
• 또는 Unsplash 탭에서 무료 이미지 검색해서 바로 사용

③ 이미지 크기 조절

• 이미지 선택 → 우측 패널 "Size"
• Width: 100% (부모 요소 너비에 맞춤)
• Height: Auto (비율 유지)

④ Alt Text 입력 (중요!)

• 이미지 선택 → 우측 패널 상단 "Settings" 아이콘
• "Alt Text" 필드에 이미지 설명 입력
• 예: "노트북으로 작업하는 개발자의 모습"
• 시각장애인 접근성 + SEO에 모두 도움됩니다

이미지 최적화 팁:

• 업로드 전에 이미지 크기를 1920px 이하로 줄이세요
• JPG 형식 사용 (PNG는 용량이 큽니다)
• TinyPNG로 압축하면 로딩 속도가 빨라집니다

버튼 만들고 스타일링하기

① Button 요소 추가

• 좌측 패널 → "Button" 드래그
• 이미지 아래에 배치합니다

② 버튼 텍스트 변경

• 버튼 더블클릭 → "포트폴리오 보기" 입력

③ 버튼 스타일링

• 버튼 선택 → 우측 패널
• Background Color: 파란색 (#0066FF)
• Text Color: 흰색 (#FFFFFF)
• Padding: 상하 15px, 좌우 30px
• Border Radius: 8px (둥근 모서리)

④ Hover 효과 추가하기

• 우측 패널 상단에 "Style selector" 드롭다운 보이시나요?
• "None" → "Hover" 선택
• Background Color를 더 진한 파란색으로 변경 (#0052CC)
• 이제 마우스를 올리면 색상이 변합니다!

링크 연결하기:

• 버튼 선택 → 우측 패널 "Settings" 아이콘
• "Link Settings" → "URL" 입력
• 나중에 다른 페이지를 만들면 연결할 수 있습니다
• 일단은 "https://naver.com"으로 네이버로 연결되는지 확인

여기까지 완성하면 기본적인 콘텐츠가 갖춰진 섹션 하나가 만들어집니다. 텍스트, 이미지, 버튼 - 이 세 가지만으로도 웹사이트의 80%는 만들 수 있습니다!

 

---

4단계 - 레이아웃 배치의 핵심, Flexbox 마스터하기

Flexbox가 뭔가요? 초보자를 위한 쉬운 설명

지금까지는 요소들을 위에서 아래로 쌓았습니다. 그런데 가로로 나란히 배치하려면 어떻게 해야 할까요? 바로 Flexbox를 사용하면 됩니다.

예전 방식 vs 현대 방식:

• 예전(Float): 복잡하고 오류가 많았음
• 현대(Flexbox): 직관적이고 강력함

"부모-자식" 관계로 이해하기:

• 부모 요소에 Flexbox를 적용하면
• 그 안의 자식 요소들을 자유롭게 배치할 수 있습니다

예를 들어, Div Block(부모) 안에 버튼 3개(자식)를 넣고, Div Block을 Flexbox로 만들면 버튼들을 가로로 정렬할 수 있습니다.

 

가로 정렬 실습: 네비게이션 메뉴 만들기

실제로 네비게이션 메뉴를 만들어보면서 Flexbox를 익혀봅시다.

① 새 Section 만들기

• 맨 위에 Section 하나 추가 (높이는 80px 정도)
• 배경색은 흰색으로 설정

② Container 안에 Div Block 추가

• Div Block 추가 → "+" 버튼, "Elements"의 Basic
• Div Block 이름을 "Nav Wrapper"로 변경 (Navigator 패널에서)

③ Div Block을 Flexbox로 변경

• Div Block 선택 → 우측 패널 "Layout"
• "Display" → "Flex" 선택
• 이제 Flexbox 전용 옵션들이 나타납니다!

④ 로고 텍스트 추가

• Div Block 안에 "Text Link" 추가
• "MyBrand" 같은 로고 텍스트 입력
• Font Weight: Bold, Font Size: 24px

⑤ 메뉴 링크 추가

• "Text Link"를 3개 더 추가
• "About", "Work", "Contact" 입력

⑥ Align (가로 정렬) 설정

• Div Block 선택 → 우측 패널 "Layout"
• X축에 대한 "Align" 옵션 확인:
  • Start: 왼쪽 정렬
  • Center: 중앙 정렬
  • End: 오른쪽 정렬
  • Space-between: 양 끝에 붙이고 나머지 균등 배치 ← 이걸 선택!

⑦ Align (세로 정렬) 설정

• "Align" → "Center" 선택
• 링크들이 세로 중앙에 위치합니다

⑧ Gap으로 간격 주기

• "Gap" 값을 30px로 설정
• 각 메뉴 사이에 자동으로 간격이 생깁니다

완성! 이제 로고는 왼쪽, 메뉴는 오른쪽에 깔끔하게 정렬된 네비게이션이 만들어졌습니다.

세로 정렬 실습: 카드 레이아웃 구성

이번엔 카드 3개를 가로로 나란히 배치해봅시다.

① 새 Section 만들기

• Section 추가 → Container 추가
• Container 안에 Div Block 추가 (이름: "Cards Wrapper")

② Cards Wrapper를 Flexbox로

• Display: Flex
• Align(가로): Space-between (카드 사이 균등 배치)

③ 카드 Div Block 3개 추가

• Cards Wrapper 안에 Div Block 3개 드래그
• 각각 이름을 "Card 1", "Card 2", "Card 3"으로 변경

④ 카드 스타일링

• 각 카드 선택 → 배경색: 흰색 (#FFFFFF)
• Border: 1px, 색상 연한 회색 (#F5F5F5)
• Border Radius: 12px
• Padding: 30px
• Box Shadow: 0 4px 8px rgba(0,0,0,0.1) (그림자 효과)

⑤ 카드 너비 설정

• 카드 선택 → Size → Width: 32%
• 3개 카드가 정확히 1:1:1 비율로 나뉩니다

⑥ 카드 내부 콘텐츠 추가

• 각 카드 안에 이미지, Heading, Paragraph 추가
• 예: 서비스 소개 카드, 팀원 소개 카드 등

Flexbox 고급 팁:

• 카드 개수가 바뀌어도 자동으로 재배치됩니다
• "Flex Wrap: Wrap"을 켜면 화면이 좁아질 때 자동으로 줄바꿈됩니다

Flexbox만 잘 이해해도 왠만한 레이아웃은 다 만들 수 있습니다. 처음엔 헷갈려도 몇 번 써보면 금방 익숙해집니다!

 

---

5단계 - 모바일까지 완벽하게! 반응형 디자인 설정

브레이크포인트 이해하기

지금까지 데스크톱 화면으로만 작업했습니다. 하지만 실제 웹사이트는 스마트폰, 태블릿 등 다양한 기기에서 접속하죠. Webflow는 브레이크포인트 시스템으로 각 화면 크기에 맞춰 디자인을 조정할 수 있습니다.

Webflow의 4가지 브레이크포인트:

1. Desktop (기본) - 992px 이상
   • 우리가 지금까지 작업한 화면입니다
2. Tablet - 991px 이하
   • 아이패드 같은 태블릿 화면
3. Mobile Landscape - 767px 이하
   • 스마트폰을 가로로 눕혔을 때
4. Mobile Portrait - 479px 이하
   • 스마트폰을 세로로 들었을 때 (가장 작은 화면)

상단 바에서 브레이크포인트 전환:

• 데스크톱 아이콘 옆에 태블릿, 모바일 아이콘들이 보이시나요?
• 클릭하면 해당 화면 크기로 미리보기됩니다

반응형 작업 순서 (Desktop First 방식)

Webflow는 "Desktop First" 방식을 권장합니다. 즉:

1. Desktop에서 먼저 완성
2. Tablet으로 전환 → 필요한 부분만 수정
3. Mobile Landscape → 추가 조정
4. Mobile Portrait → 최종 마무리

이렇게 하면 효율적으로 작업할 수 있습니다.

각 브레이크포인트에서 주로 조정할 것들:

• Tablet: 폰트 크기 약간 줄이기, 여백 조정
• Mobile Landscape: 3열 레이아웃을 2열로 변경
• Mobile Portrait: 모든 레이아웃을 1열(세로)로 변경, 버튼 크기 키우기

실습: 네비게이션 모바일 버전 만들기

① 상단 바에서 Mobile Portrait (제일 작은 아이콘) 클릭

② Nav Wrapper 선택 → Layout → Flex Direction: Column

• 메뉴가 가로에서 세로로 바뀝니다

③ Align: Start (왼쪽 정렬)

④ 각 메뉴 링크의 Font Size를 18px로 증가

• 모바일에서는 터치하기 쉽게 크게 만들어야 합니다

⑤ 다시 Desktop 아이콘 클릭

• 데스크톱에서는 원래대로 가로 정렬이 유지됩니다!

모바일에서 자주 하는 실수 5가지

실수 1: 텍스트 크기를 조절하지 않음

• ❌ 데스크톱: 48px → 모바일: 48px (너무 큼)
• ✅ 데스크톱: 48px → 모바일: 32px

실수 2: 이미지가 화면 밖으로 삐져나옴

• ❌ Width: 1000px (고정값)
• ✅ Width: 100% (부모 요소에 맞춤)

실수 3: 버튼이 너무 작아서 터치 어려움

• ❌ Padding: 10px 15px
• ✅ Padding: 15px 30px (최소 44x44px 권장)

실수 4: 여백이 너무 좁아서 답답함

• ❌ Container Padding: 10px
• ✅ Container Padding: 20px 이상

실수 5: 3열 레이아웃을 모바일에서도 유지

• ❌ 카드 3개를 가로로 (글씨가 너무 작아짐)
• ✅ 카드를 세로로 쌓기 (Flex Direction: Column)

모바일 최적화 체크리스트:

✅ 모든 텍스트가 읽기 편한가?
✅ 버튼이 손가락으로 누르기 쉬운가?
✅ 이미지가 화면에 딱 맞는가?
✅ 스크롤이 자연스러운가?
✅ 가로 스크롤이 생기지 않는가?

각 브레이크포인트에서 위 항목들을 확인하며 조정하세요!

---

6단계 - 페이지 추가하고 네비게이션 연결하기

새 페이지 만들기 (About, Contact 등)

지금까지 홈 페이지 하나만 만들었습니다. 이제 다른 페이지들을 추가해볼까요?

① Pages 패널 열기

• 좌측 사이드바에서 "Pages" 아이콘 클릭 (종이 겹쳐진 모양)
• 현재 "Home" 페이지만 보입니다

② 새 페이지 추가

• Pages 패널 상단의 "+" 버튼 클릭
• "About"이라고 이름 입력 → Enter

③ 페이지 설정하기

• About 페이지 옆의 "⚙️" 아이콘 클릭
• Slug: "about" (URL 경로가 yoursite.com/about 이 됩니다)
• SEO Title: "About - MyBrand | 웹 디자이너 소개"
• Meta Description: "김개발의 경력과 프로젝트를 소개합니다. 5년 차 웹 디자이너이자 개발자로 활동 중입니다."

④ 같은 방법으로 페이지 더 추가

• "Work" 페이지 추가 (Slug: work)
• "Contact" 페이지 추가 (Slug: contact)

⑤ 페이지 사이 이동하기

• Pages 패널에서 페이지 이름 클릭하면 해당 페이지로 전환됩니다
• 각 페이지는 독립적인 캔버스입니다

페이지별 콘텐츠 예시:

• About: 자기소개, 경력, 스킬
• Work: 포트폴리오 프로젝트 목록
• Contact: 연락처 폼, 이메일, 소셜 미디어 링크

메뉴에 링크 연결하기

이제 네비게이션 메뉴와 각 페이지를 연결해봅시다.

① Home 페이지로 돌아가기

• Pages 패널에서 "Home" 클릭

② About 메뉴 링크 설정

• 네비게이션의 "About" 링크 클릭
• 우측 패널 상단 "Settings" 아이콘 클릭
• "Link Settings" 섹션 찾기
• Link Type: "Page" 선택
• Page: "About" 선택

③ 나머지 메뉴도 연결

• "Work" 링크 → Work 페이지 연결
• "Contact" 링크 → Contact 페이지 연결

④ 로고 링크는 홈으로

• "MyBrand" 로고 클릭
• Link Type: Page → "Home" 선택

⑤ Current State 스타일링

• 메뉴 링크 선택 → 우측 패널 상단 드롭다운
• "None" → "Current" 선택
• 현재 페이지 메뉴의 스타일 설정 (예: 밑줄 추가, 색상 변경)
• 이렇게 하면 지금 보고 있는 페이지를 시각적으로 표시할 수 있습니다

링크 테스트하기:

• 우측 상단 "Preview" 버튼 클릭 (눈 모양 아이콘)
• 새 탭에서 사이트가 열립니다
• 메뉴를 클릭해서 페이지 이동이 잘 되는지 확인하세요

푸터 제작 및 전체 페이지 적용

모든 페이지에 동일한 푸터를 넣고 싶다면? Symbol 기능을 사용하면 됩니다!

① 푸터 Section 만들기

• Home 페이지 맨 아래에 Section 추가
• 배경색: 진한 회색 (#333333)
• Container 추가

② 푸터 콘텐츠 만들기

• Paragraph 추가: "© 2025 MyBrand. All rights reserved."
• 텍스트 색상: 흰색
• Text Align: Center

③ 소셜 미디어 링크 추가

• Div Block 추가 → Display: Flex → Justify: Center
• Text Link 3개 추가: "Instagram", "Twitter", "LinkedIn"
• 각 링크에 URL 연결 (예: https://instagram.com/yourusername)
• 색상: 연한 회색, Hover 시 흰색

④ Symbol로 변환하기 (핵심!)

• 푸터 Section 전체를 선택
• 우클릭 → "Create Symbol" 선택
• 이름: "Footer"
• 이제 푸터가 보라색 테두리로 표시됩니다

⑤ 다른 페이지에도 자동 적용

• About 페이지로 이동
• 좌측 패널 → "Symbols" 탭
• "Footer" 심볼을 드래그해서 페이지 맨 아래 배치
• Work, Contact 페이지에도 동일하게 추가

Symbol의 장점:

• 한 곳에서 수정하면 모든 페이지에 자동 반영됩니다
• 예: Footer Symbol을 수정하면 Home, About, Work, Contact 전부 변경됨
• 네비게이션도 Symbol로 만들면 관리가 훨씬 쉽습니다!

Symbol 수정하기:

• 보라색 테두리의 Symbol을 더블클릭
• "Edit Symbol" 모드로 진입
• 수정 완료 후 좌측 상단 "Done" 클릭
• 모든 페이지에 변경사항이 적용됩니다

이제 여러 페이지로 구성된 완전한 웹사이트가 만들어졌습니다!

---

7단계 - 퍼블리싱하고 세상에 공개하기

퍼블리싱 전 최종 체크리스트

드디어 마지막 단계입니다! 퍼블리싱하기 전에 꼭 확인해야 할 사항들을 체크해볼까요?

✅ 모든 브레이크포인트 확인

• Desktop, Tablet, Mobile Landscape, Mobile Portrait 모두 확인
• 각 화면에서 레이아웃이 깨지지 않는지 점검

✅ 링크 오류 검사

• 좌측 사이드바 → "Audit" 탭 (체크 아이콘)
• "Broken Links" 섹션 확인
• 빨간색으로 표시된 오류가 없어야 합니다

✅ 이미지 Alt Text 확인

• Audit 탭 → "Accessibility"
• 모든 이미지에 Alt Text가 있는지 확인
• 누락된 경우 지금 추가하세요

✅ 페이지 제목 및 메타 설명

• Pages 패널에서 각 페이지의 SEO 설정 재확인
• 모든 페이지에 고유한 Title과 Description이 있어야 합니다

✅ 오타 및 내용 검토

• Preview 모드로 전환해서 실제 사용자 관점에서 확인
• 텍스트 오타, 이미지 누락, 버튼 작동 등 점검

최종 점검 완료! 이제 진짜로 퍼블리싱할 준비가 되었습니다.

Webflow 서브도메인으로 무료 배포

무료 플랜에서도 Webflow 서브도메인으로 사이트를 공개할 수 있습니다.

① Publish 버튼 클릭

• 우측 상단의 파란색 "Publish" 버튼을 클릭하세요
• 처음이라면 도메인 설정 화면이 나타납니다

② 서브도메인 이름 정하기

• "yoursite.webflow.io" 형식으로 만들어집니다
• 원하는 이름 입력 (예: myportfolio, jkdev, creative-studio 등)
• 이미 사용 중인 이름은 사용할 수 없습니다
• 영문 소문자와 하이픈(-)만 사용 가능

③ Publish to webflow.io 클릭

• 몇 초 기다리면 "Successfully published!" 메시지가 나타납니다
• 생성된 URL이 표시됩니다

④ 사이트 접속해보기

• 표시된 URL 클릭 (예: https://myportfolio.webflow.io)
• 새 탭에서 여러분의 웹사이트가 열립니다!
• 축하합니다! 이제 전 세계 누구나 접속할 수 있습니다 🎉

⑤ 변경사항 반영하기

• 디자인을 수정한 후에는 다시 "Publish" 버튼을 눌러야 합니다
• 그래야 실제 사이트에 변경사항이 반영됩니다
• Designer에서 보는 화면 ≠ 실제 퍼블리시된 사이트 (헷갈리지 마세요!)

무료 플랜의 제약사항:

• webflow.io 도메인만 사용 가능 (커스텀 도메인 X)
• Webflow 로고가 사이트 하단에 표시됩니다
• 페이지 수 제한: 2개 (유료 플랜은 100개 이상)

하지만 포트폴리오나 테스트용으로는 충분합니다!

커스텀 도메인 연결하기 (유료 플랜)

나만의 도메인(예: myportfolio.com)을 사용하고 싶다면 유료 플랜으로 업그레이드해야 합니다.

① 도메인 구매하기

• 도메인 구매처 추천:
  • 가비아 (국내, 한국어 지원, 카드/계좌이체)
  • Namecheap (해외, 저렴함, 신용카드)
  • Google Domains (간단함, 구글 계정 연동)
• 가격: 연간 약 1만~2만원 (.com 기준)
• 팁: .com이 가장 신뢰도 높고 기억하기 쉽습니다

② Webflow 유료 플랜 선택

• Dashboard → 사이트 선택 → "Upgrade" 버튼
• Site Plan 추천:
  • Basic ($14/월): 개인 사이트용, 커스텀 도메인 가능
  • CMS ($23/월): 블로그 기능 필요시
  • Business ($39/월): 이커머스, 고급 기능

③ 도메인 연결 설정

• Webflow Dashboard → Site Settings → Hosting → "Add Custom Domain"
• 구매한 도메인 입력 (예: myportfolio.com)

④ DNS 설정 (중요!)

• 도메인 구매처 사이트로 이동
• DNS 관리 메뉴 찾기
• Webflow가 제공하는 정보 입력:
  • A Record: 75.2.70.75 (Webflow 서버 IP)
  • CNAME: proxy-ssl.webflow.com

⑤ SSL 인증서 자동 적용

• DNS 설정 후 최대 24시간 기다림
• Webflow가 자동으로 SSL(https) 인증서 발급
• 사이트 주소가 https://myportfolio.com 으로 완성!

커스텀 도메인의 장점:

• 전문적인 이미지
• 브랜드 신뢰도 향상
• SEO에 유리 (webflow.io보다)
• 이메일 주소도 만들 수 있음 (info@myportfolio.com)

---

축하합니다! 이제 당신은 Webflow 사용자입니다

지금까지 배운 7단계 총정리

1단계: 계정 생성 및 프로젝트 시작

• Webflow 가입하고 Designer 화면 구조 이해
• 빈 캔버스로 시작해서 기초부터 탄탄하게 배웠습니다

2단계: 섹션/컨테이너 구조 설계

• Section으로 페이지를 나누고
• Container로 콘텐츠를 중앙 정렬하는 방법을 익혔습니다

3단계: 콘텐츠 추가 (텍스트/이미지/버튼)

• Heading, Paragraph로 텍스트 작성
• 이미지 업로드 및 최적화
• 버튼 스타일링과 Hover 효과까지 마스터했습니다

4단계: Flexbox 레이아웃 마스터

• 네비게이션 메뉴를 가로로 배치
• 카드 레이아웃을 3열로 구성
• Justify, Align, Gap으로 자유자재로 배치했습니다

5단계: 반응형 디자인 적용

• 4가지 브레이크포인트 이해
• Desktop First 방식으로 효율적으로 작업
• 모바일에서도 완벽하게 보이도록 최적화했습니다

6단계: 멀티 페이지 구성

• About, Work, Contact 페이지 추가
• 네비게이션 링크 연결
• Symbol로 푸터를 모든 페이지에 일괄 적용했습니다

7단계: 퍼블리싱 및 배포

• 최종 체크리스트로 오류 점검
• Webflow 서브도메인으로 무료 배포
• 커스텀 도메인 연결 방법까지 배웠습니다

여러분은 이제:
✅ 코드 없이 전문가 수준의 웹사이트를 만들 수 있습니다
✅ 반응형 디자인의 원리를 이해했습니다
✅ Flexbox로 복잡한 레이아웃도 구현할 수 있습니다
✅ 실제로 작동하는 사이트를 인터넷에 공개했습니다

다음 단계로 나아가기 위한 학습 로드맵

기본기를 다졌으니, 이제 더 고급 기능을 배울 차례입니다!

🎓 Webflow University 무료 강의 활용법

• Webflow University 방문
• "21 Day Course" 추천 (21일 완성 코스)
• 영어지만 자막 + 실습 영상으로 이해 가능
• 매일 10-20분씩 꾸준히 보면 1달 안에 전문가 수준 도달

📝 CMS 컬렉션으로 블로그 만들기

• CMS = 콘텐츠 관리 시스템
• 블로그 글을 데이터베이스처럼 관리할 수 있습니다
• 한 번 템플릿 만들면 글 100개도 자동 적용
• 다음 학습 주제로 강력 추천!

✨ 인터랙션과 애니메이션 추가하기

• 스크롤에 따라 요소가 나타나는 효과
• 마우스를 따라다니는 애니메이션
• 페이지 전환 효과
• "Interactions (IX 2.0)" 기능 학습하기

👥 Webflow 커뮤니티 참여하기

• Webflow 공식 포럼: forum.webflow.com
• Discord 채널: 실시간 질문 답변
• YouTube 채널들:
  • Webflow 공식 채널
  • Flux Academy (고급 튜토리얼)
  • PixelGeek (한국어 자막 있는 영상도 있음)

프로젝트 아이디어:

1. 개인 포트폴리오 사이트 고도화
2. 친구/지인 사업을 위한 홍보 사이트
3. 블로그 + CMS 컬렉션
4. 랜딩 페이지 (제품/서비스 소개)
5. 온라인 이력서 사이트

자주 묻는 질문 (FAQ)

Q: 무료 플랜으로 계속 사용 가능한가요?
A: 네! 무료 플랜으로도 계속 사용할 수 있습니다. 다만 페이지 수 제한(2개)과 webflow.io 도메인만 사용 가능합니다. 취미 프로젝트나 포트폴리오용으로는 충분합니다. 본격적으로 사업용 사이트를 만들거나 SEO가 중요하다면 유료 플랜을 추천합니다.

Q: 코딩 지식이 전혀 없어도 정말 괜찮나요?
A: 100% 괜찮습니다! 이 가이드를 따라온 것처럼 코딩 없이도 충분히 완성할 수 있습니다. 다만 HTML/CSS 기본 개념을 알면 Webflow를 더 깊이 이해할 수 있습니다. 추천 학습 순서: Webflow로 만들면서 배우기 → 나중에 필요할 때 HTML/CSS 개념 찾아보기.

Q: WordPress에서 Webflow로 이전할 수 있나요?
A: 직접 자동 변환은 안 되지만, 콘텐츠를 옮길 수는 있습니다. WordPress 글들을 CSV로 내보내고 → Webflow CMS로 가져오는 방식입니다. 디자인은 Webflow에서 새로 만들어야 합니다. 복잡한 WordPress 사이트라면 전문가의 도움을 받는 것도 방법입니다.

Q: Webflow로 수익 창출이 가능한가요?
A: 가능합니다! 여러 방법이 있습니다:

1. 프리랜서: 기업 사이트 제작 대행 (건당 100만~500만원)
2. 템플릿 판매: Webflow 마켓플레이스에서 템플릿 판매 (개당 $29~$199)
3. 클라이언트 청구제: 고객 사이트를 관리하고 월 관리비 수령
4. 강의/컨설팅: Webflow 교육 콘텐츠 제작

실제로 많은 분들이 Webflow로 프리랜서 커리어를 시작했습니다!

Q: Webflow와 Framer, 어떤 게 더 나은가요?
A: 둘 다 훌륭하지만 용도가 다릅니다:

• Webflow: 복잡한 사이트, CMS, 이커머스에 강함. 학습 곡선이 있지만 더 강력함.
• Framer: 빠른 프로토타이핑, 인터랙티브 디자인에 특화. 배우기 쉽고 디자이너 친화적.

정답은 없습니다. 두 가지 다 배워보고 자신에게 맞는 걸 선택하세요!

 

📚 관련 글 추천

다음 글들도 함께 읽어보세요:

• Webflow CMS 사용법 완벽 가이드 - 블로그 10분 만에 구축하기
• Webflow vs Framer 차이점 비교 2025 - 당신에게 맞는 툴은?
• Webflow 반응형 디자인 체크리스트 12 - 모바일 최적화 완벽 정복
• Webflow 호스팅 vs AWS 비용 비교 - 어떤 게 더 저렴할까?

---

마지막 한마디

"코딩을 몰라서 웹사이트를 못 만들 거야"라는 생각은 이제 과거입니다. Webflow 같은 도구 덕분에 누구나 아이디어를 현실로 만들 수 있는 시대가 왔습니다.

이 가이드를 끝까지 따라오신 여러분, 정말 수고하셨습니다! 🎉

지금 만든 사이트가 비록 완벽하지 않더라도 괜찮습니다. 중요한 건 시작했다는 것, 그리고 계속 발전시켜 나갈 수 있다는 것입니다.

오늘 배운 내용을 잊기 전에 바로 실습해보세요.
책으로만 수영을 배울 수 없듯이, Webflow도 직접 만져봐야 내 것이 됩니다.

행운을 빕니다! 여러분의 멋진 웹사이트를 곧 만나길 기대합니다. 🚀

 

 

---

태그: #Webflow #노코드 #웹사이트제작 #Webflow튜토리얼 #반응형디자인 #웹디자인 #포트폴리오 #초보자가이드 #코딩없이