소개
웹페이지 기획서를 바탕으로 웹페이지'workstream' 본격 개발에 들어감
진행 방법
사용한 도구 : Google AI Studio, Github, Vercel
Google AI Studio에서 프론트 앤드 개발 및 수정'build' 프롬프트에 넣을 것 : 웹기획서.md, project-color-set.md, 레퍼런스 디자인 캡쳐이미지
초안 'preview'
Google AI Studio의 장점은 같은 창에서 preview를 할 수 있다는 것
수정하고자 하는 부분을 명확하게 지정해서 진행할 수 있다는 것
1) 디자인 적용이 잘못되었길래 프롬프트 레퍼런스 이미지가 잘못되었었음. 그래서 color-set.md를 claude에서 다시 만든 다음에 재명령함.
2) "내 업무 등록' 창에서 업무 게시확정을 하기 전까지는 임시저장이 되게 했습니다. 그런데 임시저장한 후에 다시 수정이 되지 않았어서 수정 요청함.
*div : 'focus mode'로 전환하면 각 영역을 선택할 수 있음. 마이크로 수정을 할 때 유용함.
3) 수정 요청
'월'과 '주차' 모두 선택하여 연간 데이터가 모두 누적되고 추적될 수 있게 하고 싶었음.
팀 주요일정 란을 추가하였음.
4) '팀 주요일정' 란을 추가하였는데 어떻게 사용하는지 몰라서 물어봄.
5) 불필요한 부분이 화면에서 차지하고 있어서 없애달라고 함.
6) '팀 주요일정'을 한가지만 넣을 수 있어서 복수로 입력할 수 있게 요청함.
7) 폰트가 '굴림체', 세련감이 없어서 괜찮은 폰트를 추천해달라고 해서 'IBM Plex Sans KR'로 변경해달라고 함.
8) 그런데..... 뭔가 힘든 작업이었는지 Preview가 전혀 뜨질 않고 계속 작업중... 다음날도 작업중...
그래서 결국 'version'으로 가서 'restore'함.
대쉬보드에 나타나는 팀원들 업무 현황이 토글키를 누를 때 보여주는 방법을 변경해달라고 요청 -> 프로젝트 제목만 뜨게
여기까지 수정함.
github와 syncGoogle AI studio에서 sync to github 하면 된다.
repository 생성 - private 설정 - sync
vercel 배포vercel에서 github 연결 로그인해서 해당 repository 선택하면 배포(deploy)할 수 있다.
결과와 배운 점
일단 배포까지 셋팅 해놓았다.
주간업무현황 마스터 'workstream' MVP를 이용해보면서 필요한 부분 추가 및 부족한 부분 수정을 지속해야 함.
앱을 하나 만들어서 배포했던 경험이 있어서 이 단계까지는 그래도 수월하게 함.
뭐가 되었든 일련의 과정을 직접 거쳐봐야(시행착오를 겪어봐야) 진정 안다고 할 수 있다고 생각함.
수정 및 추가했을 때 원하는 결과가 나오면 꽤 성취감 있음. ㅎㅎ
