[프론트][아이디어 발전] WebView

[gaeunpark924]

아이디어 발전 페이지를 웹뷰 방식으로 구현하는 것에 관한 이슈였는데 기술적인 어려움과 타이트한 일정으로 디자인과 구현 방법을 수정했습니다. 수정된 내용은 별도의 이슈를 만들어 관리하였습니다.

• [프론트][아이디어 발전] 수정 UI #18 (comment)

디자인과 구현 방법 (figma 캡처)

• 사용자가 아이디어 퍼즐 조각을 수정하고 덧붙여서 아이디어를 확장해 나갈 수 있는 기능
• 앱 화면 전체를 퍼즐 배경으로 사용하고 퍼즐을 터치해서 이동시킴
• 디자인처럼 앱 밖에도 퍼즐이 있어야 해서 확대/축소가 가능한 웹뷰를 사용해서 구현하기로 함

Task

• UI 배경 격자 만들기
  • [프론트][아이디어 발전] WebView #17 (comment)
• React Native와 WebView 연결
• React Native 버튼으로 WebView의 요소 제어

[gaeunpark924]

배경 격자

• CSS Grid과 DOM을 활용해서 구현함

전체 화면	확대한 화면

퍼즐 위치 교환

• JavaScript의 touchstart, touchmove, touchend 이벤트 리스너를 이용하여 구현
• 확대/축소를 하지 않은 경우에만 동작함

[gaeunpark924]

기술적인 문제

• 웹과 달리 모바일에서는 스크롤을 할 때 터치를 사용합니다.
• 어려운 점은 화면 확대/축소와 퍼즐 이동을 함께 처리해야 하는 경우였습니다.
• 화면을 확대하면 스크롤이 활성화 되고 이때, 화면을 터치하면 미세하게 스크롤이 발생합니다.
• 이렇게 스크롤을 위한 터치가 발생하는 경우와 단순히 퍼즐을 터치해서 이동시키는 경우 둘 다 touchstart, touchmove, touchend 이벤트가 발생합니다.
• 이러한 이유로 퍼즐을 드래그앤드롭 하면서 동시에 스크롤 기능을 제어하는 문제를 해결하기 어려웠습니다.

다른 이유

• 백엔드 팀원의 입대로 백엔드 관련 개발이 많이 이루어지지 않은 상황이었습니다. [백엔드] CRUD #14 (comment)
• 알림창 즉시 기록을 완성하지 못했었고 동아리의 최종발표까지 시간이 얼마 남지 않은 상황이었습니다.

해결

• 서비스 규모를 축소해서 퍼즐의 크기를 4x6 으로 변경하였습니다.
• 비록 규모는 축소되었지만 해당 페이지와 관련 기능 자체가 없어질 수도 있는 상황이었는데 다른 개발, 디자인, 기획셀 팀원분들이 이해를 해주셔서 UI를 수정하는 방식으로 진행할 수 있었습니다.