전문가 커뮤니티 앱
치과의사가 임상 영상을 올리고 동료 치과의사와 케이스를 나누는 전문가 커뮤니티 앱을 개발하고 유지보수했습니다. 앱은 바깥 틀만 앱으로 두고 안쪽 화면을 웹으로 그리는 구조라, 둘의 경계에서 로딩 시점 · 링크 이동 · 로그인 상태가 어긋나기 쉽습니다. 영상이 중심인 서비스에서 목록, 재생, 상세로 넘어가는 길이 끊기면 서비스의 쓸모가 그대로 줄어듭니다. 외주 업체가 아니라 발주사의 사내 개발팀에 합류해 함께 일했습니다.
앱 틀 안에 웹 화면을 담는 구조
치과의사 커뮤니티 앱은 바깥 틀은 앱으로, 안쪽 화면은 웹으로 만든 구조입니다. 웹으로 만든 화면이 앱 안에서 자연스럽게 동작하도록, 웹 화면으로 들어가는 진입, 화면 사이의 전환, 외부 링크를 여는 방식을 정했습니다. 사용자가 지금 보는 화면이 웹인지 앱인지 신경 쓰지 않게 하는 것이 기준이었습니다.
목록에서 재생, 상세까지 끊기지 않는 임상 영상
치과의사가 올린 임상 영상이 이 커뮤니티의 중심입니다. 영상 목록을 훑고, 영상으로 들어가 재생하고, 상세 화면으로 넘어가는 동안 웹으로 만든 영상 콘텐츠가 앱 안에서 끊기지 않아야 했습니다. 이 흐름에서 생기는 문제를 화면 단위로 찾아 고쳤습니다.
동료 치과의사끼리 케이스를 나누는 전문가용 화면
치과의사 커뮤니티 앱의 사용자는 일반 소비자가 아니라 치과의사입니다. 치과의사가 임상 영상과 케이스를 확인하고 공유하는 커뮤니티 화면을 개발하고 유지보수했습니다. 전문가용 서비스는 커머스나 금융 앱과 정보 구조가 달라, 정보를 전달하고 찾아가는 흐름을 그 쓰임에 맞춰 구성했습니다.
로딩 · 링크 · 로그인 상태, 앱과 웹 경계의 유지보수
앱 틀 안에 웹 화면을 담으면 문제는 대개 둘의 경계에서 생깁니다. 웹 화면을 불러오는 시점, 화면이 보이는 방식, 링크로 이동하는 곳, 로그인 상태가 그런 경계입니다. 이 문제들을 앱 쪽에서 보완했습니다. 발주사의 사내 개발팀에 합류해 요구사항을 확인하고 수정 범위를 맞춰 가며 일했습니다.
이 작업의 포인트
앱 틀 안에서 웹 화면이 앱처럼 도는 구조
임상 영상의 목록 · 재생 · 상세가 끊기지 않는 흐름
로딩 · 링크 이동 · 로그인 상태처럼 앱과 웹 경계에서 생기는 문제 보완
인사이트
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…