🔗 웹에서도 확인이 가능합니다.

캐디 스튜디오

캐디 스튜디오는 실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스입니다. 신사업 팀 합류 후 개발 초기부터 배포까지 프론트엔드 개발(1인) 업무를 담당하였습니다.

시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선

구현 내용

• 포트원 모듈 사용 : 신규 개발 리소스를 줄이기 위해 포트원 모듈을 사용하여 결제 기능을 구현하였습니다.
• 사전 검증 요청 로직 추가 : 안정적인 결제를 진행하기 위해 사전 검증 요청 API를 비동기로 구현하여 결제 요청을 안정적으로 처리할 수 있도록 했습니다.

비인증 결제 도식화

sequenceDiagram
    participant 고객
    participant 클라이언트
    participant 서버
    participant 포트원
    
    고객->>클라이언트: 결제 요청
    클라이언트->>서버: 사전 검증 요청

    서버->>포트원: merchantUid 생성 및 사전검증 데이터 전송
    포트원-->>서버: 사전검증 데이터 저장 완료

    alt 통신 성공
        서버-->>클라이언트: merchantUid 반환
    else 통신 실패
        서버-->>클라이언트: 에러 코드 반환
    end

    클라이언트->>포트원: 결제창 열기 (merchantUid 전송)
    포트원-->>클라이언트: 결제 결과

    클라이언트->>서버: 사후 검증 요청
    서버->>포트원: 결제 결과 요청
    포트원-->>서버: 결제 결과
    서버-->>클라이언트: 사후 검증 결과

    alt 사후 검증 성공
        클라이언트->>고객: 결제 성공 화면으로 이동
    else 사후 검증 실패
        클라이언트->>고객: 결제 실패 알림창 표시
    end

화면

시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선

발생 상황

이미지 생성 요청 후, 사용자는 이미지가 완성될 때까지 1분 이상의 긴 대기 시간을 경험하고 있었습니다. 이는 사용자의 만족도를 저하시키고 있었습니다.

해결 방법

해결책으로는 다음과 같은 접근 방식을 고려했습니다.

• API Polling을 통한 실시간 결과 업데이트: 이미지 생성 과정에서 주기적으로 API를 호출하여 사용자에게 실시간으로 결과를 제공합니다.

  sequenceDiagram
      participant 유저
      participant 클라이언트
      participant 서버
  
  		클라이언트-->> 서버: API 요청
  
      
  		alt 이미지 생성 중
          서버-->>클라이언트: status = processing & 생성중인 이미지;
          클라이언트-->> 유저: 생성중인 이미지 렌더링
          클라이언트-->>서버: 5초뒤 다시 이미지 생성내역 요청;
      else 이미지 생성 완료
          서버-->>클라이언트: status = complete & 생성된 이미지
          클라이언트 -->> 유저: 생성 완료된 이미지 및 다운로드 링크
      else 이미지 생성 실패
          서버-->>클라이언트: status = failed
          클라이언트 -->> 유저: 에러 메세지
      end
  
  

• 프로그레스 바 추가: 생성 진행 상태를 시각적으로 보여주기 위해 프로그레스 바를 도입했습니다.