[부추로그] 개발 : 노코드 툴로 웹서비스 만들기
근데 이제 임베드 코드를 곁들인
Intro
안녕하세요. 비전공자들을 위해 부트캠프를 잘 고를 수 있도록 추려주는 ‘부추캠프’팀입니다. 오늘은 [부추로그] MVP : 유저의 문제를 해결할 수 있는 최소기능제품에 이어서 기획했던 내용들을 실제로 구현하기 위해 어떤 툴을 사용했고, 프론트와 백을 어떻게 구성했는지 개발 관점에서 공유드리고자 합니다. 개발자들이 많이 계신 곳에 저희 개발로그들을 공유드리려고 하니 조금은 떨리기도 하는데요! 이번 메이커로그도 많은 관심과 피드백 부탁드리겠습니다:)
개요
노코드 툴
백엔드
프론트엔드
임베드 코드
Outro
노코드 툴
먼저 노코드툴이란 코드를 직접 사용하지 않아도 웹페이지를 제작할 수 있는 툴을 말합니다. 노코드 툴로는 webflow, shopify, wix, 아임웹, 식스샵등이 있습니다. 저희는 다양한 분야에서 PM이 되기 위해 모인 팀인 만큼 보다 빠른 의사 소통이 필요했고, 모두 사용할 수 있었던 툴인 webflow로 MVP를 제작하기로 했습니다. 노코드툴을 이용했습니다.
webflow의 특징은 html과 css에 대한 기초적인 지식만 있다면, 빠르게 홈페이지를 만들 수 있는 것입니다. 하지만 노코드 툴로 핵심기능들을 구현했을 때 겪게 되는 어려움도 있었는데요, 그 어려움을 어떻게 해결했는지를 중점적으로 소개 드리겠습니다.
백엔드
부추캠프에 대해 한 번 더 간략히 소개를 드리자면, 저희는 현재 프론트엔드, 백엔드에 따라 직무별 필수 역량 분석과 필수 역량을 기반으로 한 부트캠프 분석 및 비교 서비스를 제공하고 있습니다.
부추캠프는 컨텐츠로 구성된 정보를 제공하기 때문에 직무 역량과 부트캠프 정보는 webflow 내부의 CMS(Content Management System)만 사용했습니다. 그 이유는 CMS에 저장된 정보는 팀원 모두가 수정이 가능하고, MVP 단계에서 Firebase나 Airtable 등 외부 DB를 연동하여 webflow 내 CMS에 저장하는 방식은 비효율적인 로직이라고 판단했기 때문입니다.
CMS 페이지는 직무 역량 데이터를 담은 Career_infos와 부트캠프의 정보를 담은 Bootcamp_infos 2개로 구성하였습니다. Bootcamp_infos와 Career_infos는 career_eng (직무 영어 이름) 데이터를 참조하여 서로 연결하였습니다. 이 과정을 통해 특정 부트캠프가 어떤 직무의 부트캠프인지를 구분할 수 있습니다.
프론트엔드
부추캠프에 제공하는 STEP을 미리 보여드리자면 아래 이미지와 같습니다. 우리가 백엔드에서 구축하고 구성했던 데이터들을 어떻게 구현했는지 공유드리겠습니다.
#STEP 1
위 이미지에서 보이는 CMS Collection Pages는 step 1에서 직무(프론트 or 백)를 선택했을 때, 이동하는 페이지입니다. CMS에서 테이블과 데이터를 만들었을 때, 위 이미지에서 볼 수 있는 각각의 Collection Page를 만들고 Template를 통해서 CMS 각 요소들을 같은 화면을 보여줍니다.
#STEP 2
Step2에서 유저가 프론트엔드를 선택했는지, 백엔드를 선택했는지 확인하도록 해당 Collection에 이동을 시키고 선택한 직무를 Cookie를 이용해서 저장합니다. 그리고, 직무별 필수 역량을 분석한 내용을 화면에 뿌려주는 embed code를 넣었습니다.
#STEP 3
어떤 직무를 선택했는지 Cookie 값을 저장한다면, 저장된 Cookie 값에 따라 Step 3와 Step 4 내용을 구분하고 각 직무에 맞는 정보만 보여줄 수 있습니다. 그렇다면 왜 Cookie에 저장을 하는 것일까요? 그 이유는 새로고침 액션을 했을 때, 페이지가 다시 Step 1으로 가는 것을 방지하고 잘못된 정보를 보여주지 않기 위해서입니다.
웹플로우 환경은 유저가 어떤 행동을 했는지 기억하지 않습니다. 그래서 새로고침을 하였을 때 잘못된 정보도 보일 수 있기에 Cookie를 사용하였습니다. 이때, 잘못된 정보란 프론트엔드를 선택한 유저가 백엔드 부트캠프에 관련된 정보를 보게 되는 것입니다. 또한 Cookie는 유저가 창을 닫을 때 같이 사라지기 때문에 추가적인 백엔드 저장소를 만들지 않아도 되어 리소스를 아낄 수 있습니다.
#STEP 4
위 과정과 마찬가지로 Step 4에서는 Step 3에서 선택한 부트캠프 Cookie 값에 따라 정보를 노출하고 유저들이 비교할 수 있게 도와줍니다.위 이미지의 왼쪽은 웹플로우 작업 환경 화면으로 모든 부트캠프 정보가 보입니다. 반면 오른쪽은 유저가 실제로 보는 화면으로 필터링 된 데이터만 보이는 페이지입니다. 이렇게 필요없는 정보는 Cookie를 이용하여 숨김으로써 웹플로우의 한계를 극복하였습니다.
그리고 주차별 리스트에서 사용되는 직무 역량 버튼에 이벤트를 주어서, 백엔드에서 HTML 태그로 저장한 데이터의 Class Name을 이용하여 하이라이트 되도록 이벤트를 넣을 수 있었습니다.
Embed code
위에서 공유드린 내용중에 임베드 코드라는 내용이 자주 등장해서 조금은 어려울실 수도 있으셨을 것 같아, 추가적으로 설명드리고자 합니다.
임베드 코드란 웹플로우 환경에서 제공되는 기능 이외의 코드로 구현하는 요소를 말합니다. 임베드 코드는 아래 사진에서 custom code라고 표기되어 있는 것처럼 직접 코드를 입력하는 방식입니다. 해당 코드는 HTML 태그, CSS 코드 및 Javascript 코드를 적을 수 있습니다. 다만 임베드 코드를 사용했을 때에는 배포 전 해당 기능이 잘 작동되는 지 미리 보기에서 확인할 수 없다는 단점이 있습니다. 즉 유저에게 노출된 화면에서 확인하거나 백업 사이트를 따로 만들어 그곳에서 작업을 하고 확인해야 하기 때문에 번거롭다는 단점이 있습니다. 아래 이미지는 저희 부추캠프 내 삽입했던 임베드 코드 중 하나의 예시를 공유드립니다.
Outro
지금까지 부추캠프 MVP 개발에 대한 부분을 공유드려봤습니다. 저희가 기획했던 내용들을 어떻게 개발로 구현할지, 그 과정에서 어떤 고민과 어려움이 있었고 이를 어떻게 풀어냈는지 조금이나마 이해가 되셨으면 좋겠습니다. 만약 궁금한 점 있으시다면 댓글 부탁드리며, 답글을 통해 더욱 자세하게 알려드리겠습니다! 다음 편에서는 MVP를 런칭하고 우리가 어떻게 유저들을 모았는지 마케팅 관점에서 공유드릴 예정입니다. 끝까지 긴 글 읽어주셔서 감사합니다.
