[EP 05] "1개월"차 '노코드'로 하나의 웹사이트(굿짹 월드)를 만들기 위한 삽질과정

MKYU에 와서 MVP(데모)를 만들기 위해 고군분투한 나날들의 이야기
하나의 웹사이트가 온전히 돌아가기 위해 무엇이 필요했는지 작성해본다.

 새로운 글 추가 했다. 아래는 노코드로 개발 6개월 후의 이야기이다.
https://study-easy-coding.tistory.com/91

 

🖐 들어가기에 앞서

현재 2022년 1월 28일 금요일에 오픈하고 2022년 2월 1일까지 현재 방문자 수이다.(방문자 수 2.5만 명, 댓글 1200개)

3개월간 밤을 새가며 함께 일한 동료와

MKYU 김미경 대표님과 각 부서 사람들, 오픈 톡방에서 열심히 스태프로 힘써 주시는 열정 대학생 분들 그리고

열심히 입소문 내주시는 짹짹이 여러분 덕분에 이뤄낸 수치라고 생각한다. 

 

콘셉트, 기획, 화면 설계, 디자인(UI, UX), 고객의 편의성 등을 생각하며 고민했던 날들이 떠오른다.

 

 

오늘의 포스팅은 0 베이스에서

현재 웹 사이트를 만들기까지의 과정과

웹사이트를 이루고 있는 서비스들에 대한 짧은 정리글이다.

 

 

 

 

 

노코드를 선택한 이유는 MVP를 빠르게 만들면서 요구사항과 디자인을 빠르게 변경할 수 있어서 채택했다.

지금도 이 선택에 있어서 옳은 선택이었다고 생각한다.

 

 

⭐️ 사용된 노코드 툴

1. 웹플로우(webflow) 

2. 멤버스택(memberstack)

3. 에어 테이블(airtable)

4. 제트 부스트(jetboost)

5. 라이켓(Lyket)

6. 라이브리 

7. 더 폼(the form)

8. 재피어(zapier)

9. 메일 머지 (확장 프로그램)

 

               +

이외의 서비스 (마케팅, SEO)

1. 도메인 구매(가비아) + 호스팅(웹 플로우) 

2. 구글 애널리틱스 

3. 페이스북 광고 픽셀 

4. 네이버 사이트 웹마스터 도구 

5. 채널 톡 

6. 구글 태그 매니저 

 

# 상세 설명

1. 웹 플로우 

 - 웹 플로우는 큰 뼈대로 호스팅, 디자인, 외부 서드파티, 코드 임베디드 삽입 등에 최적화되어있다.

웹 플로우 + 재비어 + 에어 테이블  /  웹플로우 + 재비어 + 멤버 스택 + 에어 테이블   등과 같은 방법으로 이용할 수 있다.

단점: 동적 이미지 삽입, 관계형 데이터 베이스에 따른 로직 설정의 어려움

 

 

2. 멤버 스택

- 회원 가입할 때 멤버 스택 자체 서버 db를 이용해서 로그인 상태 관리 및 URL 설정을 할 수 있다.

 단점: 이미지 삽입 불가 

 

3. 에어 테이블

- DB + 엑셀 짬뽕(그렇다고 DB의 장점과 엑셀의 장점만 가지고 있는 것은 아니다.) 

단점:  자체 플러그인과 테이블과 테이블을 연결해 줄 순 있지만, 직접 손으로 해야 한다. 즉 관계형 데이터 베이스 역할을 하지 않는다!(내가 못 찾은 거 일수도 있음 근데 진짜 없는 것 같음)

 

4. 제트 부스트

- 웹 플로우에 특화된 서비스 

인피니티 스크롤, 좋아요, 장바구니, CMS 데이터 기간 만료 설정 등 다양한 이벤트 처리를 할 수 있다.

단점: 가격

 

5. 라이켓 

- 비로그인 사람들도 쉽게 스크립트 코드를 삽입하여 인스타그램 좋아요, 하트 표시등을 할 수 있다.(ip를 통한 체킹)

단점: 없음, 가격도 저렴하다.

 

6. 라이브리

- 웹 사이트 내 CRUD 게시판을 만들고 싶었지만, 채택 중인 웹 플로우에서는 불가능했다.

그래서 라이브리라는 댓글 서비스를 이용하여 상호 소통할 수 있도록 그럴싸하게 보이게 만들었다.

단점: 가격(연 600만 원), 오래된 자료(2015년 가이드북을 아직도 업데이트 안 하고 있다.), 홈페이지에 설명하고 있는 실제 제공 서비스와 다른 점(인스타그램 로그인 빠져있음)  tmi: 진짜 기능 아니면 안 썼다.

 

7. 더 폼

- 설문조사 툴, 웹사이트 내 삽입이 가능하고, 엑셀로 추출할 수 있으며 무료이다. 

단점: 무료니까 단점이 다 이해된다.

 

8. 재피어 

- 외부 서드파티 툴들과 연결하는 서비스 

단점:  비싼 과금 비용

 

9. 메일 머지

- 엑셀 데이터 내 이메일 주소로 이메일을 발송하는 서비스

장점: 무료

단점: 이메일 column에 하나라도 유효하지 않는 데이터가 단 하나라도 있다면 오류 메시지가 뜬다.

이는 코드로 정규식을 이용하여 변환하던가 엑셀 내에서 변환 검수가 필요로 한다. 

 

 

 

# 회고

 

현재는 MKYU-챌토링이라는 이름으로 하나의 프로젝트 성 웹사이트 가 나왔는데 챌토링이라는 이름으로 세상에 나오기 전까지 몇 번의 콘셉트, 기획, 디자인이 바뀌었는지 모르겠다. 

 

위의 노코드 툴들 이외에도 다양한 노코드 툴들이 있다. (버블을 이용하면 관계형 데이터베이스 설정부터 긴밀한 로직 설정도 가능하다.)

 

 

3개월간 밤을 새 가며 노코드 툴을 뜯어보고 다뤄봤던 날들을 돌이켜봤다. 

이제는 하나의 프로젝트를 1주일이면 만들 것 같다.

또한 노코드 컨설팅도 가능할 정도로 엄청나게 많은 인사이트를 얻게 된 지난 3개월이었다.

 

 

 새로운 글 추가 했다. 아래는 노코드로 개발 6개월 후의 이야기이다.
https://study-easy-coding.tistory.com/91