소개
전주만 해도 피그마로 디자인은 완성했는데 이걸 어떻게 활용하는거지? 배포라는 개념도 없었던 막연한 상태였습니다. 그래서 유튜브 cursor 관련 강의와 추가 강의 수강을 통해 피그마로 코드 저장하고 firebase 연결 및 데이터구조를 어떻게 생각해야하는지 ERD를 구성해보는 시간을 갖었습니다.
진행 방법
지난 스터디때 준님께서 PRD 작성하는 법과 피그마메이트로 디자인 가이드라인 사용법을 알려주셔서 알려주셔서 실제 사용해보았습니다. 제가 만들고 싶은 웹말고 다른 아이디어를 실제 만들어보았습니다.
안녕하세요 세계 - 스크린샷 미리보기 이미지
그리고 뇌과학적인 것을 넣어보기로 하여서 아이들이 질문을 하면 레벨이 올라가고 보상이 주어지는 것도 한번 넣어보았습니다.
lv3이라는 단어가 포함된 다양한 색상의 버튼 그룹
피그마로 디자인한 것을 커서를 활용하여 디자인 변경을 이것저것 해보았습니다.
한국어 텍스트가 있는 화면의 스크린샷
제가 원하는데로 척척 바뀌여서 좋긴했는데 너무 많은 명령을 한번에 내려서 그런지 중간에 에러가 나서 아래와 같은 상황을 여러번 겪었습니다.
텍스트 상자가 있는 창의 스크린샷
검은색 화면이 있는 컴퓨터 화면의 스크린샷
코드가 너무 긴것도 문제인거 같아서 코드분리를 요청해서 분리를 하였습니다.
( 여기서 궁금한 점은 코드가 길때
1) 어떤 기준으로 코드를 분리해야 나중에 작업할때 효율적인지 궁금합니다
2) 오류나기 전상태를 저장하면서 작업을 해야하는건지 주로 개발자는 작업하기 전에 저장기능을 사용하는지 궁금합니다)
ERD
토요 스터디때 추천해주신 강의를 듣고 ERD를 만들어보기로 했습니다.
전에 앱시트로 프로그램 만들때 컬럼에 지점Key, 답안ID 등을 만들라고 하는게 이해가 안되었었는데 이번 ERD 공부를 통해 왜 이러한 것이 필요한지 알게 되었습니다.
Microsoft Excel의 스프레드시트 스크린샷
강의 끝에 도식화하는 것이 있어서 추가된 기능까지 그림으로 그려보았습니다.
흐름도의 스크린샷
앞으로의 계획
앞으로 1) 해야할 것은 firestore활용하여 데이터 올리는 작업이 필요하고
2) AI자동코칭멘트 생성부분이 있어서 open ai api를 가져와 프롬프트 작성한 것이 백엔드로 잘 돌아가는지 확인하는 작업이 필요합니다.
3) 포트원가 입 후 결제기능 추가해보기
4) 배포
