디지로그 피부 분석 보고서 모바일 웹앱

디지로그의 기존 피부 분석 보고서를 회원이 모바일에서 다시 보도록 연결한 웹앱입니다.

고객사
디지로그
분야
피부 분석·뷰티
기술
React · AWS(EC2, ALB, Route53) · PostgreSQL(RDS) · Nginx · Docker · 소셜 로그인(네이버, 카카오)

포너즈가 한 일

  1. 웹앱 화면 와이어프레임 기획
  2. 보고서·퍼스널컬러·커뮤니티 화면 UI 디자인과 디자인 시스템
  3. 회원용 모바일 웹앱 프론트엔드 개발
  4. 회원·커뮤니티·추천 제품 API와 관리자 페이지 개발
  5. 기존 보고서 저장소 분석, 보고서 조회 API와 회원 연결 개발
  6. 디지로그 AWS 계정에 새 서버 배포와 운영 문의 대응

고객

AI 피부 측정 솔루션 기업, 디지로그

디지로그는 AI로 피부를 측정하고 맞춤 관리법을 제안하는 피부측정 솔루션 기업입니다. 지역별 측정 거점과 차움병원 같은 병원에서 짧은 촬영으로 27가지 피부 항목을 잽니다. 측정이 끝나면 퍼스널컬러와 피부 항목이 담긴 분석 보고서가 휴대폰으로 전송됩니다.

문제

연락처가 빠진 기록이 많던 측정 보고서

디지로그의 분석 보고서는 측정이 끝나면 휴대폰으로 오는 PDF 파일입니다. 파일은 생년월일로 잠겨 있고, 회원 계정과는 이어져 있지 않았습니다. 디지로그는 측정받은 사람이 계정에서 보고서를 다시 보고, 맞는 제품까지 살펴보게 하려 했습니다.

측정받은 이용자는 지난 결과를 보려면 보고서가 온 메시지를 다시 찾아야 했습니다. 여러 번 측정받아도 결과가 파일마다 흩어졌습니다.

디지로그 직원은 기록이 누구 것인지 가려야 했습니다. 기존 기록에는 외국인 이용자가 많고 이메일·연락처가 빠진 기록도 많습니다. 보고서를 다시 찾는 문의가 오면 이름과 생년월일로 기록을 맞춰 봤습니다.

디지로그는 기존 보고서를 회원 계정에 연결하기로 했습니다. 서비스는 여러 언어로 여는 것을 전제로 했습니다.

해결

기존 보고서 저장소 위에 올린 회원용 웹앱

포너즈는 디지로그의 측정 시스템을 그대로 두었습니다. 그 보고서 저장소에 조회 API를 붙이고, 회원용 웹앱과 관리자 페이지를 새로 만들었습니다.

  • 보고서 조회: 보고서 목록과 상세를 불러오는 API를 만들었습니다. 요청한 사람이 보고서 주인인지 먼저 확인합니다.
  • 회원과 보고서 연결: 이름, 생년월일, 연락처가 모두 맞을 때만 기존 보고서를 잇습니다.
  • 담당자 확인: 정보가 맞지 않아 연결되지 않는 회원은 관리자가 기록을 확인한 뒤 잇습니다.
  • 보고서 화면: 피부나이, 피부 상태, 피부코드와 지표별 점수를 보여 줍니다. 막대 색은 평균값을 기준으로 나눕니다.
  • 퍼스널컬러: 디지로그의 L·a·b 분류 기준으로 36가지 유형과 계절별 배경색을 보여 줍니다.
  • 추천 제품과 커뮤니티: 관리자가 피부 타입 태그를 달아 제품을 올리면, 회원 보고서와 맞는 제품이 보입니다. 회원은 제품을 찜하고 커뮤니티에 글을 씁니다.
  • 다국어 준비: 여러 언어로 열 수 있게 데이터베이스 구조를 잡았습니다.
측정 결과가 피부나이·지표별 점수·피부코드 설명 순서로 이어진다(디자인 시안)

이메일 대신 이용자 식별값으로 보고서 연결

처음 안은 가입할 때 이메일로 기존 보고서를 맞추는 방식이었습니다. 기록에는 앞서 본 것처럼 이메일·연락처가 빠진 경우가 많았습니다. 그래서 측정 때 받은 고유 식별값(UID)으로 잇기로 했습니다. 그런데 UID는 잘못 넣으면 남의 보고서가 보일 수 있었습니다. 최종 기준은 이름·생년월일·연락처 일치로 바꿨습니다. 연락처가 없는 기록은 관리자가 확인해 잇습니다.

새 API 서버는 기존 서버와 따로

새 API 서버를 디지로그의 기존 인스턴스에 얹지 않고 새 인스턴스로 띄웠습니다. 장애가 기존 서비스로 번지지 않게 하고, 관리와 확장을 쉽게 하려는 선택이었습니다. 기존 서버를 건드리지 않도록 분석과 연동도 운영 서버와 설정이 같은 개발 서버에서 했습니다.

보고서는 조회 전용 백엔드로

웹앱 서버가 보고서 저장소를 바로 읽지 않게, 보고서 조회만 맡는 백엔드를 따로 두었습니다. Nginx가 회원 화면, 관리자 페이지, 보고서 요청을 각각 다른 서버로 보냅니다. 회원이 몰려도 기존 보고서 저장소에는 조회 요청만 닿습니다.

결과

측정받은 사람이 휴대폰으로 다시 여는 피부 분석 보고서

웹앱과 관리자 페이지는 디지로그의 AWS와 도메인에서 돌아갑니다. 측정받은 회원은 로그인하면 지난 보고서와 퍼스널컬러를 휴대폰에서 다시 엽니다. 디지로그 직원은 관리자 페이지에서 제품과 공지를 직접 올립니다.

보고서 확인
이전측정 뒤 보고서 PDF 전송(시스템) → 생년월일 비밀번호로 열람(사람) → 다시 볼 때 메시지에서 파일을 찾음(사람)
이후회원가입·로그인(사람) → 이름·생년월일·연락처로 보고서 연결(시스템) → 보고서·퍼스널컬러·추천 제품 표시(시스템)
연결 안 되는 회원
이전문의 접수(사람) → 이름·생년월일로 측정 기록 검색(사람) → 파일 재전송(사람)
이후고객센터 문의(사람) → 관리자가 기록 확인 후 연결(사람)
제품·공지 안내
이전측정 현장에서 직원이 제품을 안내(사람)
이후제품·태그·공지 등록(사람) → 회원 화면에 노출(시스템)
이 사례 공유

비슷한 프로젝트를 준비하고 있다면

무엇을 만들지 아직 정리되지 않아도 괜찮습니다. 지금 상황을 알려 주시면 진행 방식과 범위를 함께 잡습니다.

상담 신청하기