[클로드+버블 = 1인 MVP] 질문훈련앱 QuestionCraft 제작_2번째 회고_반응형 페이지 디자인

지난 1주일 진행사항

1. 버블 스터디

2. 지피터스 월간 네트워크(오프라인) 참석

  • 8/24(토), 우수 발표사례 및 개별 주제 발표 참석

  • 개인적으로는 한번도 써보지 않은 자동화툴 MAKE 를 맛보기 할 수 있었음 -> 메이크를 버블에 어떻게 활용하면 좋을지 이후 과제로 남음

3. 개인 과제(QuestionCraft)

3-1. 반응형 디자인 화면 제작 시작

  • 다혜님 줌 수업 이후 용기를 얻게 됨!! 현재 부지런히 진행중 -> 다음주 내로 화면 디자인 완료 예정

  • 버블 디자인 화면 ⬇︎ (https://questioncraft-81433.bubbleapps.io/version-test?debug_mode=true)

    한국어 텍스트가 포함된 블루 스크린 스크린샷
  • 성구님이 반응형 디자인을 할 때 컬럼 방향으로 사이즈 조절 할 때 디자인이 유지될 수 있도록 하는 깨알 꿀팁 알려줌 -> 상단 - [빈 그룹] - 중간 내용 - [빈 그룹] - 하단, 이렇게 중간에 빈 그룹을 활용하면 됨

  • 현재 대시보드 화면을 디자인 중 ⬇︎

    한국어 문자 메시지 앱의 스크린샷
  • 위 화면에서 좌측 상단 햄버거 버튼을 클릭했을 때 서랍처럼 메뉴가 움직이는 기능을 구현해야 함 -> 성구님이 관련 스터디 자료를 알려줌 (https://www.bubblebox.kr/blog/bubble_animation)

3-2. 데이터베이스 설계

  • 클로드가 만들어준 다음의 대시보드 화면을 그대로 클로드에 입력해서 데이터베이스를 설계해 달라고 요청함

    한국어 앱 스크린샷
  • 클로드 답변(몇번 수정 거침)

    한국어로 된 연구 논문의 예
  • 직접 버블에 데이터 필드들 생성한 뒤, 클로드에게 다음과 같이 화면캡쳐해서 확인 요청함 -> OK

  • 클로드 추가 답변:

    흰색 배경에 한국어 텍스트
  • 현재 디자인 화면에서 데이터소스와 연결하는 부분에서 빨간색 에러 표시 문제 발생 -> 다혜님 영상 다시 공부해야 함.

3-3. 데이터베이스 > 옵션셋 설정

한국어 문자 메시지 스크린샷
한국어 메뉴 스크린샷
휴대전화 옵션을 보여주는 화면의 스크린샷
  • [인기순], [최신순] 정렬을 제공할 건데, 이 중 [최신순]은 Questions DB 에서 Created Date 필드로 정렬하면 될 것 같아서 옵션에 넣지 않았음.

4

👉 이 게시글도 읽어보세요