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

지난 1주일 진행사항

1. 버블 스터디

• 8/22(목) 줌으로 다혜님이 버블 반응형 디자인 클론코딩 수업 1시간 진행해주심 -> 덕분에 혼자서 끙끙댈 때 알 수 없었던 깨알꿀팁을 많이 알게됨 (강의영상: https://www.youtube.com/watch?v=KgPK3LX06dU)

• 위 강의영상으로 따라 공부함 ⬇︎

  

  ALT

  한국어 문자 메시지 스크린샷

• 다른 건 다 했는데, 좌측상단 지역명 옆 꺽쇠 부분을 처리 못함 -> 이후 과제로 남음 -> 관련 스터디 자료 ⬇︎

  https://conversion-skill.tistory.com/entry/50-Group-focus-%EC%A4%91%EA%B8%89-%EB%B2%84%EB%B8%94%EC%9D%98-%EA%B7%B8%EB%A3%B9-%ED%8F%AC%EC%BB%A4%EC%8A%A4-%EC%84%A4%EC%A0%95-%EB%93%9C%EB%A1%AD%EB%8B%A4%EC%9A%B4-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A6%AC%ED%94%BC%ED%8C%85-%EA%B7%B8%EB%A3%B9-%EC%95%88%EC%97%90-%EB%93%9C%EB%9E%8D%EB%8B%A4%EC%9A%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

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

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

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

3. 개인 과제(QuestionCraft)

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

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

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

  https://questioncraft-81433.bubbleapps.io/version-test

  

  ALT

  한국어 텍스트가 포함된 블루 스크린 스크린샷

• 성구님이 반응형 디자인을 할 때 컬럼 방향으로 사이즈 조절 할 때 디자인이 유지될 수 있도록 하는 깨알 꿀팁 알려줌 -> 상단 - [빈 그룹] - 중간 내용 - [빈 그룹] - 하단, 이렇게 중간에 빈 그룹을 활용하면 됨

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

  

  ALT

  한국어 문자 메시지 앱의 스크린샷

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

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

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

  

  ALT

  한국어 앱 스크린샷

• 클로드 답변(몇번 수정 거침)

  

  ALT

  한국어로 된 연구 논문의 예

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

• 클로드 추가 답변:

  

  ALT

  흰색 배경에 한국어 텍스트

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

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

ALT

한국어 문자 메시지 스크린샷

ALT

한국어 메뉴 스크린샷

ALT

휴대전화 옵션을 보여주는 화면의 스크린샷

• [인기순], [최신순] 정렬을 제공할 건데, 이 중 [최신순]은 Questions DB 에서 Created Date 필드로 정렬하면 될 것 같아서 옵션에 넣지 않았음.