먼치스킬 웹사이트 제작하기 시리즈
- 왜 디자이너가 직접 웹사이트를 만드나요? / 웹빌더 소개
- wordpress.com 과 Elementor 플러그인으로 디자인하기
- 웹사이트라면 필요한 SEO, 성능 최적화, 그리고 다언어지원
지난 번 로고 디자인 이후 현재의 먼치스킬 웹사이트는 wordpress.com 기반으로 Elementor 플러그인을 이용해 제작되었습니다. 직접 개발이 아닌 웹빌더로만 만들어진 웹사이트이며 아직 미흡한 부분이 많지만 지금까지 작업을 해왔던 과정을 소개하고 고쳐나가려고 합니다.
먼치스킬 웹사이트 제작하기 (1/3)
디자이너라면 개발자 없이 혼자서 만족할 만한 웹사이트 제작을 할 수 없을지 고민하셨던 적이 있나요? 개발자가 옆에 없었던 대학생 시절부터 하던 생각이지만 스타트업에서 일하면서도 생각했던 고민입니다.
개발자와 협업하여 웹사이트를 완성하고 나면 이틀 후부터 글씨 하나, 여백 하나에 신경이 쓰이고 고치고 싶어 지기 시작합니다. 그런데 고치고 싶은 사람은 디자이너뿐만 아니라 여러 이해관계자들도 있습니다. 인력과 시간이 부족한 스타트업에서 개발자 분들은 다른 수정사항이나 새로운 업무가 바빠 소소한 디자인 수정사항은 항상 3순위로 미룰 수밖에 없게 됩니다.
여러 기능이 들어가야 하는 회사의 메인 프로덕트라면 정해진 절차에 의해 수정되어야 하고 디자인 스타일 수정보다 중요한 것들이 많습니다. 하지만 비교적 간단한 웹페이지인 브랜드 웹사이트의 디자인 수정 사항도 같은 대기줄(Queue)에 올려놓고 기다려야만 하는 걸까요?
간단한 웹사이트는 직접 만들어보자 (코딩은 못하더라도..)
정말로 단순한 웹페이지 제작이라면 쉬운 이야기입니다. 하지만 회사의 웹사이트라면 블로그나 공지사항과 같은 콘텐츠 관리(Contents Management System), 양식(Form) 작성을 통한 리드 수집 등의 기능이 필요해지기 시작합니다. MVP 개발만으로도 빠듯한 스타트업에서 이것을 일일이 개발하기에는 인력과 시간이 부족합니다.
개발자 없이 해결하는 방법으로는 많은 기업에서 사용하는 방법들이 있습니다. 노션으로 작성한 공지사항이나 업데이트 노트를 퍼블리싱할 수 있고 Typeform이나 구글폼을 이용한 양식 작성, Ghost와 같은 강력한 블로그 서비스를 사용하는 방법도 있습니다.
각각의 서비스를 이용하면 필요한 기능들은 구현이 가능하지만 각기 다른 웹사이트로서 다른 서브도메인을 갖고 있을 수밖에 없고 디자인도 미묘하게 다르기에 일관성이 떨어집니다. 가능하다면 하나의 웹사이트 안에서 구현되길 바라면서 아래와 같은 기준대로 웹빌더 서비스를 찾아보았습니다.
스타트업 디자이너 입장에서 본 웹빌더의 기준
- 디테일에 대한 디자인 자유도가 갖추어질 것 (Size, Margin, Padding 등 세부 사이즈를 모두 수정할 수 있을 것)
- 반응형 웹사이트를 지원할 것
- 다언어(Multilanguage), CMS(블로그, 공지사항 등의 콘텐츠 관리 기능), Form작성을 지원할 것
- 퍼블리싱이 간단할 것
- 일부 HTML/CSS 스크립트 사용을 요구하나 웹 빌딩에 반드시 필요하지는 않을 것
- 웹사이트 성능이 빨라야 할 것
사용하거나 찍먹해 본 웹빌더 소개
그동안 사용해 보았던 웹빌더 서비스들을 주관적인 기준으로 소개합니다.
대부분의 웹빌더 서비스들은 웹디자이너를 위한 서비스라기보다 개발자뿐만 아니라 디자이너도 없는 사람들을 위한 서비스가 많았는데요. 많은 웹빌더들이 다양한 웹사이트 템플릿 지원을 강조하지만 디자이너 입장에서는 의미가 없었습니다. 디자이너로서 원하는 것은 피그마로 디자인한 화면을 가능한 그대로 웹빌더에 옮길 수 있느냐 없느냐가 선택의 조건이었습니다.
지금은 서비스 종료된 웹빌더
- Adobe Muse
- 2014년 대학교 졸업 작품을 만들 때 사용했던 툴입니다. 웹디자인은 어도비 툴답게 사용할 수 있었으나 페이지 간의 연동이나 인터렉션에서 곧바로 어려움에 봉착했고 퍼블리싱도 간단하지 않았습니다.
- IUEditor
- 평소 어도비에서 디자인할 때의 레이어 구조와는 달리 웹에 맞게 구조화되어있었습니다. 2016년 모바일 전용 웹사이트가 필요할 때 사용했었고 파일로 저장하여 개발자에게 전달 후 실서비스에 릴리즈 했었는데요. 간단한 소개 페이지 이상의 기능부터는 어려움이 많았고 버그도 많았기에 짧은 기간 동안 사용하고 웹사이트를 내렸습니다.
- IUEditor를 사용할 당시를 기록한 작업노트 (https://brunch.co.kr/@minihong/7)
스퀘어스페이스(squarespace.com) ★☆☆☆☆
세련된 디자인, 웹빌더를 검색하면 어김없이 나오는 서비스입니다.
하지만 스퀘어스페이스에서 지원하는 폰트는 알파벳 뿐이었습니다. 한국에서 공식적인 서비스 지원을 하고 있지 않아서 실사용하기에는 적합하지 않았습니다. 에디터도 조금 테스트해 보았는데요. 예쁜 템플릿을 골라서 그대로 사용하면 모를까 커스터마이징에는 무리가 있었습니다.
아임웹(imweb.me) ★★☆☆☆
급하게 새로운 회사 웹사이트를 만들어야 할 때가 있었는데요. 한국에서 개발자 없이 웹사이트를 만든다고 검색을 하다 보면 제일 먼저 찾게 되는 게 아임웹이었습니다. 3년 전 처음 접해보았을 때 기준으로 아임웹은 쉽게 시작할 수 있지만 디테일을 고치기는 쉽지 않은 웹빌더였습니다.
템플릿은 그대로 사용한다면 문제 될 것은 없지만 디자이너로써 보다 보면 고치고 싶은 부분들이 여럿 생겼는데요. 필요한 기능을 찾지 못해 CS를 요청하면 친절하지만 원하는 답변을 받기는 어려웠습니다.
(현재의 아임웹은 더 좋아졌을 거라 생각됩니다.)
Wix(wix.com) ★★★☆☆
Wix를 처음 알게 된 것은 2014년이었고 당시 졸업 전시 준비를 하던 대학생이었습니다. 같이 졸업하는 동기들의 작업물을 보다 보면 웹사이트도 구축해 놓은 사람들도 더러 있었는데 대부분은 Wix였습니다. 뭔가 어설프고 결제하지 않으면 항상 따라오는 Wix 로고 덕분에 알게 되었는데요.
당시에는 급할 때 쉽게 웹사이트를 만들 수 있는 서비스구나 생각했습니다.
스타트업에서 디자이너로 일할 때, 마케팅을 위한 랜딩페이지, 리드 수집이 필요한데 개발팀의 인력이 부족할 때가 있었습니다. 글로벌 쇼핑몰은 Shopify로 구축했지만 마케팅용 랜딩 페이지는 어떻게 만들어야 할지 찾다가 다시 떠오른 서비스가 Wix였습니다.
제대로 써보게 된 Wix는 세련되거나 트렌디한 느낌은 아니었지만 예상외로 필요했던 기능들은 모두 구현되었습니다. 디자인 툴처럼 마우스로 오브젝트를 배치하거나 그리드에 맞출 수 있고 곧바로 퍼블리싱할 수 있다는 점이 매력적이었습니다.
아임웹도 거의 동일한 기능을 지원하고 한국인에게 더욱 친화적인 서비스이긴 했으나 디자이너 입장에서 디테일 수정이 어렵다는 것은 아쉬움이 컸기에 실서비스에는 Wix를 주로 사용했었습니다.
하지만 몇 가지 문제가 있었는데요. 완전한 반응형 웹사이트는 아니었기에 모바일 웹페이지를 별도로 두어야 합니다. 여기서 디자인 자유도가 급격히 떨어진다는 점, 다국어 지원이 조금 어설프다는 점이 있었습니다.
무엇보다 큰 문제는 Wix로 기능을 붙여나가다 보면 웹사이트의 속도가 너무 느려진다는 점이었습니다. 사용처가 간단하고 빠르게 출시해야 하는 경우에 적당한 웹빌더였습니다.
Webflow(webflow.com) ★★☆☆☆
Webflow는 앞서 소개한 웹빌더와는 결이 다른 웹빌더입니다. IUEditor가 그나마 비슷한 특징을 갖고 있었는데요. Webflow는 그래픽 툴처럼 보이지만 HTML/CSS 스크립트 기반으로 구조를 생각하고 배치를 해야 합니다. 취지는 좋았으나 체감상 IUEditor보다 러닝 커브가 높았습니다. 기존의 만들어 둔 랜딩 페이지 디자인을 그대로 Webflow에서 만들어 보려고 시도했으나 단락 하나 만드는 것도 쉽지 않아 포기하게 되었습니다.
가장 실제 개발에 가까운 웹빌더로 소개되어 기대가 컸었는데요. 막상 지인들의 의견을 들어보니 Webflow로 웹페이지를 만들어서 개발자에게 전달되어도 실제 개발에 사용하기 좋게 빌딩 되지는 않는다고 이야기를 들었습니다. 개발자와 협업하며 쓰기에는 노력이 필요해 보였는데요. 디자이너 혼자 만든다고 했을 때 러닝커브가 높더라도 제대로 파고들면 완성도 높은 웹사이트를 만들 수 있을 것으로 생각됩니다.
프레이머(framer.com)
프레이머는 2015년에 코드 베이스의 프로토타이핑 툴로서 알게 되었습니다. 토스와의 협업으로 디자인 툴을 넘어 개발과 직접 연결되는 툴로 변화되었다는 것을 들었는데요. 최근에는 웹빌더로서 서비스를 시작하고 있었습니다. 프레이머의 유려한 인터렉션 디자인은 매력적이지만 너무 최근에 나온 툴이라 어떻게 변화할지 예상할 수 없어서 선택지에서는 제외했습니다.
워드프레스 (wordpress.com) ★★★★☆
워드프레스는 가장 유명하고 역사가 깊은 블로그 기반의 웹빌더 입니다. 2022년 기준 전세계 웹사이트 중 43.1%가 워드프레스로 만들어졌으며 백악관 웹사이트 또한 워드프레스 기반입니다.
그동안 워드프레스에 대한 명성을 듣기만 했지 사용하지 않았던 이유는 설치형이었기에 초반 세팅에 대한 부담감이 컸는데요.
워드프레스는 설치형인 wordpress.org와 가입형인 wordpress.com 으로 나뉘며 wordpress.com의 경우 구독만 한다면 호스팅에 대한 고민 없이 직접 호스팅 및 보안 등의 관리를 지원합니다.
워드프레스의 기본 에디터만으로는 디테일한 디자인 작업은 어렵습니다. 워드프레스는 방대한 플러그인을 갖고 있고 그 중 Elementor 플러그인은 Wix만큼 쉽지만은 않았는데요. 하지만 원하는 만큼의 반응형 웹페이지 디자인을 할 수 있다는 점에서 매력적이었습니다. 사용하면 할수록 강력한 기능들을 발견할 수 있었기에 선택하게 되었습니다.
추가로 사용해보지 못한 웹빌더들
웹빌더에 대한 웹서핑 중 한국 노코드 커뮤니티와 노코드 관련 블로그를 보고 아직 모르고 있던 앱, 웹빌더들이 많다는 것을 알았습니다. 중도 포기했던 Webflow 또한 계속 성장중인 가능성있는 웹빌더라는 것을 다시 알게 되었고 하나씩 테스트해 볼 생각입니다.
다음 포스팅은 워드프레스로 웹사이트를 구축하고 Elementor 플러그인으로 디자인했던 경험에 대한 내용으로 이어집니다.