Project | 의료인 인증 미니앱(23.07.31~08.24)

치즈톡에서 쓰던 “의료인 면허 인증”

치즈톡을 통하지 않고도 바로 진입하여 의료인 인증을 할 수 있는 서비스로 만드는 작업을 했다.

 

 

서비스의 유저 플로우

 📎 User Flow 1.Redirect가 있는 경우 치즈톡 → 회원가입 → 미니앱 본인인증(passVerify) → 면허 타입&면허 번호 선택해서 확인(Certification/Verify) → 성공하면 치즈톡으로 이동하여 면허인증카드 획득

1. Redirect가 없는 경우 홈화면(Home) → 면허타입 선택(SelectType)→ 미니앱 본인인증(PassVerify) → 면허번호 확인(LicenseNumber) → 성공하면 같은 경로에서 면허인증 카드를 획득(Card)

 

🎨 Figma(리다이렉트가 없는 경우 flow 화면)

 

theme color :(블루 계열) #F1F6FC", "#3C84F0", "#2369D4"

 

 

 

Project Schedule

 

 

개발 환경

• yarn : 개발환경 패키지 관리할 때, npm보다 패키지 설치하는 프로세스가 더 빠르고, 안전하다는 특징이 있다고 한다.
• TypeScript : 리액트처럼 JSX를 쓰는데 타입을 지정해줘서 에러를 미리 알려준다고 한다. 간단한 건 괜찮았는데 타입을 지정해주기 어려운 친구들도 있었다.
• tailwind css : 처음 써보는 css. 처음엔 스타일을 찾아서 적용하는 게 복잡했는데 조금 적응하니까 빠르게 레이아웃 짜기가 좋다.
• dev(개발용)와 prd(실제운영)으로 나뉘어져 있다.
• redirect가 있는 경우의 flow는 구현되어 있어서 참고하며 작업할 수 있었다.

 

주요 트러블 슈팅

• 공유하기 버튼 클릭 시 공유에 대한 네이티브 시스템을 갖고 있지 않은 디바이스 위한 팝업 구현
  • 카카오 로고 아이콘이 다른 아이콘보다 늦게 뜨는 부분
  • 카카오 로고 아이콘 클릭 시, 카카오 공유하는 팝업창이 떠야 하는데 안 뜨는 문제
  🚩해결
  • 카카오 SDK를 script에 불러오는 useEffect에서 불러오기 전 로딩을 추가하고 Promise를 써서 카카오 SDK 불러오는 과정을 넣고 then에 로딩을 없애서 카카오 아이콘이 나타나기 전 로딩이 뜨게 구현
  • 카카오SDK의 업데이트 사항과 디벨로퍼스 문서를 보면서 템플릿을 커스텀하는 방법 찾아 시도하여 팝업창이 뜨게 구현
• 📍문제
• 면허인증 카드 발급화면을 공유할 때 알맞는 정보를 보내기 위한 meta Og Tag 동적 생성
  • SPA환경인 웹이므로 하나의 html을 가지고 있어해당 페이지 컴포넌트에서 dom에 접근하여 바꿔주는 방식으로 구현했지만 공유하기를 했을 때 바뀐 값으로 안 나타는 문제
  🚩해결
  • reac-helmet-async라이브러리 통해 meta 태그를 생성하고 react-snap 라이브러리 사용하여 index.html을 나타나게 함
• 📍문제
• 면허인증 카드를 발급 받은 사용자도 data를 볼 수 있도록 구현
  • 면허인증 카드 화면을 공유 받은 사용자가 url을 클릭해서 들어가면 data가 빈 값으로 나옴
  🚩해결
  • 인증 카드의 data를 인증 프로세스를 거쳐서 오는 경우와 인증 프로세스 거치지 않은 경우로 나누고 필요한 data를 쿼리 스트링으로 만들어 공유하기 버튼에 쿼리스트링이 달린 경로를 보내도록 구현
• 📍문제
• 카드 터치/클릭 시 select 제어
  • 면허인증 카드를 드래그하거나 터치할 때 이미지 고스트현상과 파란색으로 긁혀 나오는 현상
  🚩해결
  • 카드 내에 있는 img태그를 div태그로 바꾸어 bg url로 이미지 경로 설정
  • 카드 UI에 user-select :none과 webkit-tap-hightlight-color:transparent를 써주어 파란색으로 긁히는 현상 제어
• 📍문제

 

 

프로젝트에서 경험한 것

• 실제 사용되는 앱의 처음부터 끝까지의 플로우를 경험하고 작업해볼 수 있었던 것
• meta og 태그를 동적 생성하기 위해 dom에 접근하여 바꿔보기도 하고, 💎react-helmet-async 라이브러리를 써보기도 한 것
• 애니메이션을 css로 만들기
• 💎html2canvas와 file-saver라이브러리 사용하여 사진 저장하기 기능 구현
• 카카오 공유하기 SDK활용
• 쿼리스트링 사용
• 백엔드API 통신
• QA테스트와 배포
• 디바이스별 테스트
• 여러 라이브러리를 알게 되고 사용해본 점
• console을 자주 보게 됨

 

 

이번 프로젝트로 느낀 점

• 규모가 작은 프로젝트여도 실제로 사용하는 서비스여서 생각하고 작업해야 할 부분들이 많았다.
• 타입스크립트를 깊이는 아니지만 조금이나마 쓸 수 있게 됐다.
• 콘솔 로그를 많이 찍어볼 수 있었다.
• 유저 플로우를 프로젝트 진행상황 70% 됐을 때 이해가 됐었던 거 같은 느낌이 들었다.
• 백엔드 api로 통신하고 쿼리스트링을 활용해 볼 수 있어서 너무 좋았다.
  • 내가 헷갈려하고 구분이 안됐던 부분을 확인할 수 있었다. 쿼리스트링과 location 부분을 더 알아봐야겠다는 생각이 든다.
• meta의 og태그를 동적으로 생성되게 만들어 볼 수 있어서 좋았다.
  • react-helmet-async라이브러리
• 배포까지 빠듯하게 작업했는데 QA테스트를 완전히 성공하지 못한 것 같아 아쉬운 마음이 든다.
• css와 애니메이션을 만만하게 보면 안 될듯
  • 나름 내가 그나마 잘한다고 생각한 부분이었는데 너무 어려웠다.
• 기존에 자운님이 작성해주신 코드가 있어서 읽어볼 수 있는 기회가 있어서 도움이 많이 됐다.
• 미니 인증 간소화 앱이 발전하고 잘 쓰여지게 되길 기대하게 된다.
• 크로스 브라우저여서 테스트해보고 개발자도구를 볼 일이 많았다.
• 이런저런 케이스를 테스트해보고 에러처리를 해야한다.
• 콘솔을 잘 들여다 봐야 한다.

Deploy

https://bogun.careers/