Update README.md

README.md

@@ -181,7 +181,31 @@
 
 ## 기술적 도전
 
-작성예정
+<hr>
+
+### 프론트엔드
+
+이번 프로젝트를 통해 가장 중점적으로 생각한 부분은 `실제 사용자들이 사용할 서비스를 만들자` 였습니다.
+
+프론트 엔드 팀원 모두 `React` 에 익숙하지 못했고, 어려운 기술적인 부분보다는 기초적인 부분에 충실하게 학습하여 구현을 해나가는것을 목표로 삼았습니다.
+
+- ### 다양한 기기에서의 호환성
+
+개발환경을 PC 환경에서 크롬으로 진행하며 반응형으로 프로젝트를 진행하였습니다.
+
+간단한 프로토타입을 완성 후, 빠른 배포를 통해 여러 기기에서의 UI를 확인해보고 성능을 테스트 해보았습니다.
+
+그 와중, 3D 모델 렌더링 과정에서의 최적화 문제를 발견하였고, `Three.js` 의 모델링의 `Mesh` 를 조절하고 rAF 기반인 `useFrame` 을 여러개를 사용하지 않고 하나의 컴포넌트로 묶어 최적화를 진행하여 갤럭시 S10 기준 GPU 를 98% 에서 70% 가량으로 렌더링 성능을 낮추었습니다.
+
+다음으로, 아이폰 `IOS` 17 버전 이후로 사파리 어플리케이션에서 문제가 나타나게 되었고, 기존 화면의 크기를 자동으로 계산해주는 `100vh` 에서 직접 렌더링 되는 화면을 계산해 카카오톡, 인스타그램과 같은 임베드 웹까지 적절하게 렌더링 될수 있도록 수정하였습니다.
+
+[🖥️100vh 기기문제](https://delicious-halloumi-7ae.notion.site/100vh-7af4bdb4c46c46268d818217b3fd53cb?pvs=4)
+
+다음으로 매번 배포해서 모바일 환경을 실시간으로 CSS 를 디버깅하기에 어려움이 있어 여러 방법을 도입하였습니다.
+
+
+
+
 
 ## 프로젝트 진행