기본 컨셉

[cheewr85]

초기 프로토타입

• 복잡하게 구성 x, 데이터의 경우 JS로 직접 key-value 타입으로 넣어서 저장

• 디자인한대로 image 사진 넣어서 구현

• 현재 서버를 쓰는 것도 없고 아직은 활용도를 깊게 갈 필요가 없으므로 아래와 같이 동일하게 구조도를 만들어서 진행

• 한 화면에 다 담고, 이를 사용자가 보이는 페이지를 버튼을 통해서 보이는 화면이 달라지게끔 처리함
  • 이를 통해서 데이터 전송 처리의 복잡함을 덜어냄

부트스트랩

• 그리고 각각 화면에 대해서 설정 커스텀
• 반응형 웹으로 적용, 모바일과 PC 환경에서 둘 다 적용가능함
• 이를 부트스트랩을 통해서 적용할 수 있음
• https://getbootstrap.com/docs/5.1/getting-started/introduction/
• head 태그에서 link import해서 사용가능, import 한 이후 메뉴얼에 나와있는 모든 스타일을 적용할 수 있음
• 그리고 해당 스타일을 그대로 커스텀해서 쓰면 됨
• 부트스트랩은 그리드 시스템 col로 공간 차지, 12등분으로 함, 이를 모바일과 PC의 크기에 맞춰서 그리고 추가로 해상도에 따라서 세부 설정해서 커스텀함

개발 참고 레퍼런스

• https://developer.mozilla.org/ko/

참고

https://www.youtube.com/watch?v=DU4a9dDggTs&list=PLgqG2uj21HgmvkxcxKD0aYvF8zs0LGAES&index=7

[cheewr85]

해당 방식 그대로 적용해도 상관없을 것 같음, 이 기준으로 나중에 추가적으로 적용시키면 될 것 같음

[cheewr85]

[메인 페이지]

• 마크업은 그대로 유지하면서 디자인과 텍스트 문구만 조절하여서 변형하면 될 것 같음

• CSS, 부트스트랩만 조절

[cheewr85]

[qna 페이지]

• 비슷한 데이터 포맷에서 answer에서 type 정도만 바꿔주면 알고리즘을 개선해서 질문 커스텀 가능함

• 질문 - 대답 리스트만 있으면 충분함, 공간만 만들어주고 JS 함수로 데이터 넣어줄 수 있음

• qna 만드는 폼은 동일함, 여기서 대신 저장된 data에 대해서 버튼 누르면 다음 문항으로 넘어가게끔 설정해주면 됨

• 상태바는 굳이 넣을 필요가 있을까 싶음, 질문이 많아서 => 대체제 필요할 듯

• 그라데이션 효과를 쉽게 줄 수 있게 해주는 곳 : https://www.colorzilla.com/

[cheewr85]

[result 페이지]

• 사용자 선택값에 따라서 결과 이미지를 임시태그를 JS로 만들어서 태그에 심어주는 방식으로 활용함

• 마지막 결과 내용에 대해서도 JS로 데이터를 직접 넣어서 저장함 key-value로

• 선택지에 따라 결과를 도출하는 알고리즘 필요, 버튼 선택할 때마다 선택한 버튼이 어떤 선택지였는지 알아야함

• 결과 알고리즘에 대해서 직관적으로 배열과 반복문을 통해서 결과를 카운팅하여 답을 내는 직관적인 방식 활용 가능함

• 이 부분의 개선사항을 추후 고려하면 될 것 같음

[cheewr85]

[배포 및 meta 데이터]

• meta 태그를 통해서 기본 사용자와 공유시 설정 필요

• favicon 설정도 가능 : https://icon-icons.com/

• 위 사이트 사용시 CC Atribution 확인 필요

• 배포의 경우 해당 사이트 활용가능 : https://www.netlify.com/

• 여기서 sites를 들어가 만든 웹사이트 폴더 전체를 드래그 앤 드랍으로 넘기면 됨

• 그리고 Domain Settings에서 URL을 수정할 수 있음

• 여기서 만약 내용 수정 혹은 추가를 한 경우 다시 배포해야하는데 이때 똑같이 드래그 앤 드랍으로 배포할 수 있음, 무료로 배포할 수 있음

• 여기서 깃허브와 연동이 가능해서 수정을 할 경우 메인에서 New site from Git을 통해서 해당 저장소 선택후 수정시 push하면 알아서 자동 배포를 함

[cheewr85]

[카카오톡 공유하기 기능]

• kakao API 활용 애플리케이션 등록 - 메시지 관련 기능 활용하기, 플랫폼 URL 등록해줘야함

• 공유하기에서 결과화면을 12가지 결과 페이지를 만들어서 사용자가 공유하기 버튼 누르면 해당 페이지를 공유하게 함

• 이 부분 개선을 어떻게 해야할지 생각해봐야 할 것 같음

• 다 수작업을 하면 양이 많긴 할 것 같음

[cheewr85]

[기타 논의사항]

• 현재 강의에서의 마크업과 로직을 기준으로 뻗어나가도 될 것 같음, 그 이후 구체적인 응용은 JS 부분과 부트스트랩 등의 내용을 더 알아보면 될 것 같음

• 만약 이론적인 부분의 보완점이나 공부하여서 우리만의 정리를 하겠다면 상정할 범위는?

• 여기서 아예 제대로 개선을 할려면 추가적인 학습이 필요할 것 같긴한데 여기서 웹을 좀 더 나갈 것인지 아니면 현재 있는 지식을 가지고 만들어서 배포하는 것으로 갈 지?

• 기본을 바탕으로 어느정도의 필요한 개발 방향성 논의

[sejigner]

[qna 페이지]

• 비슷한 데이터 포맷에서 answer에서 type 정도만 바꿔주면 알고리즘을 개선해서 질문 커스텀 가능함
• 질문 - 대답 리스트만 있으면 충분함, 공간만 만들어주고 JS 함수로 데이터 넣어줄 수 있음
• qna 만드는 폼은 동일함, 여기서 대신 저장된 data에 대해서 버튼 누르면 다음 문항으로 넘어가게끔 설정해주면 됨
• 상태바는 굳이 넣을 필요가 있을까 싶음, 질문이 많아서 => 대체제 필요할 듯
• 그라데이션 효과를 쉽게 줄 수 있게 해주는 곳 : https://www.colorzilla.com/

상태바가 우리 아이템과 맞지 않는 것 동의. 차라리 12/120 이런 식으로 보여주는 게 나을듯

[sejigner]

[카카오톡 공유하기 기능]

• kakao API 활용 애플리케이션 등록 - 메시지 관련 기능 활용하기, 플랫폼 URL 등록해줘야함
• 공유하기에서 결과화면을 12가지 결과 페이지를 만들어서 사용자가 공유하기 버튼 누르면 해당 페이지를 공유하게 함
• 이 부분 개선을 어떻게 해야할지 생각해봐야 할 것 같음
• 다 수작업을 하면 양이 많긴 할 것 같음

직업 추천이어서 다른 사람들에게 보여주는 것이 큰 의미가 있을까 싶기도 함.
다른 사람들의 흥미를 끌만한 콘텐츠가 뭐가 있을까 고민해볼 필요 있음

[sejigner]

[기타 논의사항]

• 현재 강의에서의 마크업과 로직을 기준으로 뻗어나가도 될 것 같음, 그 이후 구체적인 응용은 JS 부분과 부트스트랩 등의 내용을 더 알아보면 될 것 같음
• 만약 이론적인 부분의 보완점이나 공부하여서 우리만의 정리를 하겠다면 상정할 범위는?
• 여기서 아예 제대로 개선을 할려면 추가적인 학습이 필요할 것 같긴한데 여기서 웹을 좀 더 나갈 것인지 아니면 현재 있는 지식을 가지고 만들어서 배포하는 것으로 갈 지?
• 기본을 바탕으로 어느정도의 필요한 개발 방향성 논의

우선 웹으로 제대로 만들어보고 확장하는 것이 좋을 것
앞으로의 방향성은 지속적으로 논의가 필요함