배경 및 목적
1주차에 개발했던 AI 프롬프트 생성 서비스가 반응형 디자인으로 구축되지 않아 PC에서는 문제없이 작동했지만, 모바일에서는 서비스 이용에 불편함이 있었습니다. 이러한 문제를 해결하고자, 2주차에는 다양한 디바이스에서 일관된 사용자 경험을 제공할 수 있도록 반응형 디자인을 적용하여 페이지 구성을 개선하고, 보다 고도화된 프론트엔드를 구성하고자 했습니다.
2주차 목표: Bubble을 활용해 서비스 페이지를 구성하며, 프론트엔드 구성과 더불어 반응형 디자인의 핵심 개념을 이해하고 이를 실제로 적용하는 것을 목표로 설정했습니다. 또한, Bubble의 다양한 기능을 학습하고 실전에 적용함으로써, 향후 서비스 개발 프로젝트에서 보다 효율적이고 빠른 프로토타이핑과 개발 역량을 강화하고자 했습니다.
2주차 프로젝트: Bubble로 클론 노코딩 - 데스크테리어.ai
참고 자료
버블 반응형 디자인 지식공유 (by 지피터스 송다혜) : 저번주 스터디이후 다혜님이 공유해주신 Bubble로 당근 클론노코딩 사례를 학습하며 Bubble로 반응형 디자인을 구현하는 것에 대한 기초를 습득할 수 있었습니다.
(https://www.youtube.com/watch?v=KgPK3LX06dU)
버블박스 : 페이지를 구성하며 작동하는 애니메이션과 같은 세부 기능들에 대해 참고할 수 있었습니다.
(https://www.bubblebox.kr/blog/bubble_animation)
활용 툴
Chat GPT : Youtube 영상에 대한 자료를 모아 데이터 베이스 생성을 위한 프로그램을 개발했습니다.
Repl.it : GPT를 통해 짜여진 프로그램을 구동하고 데이터 베이스를 구성했습니다.
Bubble : 인터페이스 설계 및 데이터베이스를 사용해 클론 노코딩을 진행했습니다.
Airtable : Bubble Data에서는 import 기능이 유료기능이라 Airtable을 통해 import 후 Bubble에서 데이터를 사용했습니다.
실행 과정
https://clonenocode-deskterior.bubbleapps.io/version-test
1단계 : 페이지 구성하기
Workflow 및 프론트엔드에서의 기능을 구현하기 전 반응형 디자인을 적용한 페이지를 구성했습니다.
모바일 페이지 구성을 우선으로 진행했고, 이상적인 사이즈를 검색을 통해 찾아 360x640으로 설정해 구성했습니다. (참고 : https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design)
2단계 : 프론트엔드 기능 구현하기
top bar
top bar group에는 메뉴 버튼과 로고와 기능버튼들을 구성했습니다.
좌측 상단 메뉴버튼 클릭 시 메뉴창이 뜰 수 있게 워크플로우를 구성했습니다. 메뉴창에서는 x 버튼 누르면 다시 기존 창 뜰 수 있게 구성했습니다. 이때도 자연스럽게 창의 전환이 이뤄질 수 있게 페이드인/페이드아웃 될 수 있게 애니메이션 구성했습니다.
유저 버튼을 누르게 되면 로그인 창으로 이동되게 워크플로우를 구성했습니다.
floating group
페이지가 이동해도 항상 하단부에 채팅창이 떠있을 수 있게 floating group을 설정했고 마우스 커서가 hover하거나 input창을 focus 했을 때 숨겨진 질문 메뉴가 보여질 수 있게 구성했습니다. 그리고 숨겨진 메뉴가 보여질 때는 자연스럽게 슬라이드 될 수 있도록 애니메이션을 넣었습니다.
Repeating group - Youtube
Youtube 정보를 띄워주기 위해 입력한 링크에서 필요한 정보를 가져와 데이터로 저장해주는 프로그램을 Chat GPT를 이용해 만들었습니다. Replit에 생성된 코드를 넣고 Flask 모듈을 사용해서 웹서비스를 구현했습니다. 비개발자가 LLM을 통해 코드를 볼줄 몰라도 이렇게 원하는 프로그램을 만들 수 있다는게 정말 놀라운 경험이었습니다. 유튜브 영상 링크를 몇개 넣어 프로그램을 구동해 생성한 데이터를 Airtable에 import 해서 DB를 만들었습니다. 추후 서비스를 만들어 운영하기 위해서는 DB 생성을 자동화 하는 방법도 고민이 필요할 것 같습니다. Airtable API 연동을 하긴 했는데 아직 데이터가 잘 안떠서 고생했는데 DB를 연결하고 상위 그룹부터 하위그룹까지 순서대로 appearance를 넣어주는게 가장 중요했습니다.
결과 및 인사이트
이번 프로젝트를 통해 얻은 주요 성과는 다양한 디바이스에서 일관된 사용자 경험을 제공하는 반응형 디자인을 미숙하게나마 구현할 수 있게 되었다는 점입니다. Bubble을 활용해 반응형 페이지를 구성하고, 다양한 인터랙션과 애니메이션을 통해 사용자가 더욱 직관적으로 서비스를 이용할 수 있도록 구성할 수 있었습니다. 반응형 디자인으로 페이지를 구성하는 것이 쉽지 않다는 것을 경험할 수 있었고, 백엔드 구성전에 프론트에 먼저 집중해 스터디를 진행해볼 계획입니다.
다음주에는 기능에 대한 더욱 깊은 스터디를 통해 페이지에 대한 고도화 및 완전한 클론 노코딩까지 학습해보려 합니다. 챗봇 구성 및 데이터베이스 연동을 통한 Youtube 정보 페이지 구현 등의 기능을 다음 스터디에서 진행할 계획입니다.