72시간 안에 Framer로 웹사이트 만들기

회사 웹사이트를 스스로 만들어 보고 싶다는 생각을 1년 전부터 했는데, 미루고 미루다 오늘 실천했습니다.

감정이 움직여서 행동에 대한 의지가 있을 때, 어떤 지식을 습득했을 때 72시간 내에 실행하겠다는 스스로의 원칙에 충실하게 72시간의 타임라인을 설정하고 시작했어요. 결론적으로 72시간 안에 웹사이트를 커스텀 도메인에 퍼블리싱하는 것은 실패했습니다. 실제로는 최종 퍼블리싱까지 총 7일이 걸렸습니다. 하지만, 초기 72시간 동안에 의도한 결과물을 만들 수 있을만큼의 실천적인 학습과 작업물 구축에 성공하자, 새로운 툴을 배워서 적용하는 일으 포기하지 않고 이어나갈 수 있었어요.

Framer를 이용해서 개발하기로 일단 결심한 후에, Framer의 가장 기본적인 튜토리얼 유튜브 영상들을 먼저 가볍게 시청했습니다. 그 다음에는 만드려는 웹사이트에 필요한 기능 중심으로 다시 공부하면서 만들었습니다.

Framer를 배우기 전에도 webflow를 주말에 몇 주 동안 공부해서 간단한 연습용 랜딩페이지를 만든 적이 있었고, Figma도 동료들과 협업할 목적으로 공부를 했었습니다. 하지만, 디자인툴의 성격을 포함한 툴들을 공부할 때 아래와 같은 어려움들이 있어서 회사 홈페이지를 리뉴얼하는 수준에는 도달하지 못했어요. 이번에는 왜 실천을 염두하고 학습해서 유의미한 결과에 도달하지 못했는지를 분석하고 해결책을 찾아서, 회사 홈페이지(https://nptn.io)에 최종 퍼블리싱까지 마쳤어요.

창업자 입장에서 디자인툴을 배우기 어려운 점

• 디자인툴은 시각적인 학습을 많이 해야 하는데, 툴을 사용하는 구성요소들이 모두 생소한 상태에서 강의를 봐도 습득이 잘 되지 않아요.
• 강의를 볼 때 실습을 하지 않으면 상당히 간단해 보이는 내용도 습득이 되지 않는다.
• 그렇다고 일일히 다 실습을 하면서 영상을 보려고 하면 시간이 너무 오래걸리고, 하다가 똑같이 구현이 안되는 부분이 생겼을 때 병목현상이 일어나서 포기하고 싶어진다.
• 교과서 공부하듯이 강의를 공부하는 것이 안맞다고 생각하고, 원하는 웹사이트를 기획해서 만드려고 하면 기본기가 부족하기 때문에 '이건 대체 어떻게 해야 하는거지?' 하는 막히는 상황을 자주 만난다.
• 개발을 정체시키는 궁금한 딱 그 부분에 대한 강의나 설명을 찾기가 어렵고, 막히는 것들이 많으면 포기하고 싶다.
• 이런 저런 업무와 결정이 많은 대표 특성상 진득하게 툴에 대해서 공부하기가 쉽지 않다.
• 대표가 사업 전략이나 크고 거시적인 업무에 집중해야지 툴을 배우는데 시간을 할애하는 것이 적절한 것인가 하는 자기 검열도 일어났다.

Framer를 노코드 웹빌더로 채택한 이유

• 학습 과정을 이야기 하기 전에 웹사이트를 만들 수 있는 여러 노코드툴 중에서 Framer를 선택했는지 설명해보겠습니다.
• Framer의 성장 스토리: 창업자로서 스타트업이 피벗하고 성장하는 과정에 끌리는 편입니다. Framer는 제가 창업을 준비할 무렵에 우연히 접할 기회가 있었는데 Protyping tool이었어요. 한국의 Protopie하고 비슷한류의 서비스로 기억합니다. 당시에 간단히 검토했을 때는 개발 지식이 없으면 학습하기가 상당히 어려웠어요. 그러던 서비스가 점차로 웹사이트를 바로 퍼블리싱할 수 있는 형태로 변화하더니, 아예 no-code level도 사용이 용이해지는 것을 관찰했습니다. 랜딩페이지를 Framer로 제작하는 스타트업들이 점차 많이 보였어요. 진화하는 서비스에 대한 응원 측면에서 쓰고 싶어졌고, 감각적인 서비스라서 매력적이었어요.
• Webflow는 직관적인 인터페이스로 웹사이트를 만들 수 있고, html 이나 css 원리에도 매우 충실해서 높은 수준의 웹사이트를 만들 수 있다고 생각해요. 하지만, 너무 근본적인 웹개발에 충실한 서비스라서, 웹개발 경험이 없는 사람이 시작하기에는 러닝커브가 높았어요. 반면, Framer는 약간은 개념을 이해하는데 시간이 걸렸지만 훨씬 더 쉽고 직관적으로 웹사이트를 만들 수 있었어요. 사용이 쉽다고 해서, 구현에 제약이 많거나 심미성이 떨어지는 결과물이 나오는 것도 아니라서 학습의 sweet spot에 있다는 생각이 들었습니다.
• 쉬운 자체 개발 + 외주 협업 : 스스로 툴을 배워서 왠만큼 웹사이트를 직접 만들 수도 있지만, 구축된 사이트를 Upwork나 Firverr 같은 International Outsourcing platform에 있는 파트너를 통해 업그레이드 할 수도 있는 점이 매력적이었요. 트러블 슈팅을 혼자서 하다가 해결이 안되면 부분이 계속 생긴다면 Framer를 쓰기가 꺼려질텐데, 외부의 전문가 도움을 쉽게 구할 수 있다는 점이 비용대비 효율을 따지는 창업자 입장에서 메리트가 컸어요. 유료 템플릿 생태계도 굉장히 잘 구축되어 있어요.
  
  

웹사이트 제작 노코드툴 학습저항을 돌파한 방법

• 똑같은 초보자격인 회사의 Summer님과 같이 정해진 기간에 Framer를 각자 학습하면서, 배워서 실습한 것들을 공유하고 막히는 것이 생길 때 서로 물어보면서 해결
• 내가 구현하고 싶은 웹사이트에 근접한 템플릿을 찾아서, 최소한의 수정만으로도 바로 퍼플리싱 할 수 있게함
• 템플릿으로 어느정도 완성된 수준의 웹사이트를 목표로 작업하는 동시에, 아주 아주 간단한 원페이지 랜딩페이지를 연습 삼아 만들어서 자신감을 얻음
• 72시간 시한을 정해서 최소한의 기능을 충족하는 홈페이지를 만들기로 정함
• 정해진 시간 내에 만들었을 때, '작업 중' 상태인 것이 티나는 미완성 부분이 없도록 마감처리가 된 사이트로 만들만큼 최소한으로 만듬
• 정해진 시간 내에는 Framer로 웹사이트를 만드는 일에만 집중하고, 다른 유용하고 중요한 일이 있더라도 72시간 이후에 할 수 있다고 다시 생각하기
• 하루 이틀에 할 수 있는 일은 생각보다 많지 않기 때문에, 웹사이트 제작 기술을 배워서 평생동안 활용할 수 있다면 72시간 정도는 기꺼이 투자할 만하다고 생각하기
• 작업하기 전에 시한과 목표를 종이에 적어놓고 '5분 동안 노려보기' - 다른 일로 마음이 산만해지고, 적당히 미루고 싶어지는 마음을 물리치고 구체적으로 행동하게 도움이 많이 되엇다.

학습 및 웹사이트 퍼블리싱 후에 얻은 것

• 개발자 동료의 마음을 이해: 다른 개발에 비하면 정말 간단한 웹개발이고, 노코드로 한 작업이지만 개발자의 입장을 체감하게 되었다. 개발은 기획과 계획을 기초로 시작되지만, 실제로 현물을 만들어 본 다음에 고치는 과정에서 구체화 된다. 처음에 페이지별 내용과 사이트 구조를 작성한 다음에 그대로 웹사이트를 만드려고 했지만, 실제로는 페이지를 구성하는 디자인적 요소나 구현을 할 때 제약사항, 실제 만들어봤을 때 예상과는 다른 느낌 때문에 만들면서 고쳐나가게 되었다. 즉, 계획과 임기응변이 절묘하게 혼합된다. 웹페이지 하나도 이렇게 계획대로 안되는데, 더 복잡한 시스템은 어떠하리
• 개발자 스타일로 문제를 해결하는 재미: 사소하지만, 가이드 문서나 웹서치 등으로 해결방안을 찾아서 조금씩 해결해 나가는 소소한 재미를 이해하기 되었다.
  • 커스텀 도메인에 퍼블리싱을 하려고 했는데, 도메인 관리사이트의 DNS 설정 인터페이스가 Framer에서 안내하는 방식과 호환되지 않았다. 아무리 검색을 해봐도 알 수가 없어서, 옆 사무실에 계신 개발사 대표님께 여쭤보았다. 개발을 오래하신 대표님께서도 모르시겠다면서 콜센터에 전화를 해보라고 하셨다. IT 서비스를 전화문의를 한다는 것에 익숙하지 않았는데, 생각보다 친절하고 도메인 관리사이트에서 사용자가 애초에 설정을 할 수 없어서 콜센터 직원이 아니면 처리가 되지 않는 것이었다. 전화 통화로 해결이 되고, 커스텀 도메인에 정상적으로 퍼블리싱이 되니 너무나 뿌듯하였다!
  • 웹사이트를 리뉴얼하고 나니, 회사 이메일이 발수신 되지 않았다. Framer를 통해 퍼블리싱하는 과정에서 DNS MX(Mail Exchange) 세팅이 변경되어서 생긴 문제였다. 이것도 직접 찾아서 고치니 몇 시간 후에 이메일이 정상 작동했다.
  • 트러블 슈팅이 끝이 없는데, 혼자서 거의 다 해결해 나가는 엔지니어들에 대한 경애심이 다시 한 번 들었다.
• 새로운 노코드툴을 배워서 할 수 있다는 자신감. 행동의 경로의존성이 형성
• 이제는 비즈니스 기획자인 대표나 사업개발 팀원이 회사 상황에 맞게 곧바로 회사 홈페이지를 업데이트 할 수 있다. 생각한 것을 바로 실천적인 결과물로 만들 수 있는 것이 하나라도 회사에서 더 많아지는 것이 고무적이다.
• 선배포 후수정 원칙을 지켜야 한다: 회사 도메인에 퍼블리싱 하기 전에는 부족한 것들이 눈에 많이 보이기 때문에, 계속 고치고 싶어진다. 하지만, 그렇게 계속 비공개로 고치다보면 고치다가 지쳐서 결국에 퍼플리싱을 못할 수도 있다. 사람 마음이 간사한 것이 정해진 일정에 배포를 막상 하고나면, 개선하고 싶었던 영역을 그다지 고치고 싶어지지 않는다. 그러나, 대중에게 공개를 하고 나면 체면 때문이라도 지속적으로 개선할 수 있다. 대중에게 보이는 것을 부끄러워하지 말고, 스스로에게 약속한 최초 일정을 지키는 것이 정말 중요하다고 다시 느꼈다.
• Framer의 뛰어난 과금 전략을 서비스를 쓰면서 직접 경험함:
  • Framer로 웹사이트를 완성해서, 회사의 Custome Domain에 퍼블리싱하려고 하는 시점에 유료 결제가 필수로 일어난다.
  • Editor가 2인 이상이 될 때, Team 과금이 일어난다.
  • CMS system을 2개 이상 만들거나, 5MB이상의 파일을 캔버스에 올리면 더 높은 티어의 과금이 일어난다.
  • 즉, 사용자의 관여도가 높아지는 중요한 단계별로 상향판매(Upsell)이 일어나서 상향판매 결제를 거절하기가 매우 어렵다. 그렇다고 구매후회나 거부감이 크게 일어나지 않는다. 상향 판매(Upsell) 전략이 효과적이면서도 사용자에게 부담을 주지 않는 균형을 잘 맞추고 있다고 느껴진다.
  • 제품 판매자 입장에서 배울 점이 많은 서비스이다.
• 나만의 노코드툴 학습 방식을 터득
  • 나의 경우, 문리적인 사람이라서일까, 시각적인 자료가 없이 글이나 말로 재설명이 가능한 상태가 되면 이해가 충분해진다
  • 꼭 영상을 시청하고 컴퓨터로 직접 실습하지 않아도, 툴에 더 익숙해질 수 있는 글로만 된 나만의 학습 교본을 만들어 나가면 좋겠다
  • 일단 결과물을 염두한 학습을 마치고 나니, 처음에 보았던 튜토리얼을 다시 볼 때 비로소 제대로 이해되기 시작했다.
• 감정이 이끄는 실행의 중요성:
  • 의욕과 감정이 있을 때 곧바로 결과물이 나올 수 있게 실행한 것이 주효했습니다.
  • 처음 목표였던 72시간 후 최종 배포는 성공하지 못했습니다. 그러나, 최종 결과물을 목표로 최초 72시간에 충분한 실천을 했기 때문에 결국에 일주일 안에 프로젝트를 끝낼 수 있었어요.
  • 어떤 일이 계속될 수 있을만큼 처음에 정성을 들여 리듬을 만들어 낸 것이 가장 큰 보람있었습니다.

Framer 초보자를 위한 팁(Step-by-Step Learning Tips for the new learners of Framer)

1. Start with Basics: 아주 아주 기본적인 기능에 대한 튜토리얼 학습
2. Collaborate and Share: 2~3인 1조로 같이 공부하고, 시연하기
3. Use Templates: 내가 만들고 싶은 결과물에 가장 가까운 템플릿을 찾는데 처음에 시간을 투자해보기. 처음에 배워야 할 범위를 좁혀주고, 템플릿 탐색 과정에서 Framer로 무엇을 할 수 있는지 배우게 됨
4. Set Realistic Goals: 엄격한 기한을 정해서 작업해보기. 대신 어느정도 일장 연장에 유연성을 가지고, 작업 후반부에 근성을 유지할 수 있도록 스스로를 푸쉬할 것
5. Practice with Mini-Projects: 최종 결과물을 만들기 전에, 아주 만만한 수준의 Mini-project를 총 작업 기간의 초반부에 수행해보기
6. Focus on Problem-Solving: 커리큘럼대로 다 공부를 하거나, 만드려는 결과물에 대한 지나치게 상세한 기회을 하지 말고, Online guide, tutorial, 포럼 질의응답을 통해 학습해서 완성한다는 각오로 처음부터 접근하기

Framer에 관심있는 분들 함께 소통해요!

• Framer는 Learning curve는 Webflow보다 낮고,
• Website Customization 제약이 적고
• Scalable하고
• Resourceful 합니다.
• 결론적으로 초기 노코드툴들의 단점은 극복하고, 장점을 잘 살린 서비스에요
• 단점을 뽑자면, 아직 한국 사용자가 많지 않은 것이에요.
• Framer를 함께 배우고 교류하고 싶은 분은 제 LinkedIn이나 이메일로 편하게 연락주세요!