by
Jun 03. 2022
기획자가 노코드툴로 웹서비스 만들어본 썰.txt
요즘 대유행 B급 초대장 생성기 비하인드 스토리
아직 안써봤다면 얼른 써보세요!
https://b-level-invitation.softr.app/
Misson: 우리 B급 바이브를 널리널리
바야흐로 엔데믹의 시대가 성큼 다가오자…
기획자의 궁둥이가 제일 먼저 들썩거린다.
"코로나가 풀려서 모임도 많아지는 것 같아"
"맞아 맞아"
"모임 때 쓸 초대장을...우리가 만들어보면 어떨까?"
"...!"
참고로 우리가 생각하는 초대장 감성은 이런 감성이었다.
초대장 짤들아쉽게도 사용자가 직접 문구를 바꿀 수 없어서 포토샵을 이용해야 하는 상황. 우리는 누구나 우리의 B급 감성을 향유하길 바랐다.
"오 괜찮은데? 그래 만들어보자!"
"근데 우리... 친한 개발자 없잖아..."
절망하려던 찰나...머리에 떠오른 생각...
노코드툴로 하면 되지!
그래, 우리가 기술은 없지 불굴의 의지가 없냐!
GABOJAGO~
서비스의 방향성
친구들 사이의 가벼운 모임에 쓰이는 캐주얼한 초대장
유저가 초대장을 만드는 리소스 최소화
재미를 목표로 B급 감성 지향
유저 스토리
1. 원하는 초대장 템플릿을 선택한다.
2. 초대장 생성에 필요한 데이터를 입력한다.
3. 만들어진 초대장을 확인한다.
4. 초대장을 저장/공유한다.
우리가 해나가야할 건?
1. 어떤 노코드툴로 만들까?
2. 초대장 템플릿은 어떻게 만들건가?
3. 유저가 입력한 텍스트를 어떻게 템플릿에 적용하지?
4. 만들어진 초대장은 어떻게 다운로드 받지?
오? 첩첩산중? ㅋㅋ 하지만 왠지 다 잘될 것 같다는 근자감을 안고,
일단 우리의 손발이 되어줄 노코드툴 부터 찾아보았다.
1. 적합한 노코드툴 찾기
주된 목적별로 정리해놓은 아티클 덕분에 몇 개의 후보를 간추릴 수 있었다.
유저 시나리오를 구현하기 위해서는
1) 초대장 템플릿 리스트 DB로부터 템플릿을 불러와 보여주고
2) 유저가 직접 화면에서 텍스트를 입력하도록하고
3) 이미지를 로컬에 저장시켜주는 과정이 필요하다.
그래서 데이터베이스에 서비스가 보여줄 컨텐츠를 저장해두면, 노코드툴(웹사이트 빌더)들이 사용자가 보기 좋게 데이터를 보여주고, 유저가 화면에서 직접 입력할 수 있는 softr, glide, stacker가 괜찮아 보였다.
이 세개중에 우리의 선택을 받은 툴은 softr이었다.
2. 초대장 템플릿 제작 방법
친한 개발자만 없는지 알았다면 경기도 오산....
우리는...친한 디자이너도 없다...ㅋ
돌아다니는 짤을 그대로 쓰기엔 저작권이 무섭다...
직접 그리기로 결정.
3. 본격적으로 기능 구현하기
템플릿 불러오기 / 이미지와 텍스트 머지하기 / 이미지 다운로드
우선 초대장 템플릿 DB를 만들었다.
softr이 aritable이라는 DB와 연동이 되기 때문에 airtable에 템플릿을 올려놓고 softr에 불러왔다.
우리의 airtable노코드툴로 일단 첫 번째 기능 구현은 스무스하게 해결했는데 이제 진짜- 문제가 시작된다.
우리의 KEY POINT는 유저가 직접 입력한 텍스트가 초대장 템플릿에 입력된다는 건데, 개발을 할 줄 모르는 우리로써는 텍스트와 이미지를 어떻게 머지시켜야할지 막막했다.
그러다 우리에게 GOD이 나타난다...
개비스콘처럼 우리의 속을 뻥 뚫어줄 바로 개비스콘 짤 생성기!!
https://gvsc.rajephon.dev/
이 짤 생성기를 만드신 분이 코드를 모두 공개해주신 것이다!!!!
softr에는 Custom Code를 직접 입력할 수 있는 기능이 있는데 (유료 ㅠㅠ 두달만 무료입니다...)
그 기능을 쓰고 이 코드를 복붙하면 해피엔딩이 될 것 같았다.
그러나 우리는 사실 코드를 보아도 어떤 건지 모르기 때문에 ㅎㅎ (코드 까막눈)
개발자 친구분이 코드를 쉽게 풀이해주셨고
덕분에 템플릿에 텍스트 입력 + 이미지로 다운로드의 주요 기능을 구현할 수 있었다.
(이 자리를 빌어 두 분께 정말 감사의 인사를 드립니다!)
이렇게 한글로 다 바꿔서 이해를 할 수 있었다.."뭐야...노코드툴이라더니...결국 코드 썼네 ㅡㅡ "
라는 생각이 읽으시면서 들었다면, 정답입니다.
노코드툴로 간단한 form이나 소개페이지 등은 정말 쉽게 구현할 수 있지만
유저의 액션을 실시간으로 다이나믹하게 보여주는 건 솔직히 어렵다.
(이 글을 softr 관계자분이 보고 계시다면, 만들어주세요. 당당하게 요구합니다.)
즉, 노코드툴을 쓰긴 했지만 커스텀 코드가 있어야 우리가 원하는 서비스를 만들 수 있었다.
그 뒤로도 수많은 벽에 부딪혔다.
그때마다 구글링을 하고, 레퍼런스를 찾아 적용해보고, 개발자 친구분에게 도움을 구하면서 차근차근 문제를 해결했다.
iOS 카톡인앱브라우저에서 링크를 열면 이미지 다운로드 기능이 동작하지 않았다.
-> 카톡인앱브라우저인 경우, 다른 브라우저를 써달라고 안내 페이지를 띄우는 히든 코드를 넣었다.
복붙한 코드의 이미지 다운로드 기능이 동작하지 않았다.
-> 에러코드를 구글링했더니 나온 첫 번째 답변의 코드를 그대로 붙여넣었더니 동작했다...!
물론 포기한 것도 많았다.
만든 초대장 이미지 카톡 공유기능도 넣고 싶은데...
-> 할 줄 모름
'B급 초대장 생성기'라고 구글에 검색하면 검색결과에 나오고 싶은데...
-> 서브도메인이 softr 꺼여서 보안 이슈로 검색 결과에 노출되지 않음
기술이 없음에 눈물을 머금고... 우선순위가 높은 기능에 집중했다.
그렇게 결국 탄생한 우리의 B급 초대장 생성기!
홈리스트에서 템플릿을 누르고 원하는 텍스트를 입력하면 이미지를 다운받을 수 있다.
템플릿 상세 페이지처음으로 잘해야 된다는 부담 없이 재미있게 하고 싶은 일을 해냈음이 뿌듯했다.
개선하고 싶은 것
1. 카톡으로 이미지 공유하기
: 바이럴이 중요한 서비스다보니, 카톡으로 이미지 바로 공유하게 해서 우리 서비스에 들어오게 하고 싶었으나... 그 기능까지는 구현하지 못했다...ㅠ 가장 아쉬운 부분...
2. iOS 유저가 다운받은 이미지가 앨범에 바로 저장되게하기
: 내려받기를 누르면 다운로드된 게 보이긴 하나 파일 앱에 저장되는 게 아쉬웠다. 저장 위치를 앨범으로 하고 싶은데...그리고 '저장됐습니다' 토스트팝업을 띄우고 싶은데 그것도 아쉬웠다...
이렇게 보니 아쉬움 덕지덕지구만...(미련)
Lesson Learned
서비스를 만드는 것은 타협하되, 타협하지 않는 것이다.
