【Webflow】오늘부터 쓸 수 있는 무료 템플릿 10선

Webflow 쇼케이스

Webflow 쇼케이스란 사용자가 직접 만든 웹사이트를 공개하는 페이지입니다. 클론 가능한(복사 가능한) 프로젝트는 오픈 소스로, CC0 라이선스 하에 이용할 수 있습니다.

이런 궁금증에 답합니다.

✓이 글의 내용

• Webflow에서 오늘부터 쓸 수 있는 무료 템플릿을 종류별로 소개【포트폴리오·음식점·소재 템플릿】
• 템플릿·쇼케이스의 저작권에 대하여
  

이 글을 쓰는 저는 Webflow로 웹사이트를 제작하며 월 30만 엔 정도의 수익을 올리고 있습니다. 이 블로그도 원래 Webflow 템플릿을 사용해 만들어졌습니다.

이런 경험을 살려 이번에는 Webflow의 템플릿을 해설합니다.

Webflow에서 오늘부터 쓸 수 있는 무료 템플릿을 장르별로 소개

전제로 Webflow에는 “템플릿”과 “쇼케이스” 2가지 기능이 있습니다.
“쇼케이스”란 사용자가 직접 만든 웹사이트를 공개하는 페이지입니다.
이번에는 “복사 가능한 쇼케이스”를 종류별로 소개합니다.

✓템플릿·쇼케이스의 저작권

• Webflow에서 클론 가능한 프로젝트는 오픈 소스입니다(CC0 라이선스 하에 이용 가능).
  자세한 내용은 Webflow 공식 사이트에 기재되어 있습니다.
  >>>Cloneable project

보기만 해도 즐거워지는 템플릿은 이 글 후반의 “굉장한 쇼케이스 6선”에 정리했습니다.

포트폴리오 사이트 템플릿

T.RICKS Bubbles

거품처럼 사진이 계속 위로 떠오르는 템플릿입니다. 사진을 3초 정도 클릭한 채로 있으면 링크를 열 수 있습니다. 단순한 포트폴리오가 아니라 조금 공들인 것을 원하는 분께 추천합니다.

변경에 필요한 예상 시간: 3시간

초보자도 이미지·문장이 준비된 상태에서 3시간 정도면 자기용으로 바꿀 수 있습니다.

장점·단점

장점은 포트폴리오 사이트로 기술력을 어필할 수 있다는 점과 빠르게 만들 수 있다는 것.
단점은 오리지널 요소를 더하려면 사이트 구조를 배워야 한다는 것. 버블을 해체해 애니메이션과 배치 방법을 공부해야 합니다.

Indi Harris – one-page personal site

이름 그대로 1페이지의 심플한 포트폴리오 사이트입니다. 간단한 애니메이션도 있어 기술을 확실히 어필할 수 있습니다. 자기 작품을 싣기 쉽고 보기 편한 것이 특징입니다.

변경에 필요한 예상 시간: 1시간

이미지와 문장만 바꾸면 쉽게 내 사이트로 바꿀 수 있습니다. 메일 변경에서 조금 헤맬 수 있지만 작업 자체는 매우 간단합니다.
>>단 5분 만에 문의 폼을 만드는 방법【Webflow University】

장점·단점

장점은 디자인이 심플해 직접 바꾸기 쉽고, 사이트가 보기 편해 면접 제출용으로 알맞다는 점.

단점은 디자인으로 큰 차별화가 어렵다는 것. 포트폴리오로 차별화할 필요가 없는 분께는 이 사이트가 가장 추천입니다.

Photographer's portfolio

이번에 소개하는 포트폴리오 중 가장 공들인 디자인이 이것. 애니메이션이 많이 사용되어 여러 기술이 필요한 사이트입니다. 이것을 만들 수 있다면 상당한 수준의 사이트를 만들 수 있다고 어필됩니다.

작업 예상 시간: 8시간

홈 외의 정보와 문의 폼 변경이 필요해 시간이 조금 걸립니다.

장점·단점

장점은 이 수준의 사이트를 만들 수 있다는 것 자체가 어필이 된다는 점. Webflow로 새 사이트를 만들 수 있는 수준까지 성장할 수 있습니다.

단점은 시간이 걸린다는 것. 완성된 사이트를 개조해 오리지널리티를 내는 것은 어렵습니다.

음식점에서 쓸 수 있는 템플릿

Geoli

싱글 페이지로 쉽게 자사 사이트로 바꿀 수 있는 템플릿입니다. 메뉴판을 웹사이트에서 주로 소개하고 싶은 분께 추천. Gallery에 Instagram 링크를 얹으면 SNS와도 잘 연계됩니다.

작업 예상 시간: 1시간

헤더 색·폰트·사진만 바꿔도 자기 가게 사이트의 모습이 상당히 잡힙니다. 색 선택이 고민되면 “초보자도 프로 같은 디자인을 만드는 방법”을 참고하세요.

장점·단점

장점은 매우 쉽게 변경 가능하다는 것. 웹사이트를 만들어 본 적 없는 분도 바로 만들 수 있습니다.

단점은 최소한의 정보만 실을 수 있다는 것입니다.

Restaurant Mulberry Street

이것도 싱글 페이지로 적당한 애니메이션이 있습니다. 페이지 안에 문의 폼과 Google 지도가 있어 방문자를 그대로 가게 예약으로 이을 수 있습니다. 조금 공들인 디자인을 원하는 분께 추천합니다.

작업 예상 시간: 2시간

Google 지도와 문의 폼 등 바꿀 요소가 조금 많습니다. 이미지를 미리 준비해 작업합시다.

장점·단점

장점은 깔끔한 디자인에 적당한 애니메이션이 있어 그대로 써도 타 매장과 차별화된다는 것.

단점은 초보자는 도중에 엉망이 될 가능성이 있다는 것. 곤란해지면 문의해 주세요. 저렴하게 작업 대행을 하고 있습니다.

Osteria60 - Fine Dining Restaurant

음식점 계열에서 가장 공들인 디자인은 이것. 페이지가 계층별로 나뉘어 많은 정보를 실을 수 있습니다. 디자인도 깔끔해서 웹사이트로 가게를 제대로 소개하고 싶은 분께 추천합니다.

작업 예상 시간: 2일

페이지 수가 많아 시간이 꽤 걸립니다. 2일이란 모든 문장·이미지가 확정된 상태에서의 시간입니다. 일반적인 웹 제작이 1주일 정도 걸리는 것을 생각하면 2일도 상당히 빠릅니다.

장점·단점

장점은 프로와 동등한 사이트를 만들 수 있다는 것. 모객과 브랜딩에도 큰 효과를 발휘합니다. 20〜40만 엔에 웹사이트를 제작하는 회사보다 더 좋은 사이트를 만들 수 있을 정도입니다.

사진·문장을 준비할 수 있다면 10만 엔 정도로 제작 대행도 받고 있으니 희망하시면 문의해 주세요.

Webflow 소재가 든 템플릿

오리지널리티 높은 사이트를 만들고 싶은 분을 위해 소재 템플릿을 소개합니다. 각 템플릿에서 소재를 복사해 조합하면 오리지널 사이트를 만들 수 있습니다.

Legowerk

Cards 2.0 - Framework/UI Kit

Prospero Ecommerce UI Kit

번외편: 눈을 의심하는 굉장한 템플릿·쇼케이스 6선

여기서부터는 “뭐? 이런 것도 만들 수 있어?” 싶은 쇼케이스를 6가지 소개합니다. Webflow 표현력의 상한을 아는 데 최적입니다(일부는 복사 불가·감상용입니다).

굉장한 기술①
iPhone12 Pro 판매 페이지

제작자: moritzpetersen

Apple의 판매 페이지를 참고해 만든 무료 템플릿. 이것이 있으면 Apple 같은 최첨단 웹사이트도 쉽게 만들 수 있습니다. “Apple 같은 웹사이트를 원해요!”라는 요청을 받았을 때 참고하면 큰 수고를 덜 수 있습니다.

굉장한 기술②
Windows 95 (not clone)

By normandurkee

IT 혁명의 출발점이라 부를 만한 Windows95를 참고해 만든 홈페이지. 이미 “참고”가 아니라 “완전 재현”이죠. 참고로 이것은 복사해서 쓸 수 없습니다. 작품이라 부르는 것이 어울립니다.

굉장한 기술③
플레이스테이션 4

제작자: Protocore

PS4 화면을 본떠 만든 웹사이트. 마우스로 게임을 클릭하면 게임 영상이 흐르고 계정 생성 페이지도 있습니다. Webflow로 이런 고도의 것을 만들 수 있다는 것만으로 다양한 가능성이 느껴집니다. 이 PS4 사이트도 복사 가능합니다.

굉장한 기술④
애니메이션의 역사

by hvinh1

놀랍게도 이 웹사이트, (스크립트) 애니메이션이 전혀 없습니다. 그런데도 스크롤에 따라 캐릭터 배경이 바뀌고 그림이 추가되는 등 다양한 장치가 준비되어 있습니다. 꼭 방문해 보세요.

굉장한 기술⑤
포켓몬 카드 홈페이지

제작자: mubarakmarafa

마우스를 올리면 피카츄가 움직이며 포켓몬 카드가 되는 장치가 있는 웹사이트. 3D로 매우 입체적입니다. 커스텀에 따라 좋아하는 캐릭터나 자사 마스코트를 같은 방식으로 배치할 수 있습니다.

굉장한 기술⑥
노을

제작자: jbergamaschi

마치 게임의 오프닝 화면 같은 웹 디자인. 구름 하나하나에 애니메이션이 붙어 천천히 움직입니다. 배경도 매우 입체적이고 공들인 구조입니다. 이것도 자유롭게 편집할 수 있습니다.

정리: Webflow의 템플릿은 상당히 풍부

Webflow를 조금만 다룰 수 있어도 웹사이트는 쉽게 만들어집니다. 앞으로는 SEO 최적화와 예약이 늘어나는 “효과가 나는 사이트 디자인”을 배울 필요가 있다는 것입니다.

Webflow는 무료로 상당히 많은 기능을 쓸 수 있습니다. 먼저 등록만 하고 만져 보는 것을 추천합니다.
등록은 “여기”

‍