※이 글에서 소개하는 템플릿·쇼케이스 정보는 2022년 1월 시점의 것입니다. 현재는 게재가 종료되었거나 내용이 변경되었을 수 있습니다.
이런 의문에 답합니다.
✓이 글의 내용
- Webflow에서 오늘부터 쓸 수 있는 무료 템플릿을 종류별로 소개합니다. [포트폴리오, 음식점, 소재 템플릿]
- 템플릿·쇼케이스의 저작권에 대해
이 글을 쓰는 저는 Webflow로 웹사이트 제작을 하며
월 30만 엔 정도의 수익을 올리고 있습니다.
또 이 블로그도 Webflow로 만들어 관리하고 있으며,
Webflow 템플릿을 사용해 만들었습니다.
이러한 경험을 살려 이번에는 Webflow 템플릿에 대해 해설합니다.
이 글의 요점
- Webflow의 쇼케이스란?
- Webflow의 쇼케이스란 사용자가 직접 만든 웹사이트를 공개하고 있는 페이지입니다. 클론 가능(복사 가능)한 프로젝트는 오픈소스로, CC0 라이선스 아래에서 이용할 수 있습니다.
목차
Webflow에서 오늘부터 쓸 수 있는 무료 템플릿을 장르별로 소개합니다
전제로, Webflow에는 “템플릿”과 “쇼케이스”라는 2가지 기능이 있습니다.
“쇼케이스”란 사용자가 직접 만든 웹사이트를 공개하고 있는 페이지입니다.
이번에는 “복사 가능한 쇼케이스”를 종류별로 소개합니다.
✓템플릿·쇼케이스의 저작권에 대해
- Webflow에서 클론 가능한 프로젝트는 오픈소스입니다(CC0 라이선스 아래에서 이용할 수 있습니다). 자세한 내용은 Webflow 공식 사이트에 적혀 있습니다. >>>Cloneable project
보고만 있어도 즐거워지는 템플릿은 이 글 후반의 “놀라운 기술 쇼케이스 6선”에 정리해 두었습니다.
포트폴리오 사이트 템플릿
T.RICKS Bubbles
T.RICKS Bubbles
거품처럼 사진이 위로 계속 떠오르는 템플릿입니다.
사진을 3초 정도 클릭한 채로 두면 링크를 열 수 있습니다.
단순한 포트폴리오 사이트가 아니라 조금 공들인 것을 원하는 분에게 추천합니다.
변경에 필요한 예상 시간: 3시간
초보자라도 이미지와 문장이 갖춰진 상태라면 3시간 정도면 자신용으로 변경할 수 있습니다.
기술이 조금 있는 분은 목차를 만들면 보기 좋을지도 모릅니다.
장점·단점
장점은 포트폴리오 사이트로 기술력을 어필할 수 있다는 점과 바로 만들 수 있다는 것입니다.
단점은 오리지널 요소를 더하려면 사이트 만드는 법을 배워야 한다는 것입니다.
버블을 해체해서 애니메이션을 다는 법과 배치 방법을 공부해야 합니다.
Indi Harris – one-page personal site
Indi Harris – one-page personal site
이름 그대로 1페이지짜리 심플한 포트폴리오 사이트입니다.
간단한 애니메이션도 붙어 있어 기술을 확실히 어필할 수 있습니다.
또 자신의 작품 등도 싣기 쉽고 보기 편한 것이 특징입니다.
변경에 필요한 예상 시간: 1시간
이미지와 문장을 바꾸면 간단히 자신의 사이트로 바꿀 수 있습니다.
메일 변경에서 조금 헤맬 수 있지만 작업 자체는 아주 간단합니다.
이 블로그에서도 해설하고 있으니 막히는 분은 아래 글을 봐 주세요.
>>Webflow 대학 Webharu 해설판(일본어)
장점·단점
장점은 디자인이 심플해서 직접 변경하기 쉽고,
사이트 자체가 보기 편해 면접 제출용으로 적합하다는 점입니다.
단점은 디자인으로 크게 차별화할 수는 없다는 것입니다.
특히 포트폴리오 사이트로 차별화할 필요가 없는 분에게는 이 사이트를 가장 추천합니다.
Photographer's portfolio
Photographer's portfolio
이번에 소개하는 포트폴리오 사이트 중 가장 공들인 디자인이 이것입니다.
애니메이션도 많이 사용되어 여러 기술이 필요한 사이트입니다.
이것을 만들 수 있다면 어느 정도 수준 높은 사이트를 만들 수 있겠다고 생각하게 만듭니다.
작업 예상 시간: 8시간
홈페이지 이외의 정보와 문의 폼도 변경해야 하므로 시간이 조금 걸릴 것 같습니다.
장점·단점
장점은 이 수준의 사이트를 만들 수 있으면 포트폴리오 사이트 자체로 어필할 수 있다는 것입니다.
또 Webflow로 새로운 사이트를 만들 수 있는 수준까지 성장할 수 있다고 생각합니다.
단점은 시간이 걸린다는 것입니다.
이 사이트를 개조해 독창성을 내려 해도, 완성된 사이트는 손대기가 어렵습니다.
음식점에서 쓸 수 있는 템플릿
Geoli
Geoli
싱글 페이지로, 간단히 자사 사이트로 바꿀 수 있는 템플릿입니다.
주로 메뉴판을 웹사이트에서 소개하고 싶은 분에게 추천합니다.
이자카야(일본식 선술집) 홈페이지라면 그대로 쓸 수 있습니다.
Gallery에 Instagram 링크를 걸면 SNS와 잘 연계해서 쓸 수 있겠네요.
작업 예상 시간: 1시간
헤더의 색이나 폰트, 사진만 바꿔도 꽤 자기 가게의 사이트처럼 보이게 됩니다.
바꿀 색이 고민된다면 “초보자도 프로 같은 디자인을 만드는 방법”을 봐 주세요.
장점·단점
장점은 아주 간단히 변경할 수 있다는 것입니다.
웹사이트를 만들어 본 적이 없는 분도 바로 자신의 웹사이트를 만들 수 있습니다.
단점은 최소한의 정보밖에 실을 수 없다는 것입니다.
Restaurant Mulberry Street
Restaurant Mulberry Street
이것도 마찬가지로 싱글 페이지이며, 적당히 애니메이션이 붙어 있습니다.
게다가 페이지 안에 문의 폼과 Google Map이 있어서
웹사이트를 방문한 분을 그대로 가게 예약으로 연결할 수 있습니다.
조금 공들인 디자인의 웹사이트를 원하는 분에게 추천합니다.
작업 예상 시간: 2시간
Google Map이나 문의 폼 등 변경할 요소가 조금 많은 편입니다.
미리 이미지 등을 준비해 두고 작업합시다.
장점·단점
장점은 깔끔한 디자인에 적당한 애니메이션이 붙어 있어서,
그대로 쓰기만 해도 다른 가게와 차별화할 수 있다는 것입니다.
단점은 초보자는 도중에 엉망이 될 가능성이 있다는 것입니다.
변경하다 막히거나 도중에 엉망이 되어 버린 분은 이 블로그로 문의해 주세요.
저렴하게 작업을 대행해 드립니다.
Osteria60 - Fine Dining Restaurant
Osteria60 - Fine Dining Restaurant
음식점용 중 가장 공들인 디자인의 템플릿이 이것입니다.
페이지가 계층별로 나뉘어 있어 많은 정보를 실을 수 있습니다.
디자인도 깔끔하고 알기 쉬워서, 웹사이트로 가게를 제대로 소개하고 싶은 분에게 추천합니다.
작업 예상 시간: 2일
어쨌든 페이지 수가 많아서 꽤 시간이 걸릴 것입니다.
2일이라는 것은 모든 문장과 이미지가 정해진 상태에서의 시간입니다.
일반적인 웹사이트 제작은 1주일 정도 걸리므로 2일이어도 상당히 빠른 편입니다.
이것을 직접 전부 변경할 수 있다면 상당한 기술이 몸에 붙을 것입니다.
장점·단점
장점은 프로와 동등한 사이트를 만들 수 있다는 것입니다.
집객이나 브랜딩에도 상당한 효과를 발휘할 것입니다.
심지어 20만~40만 엔에 웹사이트를 제작하는 회사보다 좋은 사이트를 만들 수 있습니다.
사진과 문장을 준비할 수 있다면, 저 구리타가 10만 엔 정도에 제작 대행을 맡고 있습니다.(2026년 추가: 현재는 이 가격의 대행은 하지 않습니다. 현행 제작 메뉴는 AI 웹사이트 제작을 봐 주세요)
희망하시는 분은 이 블로그로 상담해 주세요. 문장까지 포함해 위탁하시는 경우에는 가격이 조금 달라집니다.
이야기만이라도 들어 보고 싶은 분은 Twitter나 블로그로 문의해 주세요.
Webflow 소재가 들어간 템플릿
독창성이 높은 사이트를 만들고 싶은 분을 위해 소재 템플릿을 소개합니다.
각 템플릿에서 소재를 복사해 조합하기만 하면 오리지널 사이트를 만들 수 있습니다.
처음부터 웹사이트를 만들고 싶은 분에게 추천합니다.
Legowerk
Cards 2.0 - Framework/UI Kit
Prospero Ecommerce UI Kit
번외편: 눈을 의심하게 되는 놀라운 기술 템플릿·쇼케이스 6선
여기서부터는 “어? 이런 것도 만들 수 있어?” 하고 저도 모르게 눈을 의심하게 되는 쇼케이스를 6개 소개합니다. Webflow의 표현력의 상한을 알기에 최적입니다(일부는 복사할 수 없는 감상용입니다).
놀라운 기술 ① iPhone12 Pro 판매 페이지
제작자: moritzpetersen
Apple의 판매 페이지를 참고해 만든 무료 템플릿입니다. 이 템플릿이 있으면 Apple 같은 최첨단 웹사이트를 제작하는 것도 어렵지 않습니다. “Apple 같은 웹사이트를 갖고 싶어요!”라는 말을 들었을 때 참고하면 꽤 수고를 덜 수 있을 것입니다.
이 템플릿을 만드는 절차를 제작자인 moritzpetersen이 동영상으로 해설하고 있으니, 그것을 보고 처음부터 만드는 법을 배우는 것도 좋겠네요. 저도 언젠가 일본어 해설을 만들어 볼까 합니다.
놀라운 기술 ② Windows 95 (not clone)
By normandurkee
IT 혁명의 출발점이라고도 할 수 있는 Windows95. 지금 빛나고 있는 저명인들은 입을 모아 95년의 충격을 이야기합니다. 그렇다고 해도 저는 그렇게 잘 아는 건 아니지만요.
그런 Windows95를 참고해 만든 홈페이지입니다. 이제는 “참고”가 아니라 “완전 재현”이네요. 사람에 따라서는 그리움을 느낄 것입니다. 참고로 이것은 복사해서 쓸 수 없습니다. 작품이라고 부르는 것이 어울리겠네요.
구석구석까지 공들인 사이트입니다. 왠지 컴퓨터가 무거워진 느낌이 듭니다. ㅎㅎ
놀라운 기술 ③ 플레이스테이션 4
제작자: Protocore
컴퓨터 개조 의혹까지 나올 것 같은, 플레이스테이션 4의 화면을 따라 만든 웹사이트입니다. 무엇부터 무엇까지 진짜라고 착각하게 만드는 완성도에 두근거리게 됩니다.
마우스로 게임을 클릭하면 게임 영상이 흐르고, 계정 생성 페이지도 있습니다. 이것을 어떻게 홈페이지로 활용할지는 일단 접어 둡시다. Webflow로 이렇게 고도한 것을 만들 수 있다는 것을 아는 것만으로도 다양한 가능성이 느껴지네요. 참고로 이 PS4 사이트도 복사할 수 있습니다. 사용자 아이콘이나 게임 화면 등을 직접 바꿀 수 있어요.
게이머의 포트폴리오 사이트가 게임 화면 그 자체라면, 그것만으로도 한 수 위의 존재가 될 수 있을 것 같네요!
Protocore 님은 PS4뿐 아니라 그 밖에도 재미있는 작품을 많이 만들고 있습니다. 꼭 한번 계정 페이지를 방문해 보세요. 홈페이지의 참고가 될지는 모르겠지만 유니크한 웹사이트뿐입니다. 앞으로 게임 화면 웹사이트를 채용하는 병원이 있다면 너무 안 어울려서 화제가 될 것 같네요(웃음). 보기 불편하다는 클레임이 쇄도할 것 같지만요…
놀라운 기술 ④ 애니메이션의 역사
by hvinh1
놀랍게도 이 웹사이트에는 (스크립트) 애니메이션이 전혀 붙어 있지 않습니다. 그런데도 스크롤에 따라 캐릭터의 배경이 바뀌거나 그림이 추가되는 등 다양한 장치가 준비되어 있습니다. 꼭 한번 방문해 보세요. 저도 모르게 맨 아래까지 스크롤하게 될 것입니다.
이 홈페이지는 제작자가 “자신의 일을 위해 만들었다. 앞으로도 업데이트해 나가겠다”고 말하고 있어서, 여러분이 방문할 때는 더 굉장해져 있을지도 모릅니다.
놀라운 기술 ⑤ 포켓몬 카드 홈페이지
제작자: mubarakmarafa
마우스를 올리면 피카츄가 움직이고 포켓몬 카드가 된다? 그런 장치가 있는 웹사이트입니다. 피카츄의 전격은 아주 입체적으로 보입니다…아니, 3D네요. 커스텀하기에 따라서는 좋아하는 캐릭터나 자사 마스코트를 똑같이 배치할 수 있을 것입니다. 다만 그러려면 3D 캐릭터 디자인이 필요합니다.
제 친구 중에 취미로 3D 디자인과 메타버스 건축가를 하는 사람이 있으니, “저렴하게 3D 오브젝트나 메타버스를 만들고 싶다”고 생각하신다면 한번 연락 주세요. 가능한지 물어보겠습니다.
놀라운 기술 ⑥ 저녁노을
제작자: jbergamaschi
마치 게임의 오프닝 화면 같은 이 웹 디자인. 구름 하나하나에 애니메이션이 붙어 있어 천천히 움직이고 있습니다. 또 배경이 아주 입체적이라 꽤 공들인 구성입니다. 이것도 자유롭게 편집할 수 있습니다. 언뜻 봐서는 구조를 잘 모를 수도 있지만, 편집하며 만지다 보면 점점 이해할 수 있을 것입니다.
이미지가 많이 쓰여서 사양이 높지 않은 PC나 스마트폰에서는 표시가 조금 느려질 수 있습니다. 파티 접수 페이지나 클럽 이벤트 같은 데 쓰면 웹사이트부터 즐길 수 있는 멋진 이벤트가 될 것입니다.
정리: Webflow의 템플릿은 상당히 풍부하다
Webflow를 조금만 다룰 줄 알면 웹사이트는 간단히 만들 수 있습니다.
앞으로는 SEO 대책이나 예약 수가 늘어나는 “효과가 나는 사이트 디자인”을 배울 필요가 있다는 것입니다.
노코드에 도달한 여러분은 행운입니다.
지금부터 디자인만 공부하면 프리랜서로 돈을 벌 수 있으니까요.
Webflow는 무료로 상당히 많은 기능을 쓸 수 있습니다.
우선 가입만 해서 만져 보는 것을 추천합니다.
가입은 “여기”
제작 실적
자주 묻는 질문
Webflow 템플릿이나 쇼케이스의 저작권은 어떻게 되나요?
Webflow에서 클론 가능한 프로젝트는 오픈소스이며, CC0 라이선스 아래에서 이용할 수 있습니다. 자세한 내용은 Webflow 공식 사이트의 Cloneable project 페이지에 적혀 있습니다.
Webflow의 템플릿과 쇼케이스는 무엇이 다른가요?
쇼케이스란 사용자가 직접 만든 웹사이트를 공개하고 있는 페이지입니다. 이 글에서 소개하는 것은 그중에서도 복사 가능한 쇼케이스입니다.
템플릿을 자신의 사이트로 바꾸는 데 시간이 얼마나 걸리나요?
이미지와 문장이 갖춰진 상태를 기준으로, 심플한 1페이지 구성이라면 1시간 정도, 공들인 포트폴리오 사이트는 8시간, 페이지 수가 많은 음식점 사이트는 2일 정도 걸립니다.
번외편의 놀라운 기술 쇼케이스도 복사해서 쓸 수 있나요?
6선 중 PS4 부팅 화면과 저녁노을 쇼케이스는 복사해서 편집할 수 있지만, Windows95 재현 사이트 등 일부는 복사할 수 없는 감상용입니다.
템플릿 커스터마이즈를 대행해 줄 수 있나요?
본문 중의 “10만 엔 정도에 제작 대행”은 집필 당시(2022년)의 내용으로, 현재는 이 가격의 대행은 하지 않습니다. 현행 제작 메뉴는 AI 웹사이트 제작 서비스 페이지를 봐 주세요.
