노코드 툴로 이유식 레시피 공유 사이트 제작하기
노코드 툴(BUBBLE) 활용해서 사이드 프로젝트하기
안녕하세요.
요즘은 노코드 툴을 사용해 웹사이트나 앱을 쉽게 만들 수 있는 시대입니다. 그중에서도 저는 리트머스(https://www.litmers.com/) 에서 공유해주신 BUBBLE 튜토리얼을 참고하여 이유식 레시피 공유 사이트를 만들어 보았습니다. 노코드 툴은 이번에 처음 경험해보아서 배포 및 출시까지 하지는 못했지만, BUBBLE을 이용해 데이터 구조를 설계하고, UX 디자인을 직접 해보며 서비스 기획자라는 직무에 대한 패러다임도 많이 바뀌었을 뿐만 아니라, 협업을 어떻게 할지에 대한 것들도 생각해보는 시간이었습니다.
많은 것을 배울 수 있었어요. 이번 글에서는 "이유식 레시피 공유 사이트"를 기획하고 제작한 과정을 공유하고자 합니다.
<공유1> : 제가 참고한 리트머스의 튜토리얼입니다. 영상 러닝타임이 짧아서 순식간에 만들어 볼 수 있었어요
돈 주고 듣고 싶었습니다. 다만 특정 기능에 대하여 세세하게 설명하지는 않으셨고, 하나의 프로덕트를 만드는 과정을 휘리릭 보여주고, 보면서 따라가는 것이기 때문에 어려우실 수 있어요 :)
<공유2> : 제가 리트머스의 튜토리얼을 참고하여 제작한 사이트입니다. 디플로이를 하려 했더니 요금제를 바꾸라고 하더라구요 ㅎㅎ
제작한 것의 프리뷰 링크를 공유하겠습니다.
우선 요즘 노코드 툴이 많이 나오고 있는데,
그 와중에 BUBBLE을 활용해 본 이유는 별 건 없습니다. 가장 실제 프로덕트 제작 과정을 유사하게 경험해 볼 수 있을 것 같았습니다.
그렇기에 실제 프로덕트를 제작하고, 협업하는 경험이 부족했던 저에게는 가장 좋은 선택지가 아니었나 싶습니다.
우선 제작 기간은 다 해서 다른 일들 때문에 바빴던 것을 감안하면 일주일 정도 걸렸던 것 같아요!
그도 그럴 것이 영상을 보면서 그냥 따라하면 되는 거라서 개인적으로는 일주일도 꽤나 충분한 시간이라고 생각합니다.
사이트 기획
구상해본 사이트의 이름은 "babyam : 밥얌"입니다!
*밥얌 : 아기는 밥을 '아암'하고 먹으니까 BABY + AM 을 붙여봤는데
BAB + YAM 으로 보이더라구요. 밥을 얌얌먹는다는 의미도 되는 것 같아 BABYAM으로 서비스 이름을 짓게 되었습니다!
제작 해 본 사이트의 인덱스 페이지입니다!튜토리얼 자체가 정보를 공유하는 사이트를 제작하는 내용을 담고 있었기에 튜토리얼로 핸즈온 실습을 해 본 후 어떤 정보를 공유하는 사이트를 만들어볼까 고민했는데요.
기획 과정
여러가지를 고려해보던 중 '이유식 만들기' 게시물이 눈에 들어왔습니다.
이유식 시장에 대하여 알아보던 중
1. 시판 이유식의 판매가 점점 증가하고 있다는 사실을 발견했습니다.
https://news.stockplus.com/m?news_id=137310712. 아이들은 줄어가는데, 시판 이유식의 판매가 늘어나는 이유는 '육아는 템빨'이라는 2030 세대 부모들의 새로운 철칙이 생겨났기 때문이라고 하더라구요.
3. 하지만, 그 철칙이 결코 2030 부모들이 아이들을 사랑하지 않아서 신경을 덜 쓰는 것 같지는 않아 보였습니다.
4. 그렇다면, 부모님들이 자녀들에게 더 좋은 제품들을 찾아서 먹이는 데에 관심이 있을 거라는 결론을 내리게 되었습니다.
5. 부모님들이 제품들에 대한 견해를 나누고, 가끔식 아이들을 위한 레시피도 공유할 수 있게 하는 커뮤니티를 형성하는 것이 좋겠다는 생각이 들었고,
6. 튜토리얼로 배운 정보 공유 플랫폼 제작법을 바탕으로 우선, 작게 이유식 레시피 공유 사이트를 제작해봐야겠다는 생각이 들었습니다. (아직 배운 게 그것뿐이라서요..ㅎㅎ) 시간이 되고, BUBBLE 자유이용권(?) 같은 것이 생기면, 화장품을 비교, 구매하는 "화해"처럼 이유식 커뮤니티를 하나 제작해보고 싶네요!
사이트의 주요 기능
먼저 구축해야겠다고 생각했던 것들은
레시피 포스트 기능, 좋아요 기능 정도였는데요.
튜토리얼을 통해 배운 것들을 활용해서 기능들을 구현해봤습니다.
- 레시피 포스트 기능 : 상단의 "POST A RECIPE" 클릭 시 팝업이 뜹니다.
- 좋아요 기능 : 하트를 누르면 옆의 숫자가 올라가며 데이터가 바뀝니다.
- 정렬 기능 : 알파벳순, 최근순, 좋아요 많은 순을 기준으로 정렬하는 기능을 구현해봤습니다.
- 작성자 보기 기능 : 작성자 이름을 클릭하면 작성자를 볼 수 있고, 작성자가 게시한 게시물도 같이 나오게 되는 작성자 보기 기능을 구현해봤습니다.
부가적으로 구현한 사항들
부가적으로 구현한 사항들입니다.
위에 공유한 링크를 타고 들어가시면, 추가적인 사항들을 확인해보실 수 있습니다.
- LOG IN/OUT 기능
- SIGN IN 기능
- PROFILE EDIT 기능
- 로고 클릭 시 INDEX(홈 화면)로 돌아가기 기능
- RESET PASSWORD 기능
- 404 페이지 꾸미기
프로젝트를 통해 배운 점 : 세부적인 워크플로우 생성 과정을 경험
LOG IN 버튼을 누르는 워크플로우버튼을 하나 생성하고, 버튼에 워크플로우를 할당하는 것이 이렇게 이미지로 표현되기 때문에
비전공자도 단번에 알아들을 수 있었습니다. (물론, 조작하는 것은 앞으로 많이 배워야 하지만요)
워크플로우 한답시고, 맨날 피그잼 화이트 칠판에 어플 들여다보면서 작성을 해봤었는데
기존 프로덕트가 너무 어렵기도 하고, 독학하기가 쉽지 않았습니다.
하지만, 실제 워크플로우를 제작해보니 감이 잡히더라구요.
프로젝트를 통해 배운 점 : 데이터 설정 과정을 경험
항상 기획자에 대해 서치하다보면,
"데이터를 볼 줄 알아야 한다."
"SQL, 쿼리, ADSP.."
다양한 데이터 관련 언급들이 있었는데요, 데이터 분석에 대하여 매번 단편적으로 배우기는 하지만,
항상 어디에 쓰이는지 명확하게 파악하고 배웠던 것은 아니었습니다.
지금 보니 기획자는 '이것' 때문에 데이터에 대한 개념을 알고 있어야 하는 거였습니다.
1. 기획에 대한 '뒷받침'
: 기획에 대한 뒷받침을 위한 데이터를 실제로 다루기 위해 SQLD, R, 엑셀, PYTHON등을 공부
2. 기획한 서비스에 '쓰이는 데이터 구조'에 대한 이해
: 내가 기획한 서비스는 어떤 데이터를 사용하며, 그 데이터는 어디에 있는지, 어디로 움직이는지, 그에 대한 정책 등을 이해 및 계획 가능
이번 프로젝트에서는 2번에 대하여 많이 공부가 되었다고 생각합니다.
<실제 제작 화면>
1. 데이터 타입 설정 : 이렇게 노코드로 데이터 타입을 설정하며 필요한 데이터를 지정해봤습니다.
데이터 타입 설정2. 데이터 정책 설정 : 들어가있는 데이터들을 어디까지 공개할 것인지 정책을 설정하였습니다.
데이터 정책 설정3. 앱 데이터 (유저, 레시피) 확인 : 어떤 데이터가 들어오고 수정되는지 내부 DB를 볼 수 있었고, 이를 통해 그 구조를 파악할 수 있었습니다.
마무리
이렇게 프로젝트를 마무리하면서,
재미로 시작해 본 '노코드 배우고, 활용해보기 프로젝트'를 통해
1. 서비스를 기획하는 것을 넘어서 실제로 제작하는 과정을 가볍게 들여다 볼 수 있었고,
2. 그것을 제 손으로 실제로 해 볼 수 있어서 유익한 경험이었습니다. 이러한 사이드 프로젝트는 개발자 없이는 불가능하다고 생각했는데, 혼자서도 유의미한 프로덕트를 만들고 (자본금이 있다면) 배포, 런칭할 수 있다는 가능성을 보게 되었고, 앞으로도 다양한 프로덕트를 만들어 보고 싶다고 생각했습니다.
3. BUBBLE 뿐만 아니라 제가 MLSA로 활동했던 MICROSOFT의 POWER APPS 또한 FIGMA와 연동하여 프로토타입을 만드는 완벽한 도구로 실제 활용해볼 수 있겠다는 생각이 들었고, 프로토타입을 넘어서 실제 노코드로 제작할 수 있을 것이라는 생각이 들었습니다.
4. 그렇게 하고 나니 서비스 기획/PM/PO에 대한 개인적인 패러다임이 기존의 '관리자'에서 '개발자의 영역'을 침범할 수 있겠다는 생각이 들었습니다. (대체를 할 수는 없다고 생각합니다.)
5. 또한 직접 기능을 구현하고, 테스트 하다보니 문제를 파악하고, 개선하는 시선이 조금 더 첨예해졌다고 생각합니다. 역기획을 하고, 이미 만들어진 프로덕트를 살펴보는 것은 저 같은 지망생들에게 정말 중요하지만, 이런 프로젝트를 진행하면서 그것에서 더 나아가 실전 연습을 해보게 되었다고 생각합니다.
6. 그렇기 때문에 기획의 기술적 한계를 이해할 수 있었습니다.
노코드 툴을 통해 기획 단계에서 어떤 기능이 실제로 구현 가능한지, 예상보다 시간이 많이 걸리는 부분이 무엇인지 파악할 수 있었습니다. 이런 실제 경험은 앞으로 PM/서비스 기획자로써의 저의 기획을 더 현실적이고 개발 친화적이고 조정할 수 있게 도움을 줄 거라고 생각합니다.
다만 아쉬운 점은 이번 프로젝트는 IA라던지, 플로우차트라던지하는 기획문서들을 따로 작성하지는 않았습니다. 시간이 된다면, 다음 프로젝트를 진행할 때는 정식 기획을 해서 그러한 문서들을 실제로 작성해보고, 그에 따라 노코드 프로젝트를 진행해보고 싶네요!
그럼 다음 글로 찾아뵙겠습니다.
