Bubble을 활용해 멤버십 등록 페이지와 헤더 섹션을 제작하는 작업을 진행했습니다. 페이지 이동과 반응형 디자인, 그리고 효율적인 헤더 관리를 목표로 했으며, 이를 통해 Bubble의 기본 기능과 UI/UX 설계의 기초를 배우는 기회를 가졌습니다.
진행 방법
사용한 도구:
Bubble:
간단한 이메일 회원가입 기능 구현.
헤더 섹션을 활용한 페이지 이동 설계.
시도한 작업:
Data의 이메일 회원가입 기능:
회원가입 시 많은 정보를 요구하지 않고, 이메일 주소만으로 간단히 가입할 수 있도록 설계했습니다. Bubble에서 제공하는 기본 이메일 등록 기능을 사용하여, 빠르고 직관적인 회원가입 절차를 구현했습니다.
workflow의 헤더 섹션 페이지 이동:
헤더 메뉴를 통해 페이지 간 이동을 구현하려 했습니다. 어떤 경우 버튼을 hide처리해야 하고, show로 설정해야 하나, 어디로 이동할 것인지 고민하는 과정이 포함됩니다. Log in페이지가 나타나면, 그러나 일부 메뉴가 보이지 않거나 클릭 시 제대로 작동하지 않는 문제가 있기도 했네요. 더듬더듬 설정을 찾아가며, 이로 인해 워크플로우 설계의 중요성을 다시 한번 깨달았습니다.
Design의 하나의 페이지로 디자인하여, 2개 다른 페이지 보이기
(2페이지 디자인 한듯이)
- Sign Up만 보이게 하기- Log In만 보이게 하기
단, Log In버튼을 눌렀을 때, Sign Up부분이 자리를 차지하지 않게 설정해야 하는 부분에서 기억을 더듬어야 했습니다. 다행히, 오프라인 스터디때 더듬더듬 따라하던 기억이 살짝 떠올라 문제 해결! (영상에서 템플릿 사용할 때는 modal방식으로 사용)
반응형 디자인 고려:
너비에 따라 다르게 반응하는 사이트로 제작하고 싶었 습니다. 사이즈는 너비에 따라 변하는 것까지는 되었습니다만~~(헤더부분은 템플릿 덕분?!)
헤더 부분에서 템플릿을 사용했으나, Log In/Sign Up 메뉴가 사라지거나 숨겨진 메뉴가 보이지 않는 문제가 있었습니다. main페이지에 내가 디자인하는 것도 가능하도록 반응형 디자인의 기본 원칙을 익히고 이를 개선할 필요성을 느꼈습니다.너비1>
너비2>
너비3>
영상보고 따라하거나, 느낌적으로 수정하다보니 어디서 옵션을 바꿨는지까지는 기억나지 않는다는 것이 큰 함정이죠~^^;;;
로그인 성공하면, page2로 넘어가도록 성공!
아직은 내용이 없어 더 꾸며야 하지만, DB에서 읽어온 페이지 이동까지는 가능한 것으로^^
경험과 배운 점
경험:
Bubble을 사용해 간단한 회원가입 시스템을 제작할 수 있다는 점을 확인했습니다. 이메일만으로 가입 절차를 최소화하는 것은 사용자 경험을 단순화하는 좋은 접근임을 알게 되었습니다.
헤더 섹션과 페이지 이동 설계에서의 시행착오를 겪으며, 워크플로우 설정의 중요성과 개선 필요성을 깨달았습니다.
개선하고 싶은 점:
페이지 이동 안정화:
메뉴 상태를 안정적으로 유지하고, 사용자 경험을 방해하지 않도록 워크플로우를 더욱 세밀히 설계할 계획입니다.
반응형 디자인 구현:
Bubble의 Responsive Editor를 학습하여 반응형 디자인으로 전환하고, 템플릿 기반 작업의 한계를 극복하려 합니다.
효율적인 헤더 관리:
Reusable Element를 적극 활용해 헤더 설정의 반복 작업을 줄이고, 통합적인 관리 방안을 도입할 예정입니다.
발전할수 있을지? .. 모달 예시
도움 받은 자료
YouTube 영상: Bubble로 로그인 화면을 모달로 구현하기
느낀 점
이번 작업은 간단한 이메일 회원가입 시스템을 Bubble로 구현하면서 기본 기능의 가능성을 탐구하는 계기가 되었습니다. 아직은 1주차로 익숙하지 않고, 클릭하며 설정하는 옵션이 다양하여 영상을 참고하거나 반복하며 익혀야 할 거 같습니다. 예상보다 헤더 섹션의 페이지 이동 설계와 반응형 디자인에서 어려움을 겪었지만, 이를 통해 배우는 점이 많았습니다. 특히 반복 작업을 줄이고 안정적인 워크플로우를 설계하는 것이 앞으로의 중요한 목표가 될 것입니다.
