어플이나 웹 서비스를 사용하다가 에러를 겪어보신 적 있나요? 물론 단순히 에러라고만 말하면 다양한 케이스가 포함될 수 있어 모호한 단어입니다. 사용 중 버벅임과 같은 성능 이슈도 있고, 서비스가 갑자기 흰화면으로 변한다던가 움직이지 않는 불능의 상태에 빠질수도 있어요. 충돌이 일어나거나 앱이 그냥 죽으면서 홈화면으로 돌아가는 경우도 있습니다.
프론트엔드 개발자로서 제가 이 회사에서 가장 먼저 주도했던 프로젝트인 에러 경험 개선하기를 소개할게요.
WebView는 웹이라는 자유롭고 성능좋은 도구를 어플리케이션에서 활용할 수 있도록 하는 도구입니다. 그리고 이 웹뷰를 활용하는 방법은 놀라울 만큼 간단합니다. 각 OS 웹뷰 모듈을 호출해서 원하는 웹페이지 주소를 입력하면 끝이에요. 웹만 잘 만들어 놓았다면 호출하는 순간 잘 만들어진 서비스가 됩니다.
하지만 앱에서만 처리할 수 있는 일이 있고, 앱에서 처리하면 더 좋은 문제들이 있습니다. 그러기 위해선 앱과 웹이 소통하면서 서로가 필요한 일을 잘 수행해야해요. 그렇기 때문에 앱-웹 간 통신은 정말 중요한 문제에요.
오늘 다뤄볼 문제는 앱-웹 간 통신하기입니다.
사용자의 행동데이터는 알게모르게 수집됩니다. 요청을 보낸 당신은 어디서 어떤 정보를 가지고 접근하는지에 같은거요.
이제 그런거 말고, 실제 사용자가 우리 사이트에서 뭘 하고 돌아다니는지에 대한 데이터 수집이 필요할 때가 있어요. 오늘 알아볼 것은, 이러한 정보를 사용자 행동 데이터(BreadCrumbs)로 정의하고 적용하는 방법입니다.
안녕하세요. 😜
오늘 알아볼 것은 react query를 더 잘 쓰는 방법입니다. 이미 잘 만들어진 라이브러리지만, typeScript를 쓰고 쿼리 키와 쿼리함수를 관리하는 관점에서 어느정도 구조와 규칙을 정할 필요가 있었어요.
UI / UX의 측면에서 interaction은 매우 중요한 부분을 차지합니다. 적재적소에 배치된 버튼이나 모달, 상황에 맞는 인터렉션은 사용자 이탈을 막고 서비스 내에서 사용자와 사업자가 원하는 화면까지 가도록 돕는 방법이기 때문입니다.
그 중에서 오늘 다뤄볼 주제는 모달(Modal)입니다.