프론트엔드: 사용자 실제 모습 기반 캐릭터 생성 기능 구현 가이드

미니홈 캐릭터 생성 시스템에서 사용자의 '실제 모습'을 반영하는 기능이 부족해서 고민이 많았어요. 단순히 미리 만들어진 아바타를 고르는 게 아니라, 좀 더 개인화된 경험을 주고 싶었거든요. 그래서 캐릭터 생성 UI에 실제 모습을 보여주는 기능을 추가해보기로 했습니다.

시도와 함정

처음에는 캐릭터 생성 UI에 사용자의 실시간 모습을 띄우는 걸 생각했어요. 그런데 이게 생각보다 복잡하더라고요. 카메라 접근 권한 문제도 있고, 프라이버시 이슈도 신경 쓰여서 일단은 사용자가 업로드한 프로필 사진을 캐릭터 생성 화면에 보여주는 방식으로 접근했습니다.

HomeClient.tsx 파일을 열어서 캐릭터 생성 로직을 살펴보는데, 어디에 실제 모습을 집어넣어야 할지 감이 안 잡혔어요. 몇 시간 동안 코드를 뒤적이고 삽질한 끝에, 캐릭터 미리보기 영역 근처에 프로필 사진을 띄우는 게 가장 자연스럽겠다는 결론을 내렸습니다.

원인

결국 문제는 HomeClient.tsx 파일 내에서 캐릭터 미리보기 컴포넌트의 렌더링 로직을 수정해야 한다는 점이었습니다. 단순히 이미지를 추가하는 게 아니라, 기존 컴포넌트의 구조와 데이터 흐름을 이해하고 적절한 위치에 삽입해야 했어요.

해결

HomeClient.tsx 파일의 CharacterPreview 컴포넌트 내부에 다음과 같이 프로필 사진을 보여주는 로직을 추가했습니다.

import React from 'react';
import { UserProfile } from './types'; // UserProfile 타입이 있다고 가정
interface CharacterPreviewProps {
characterData: any; // 캐릭터 데이터 타입은 실제 프로젝트에 맞게 수정
userProfile: UserProfile | null; // 사용자의 프로필 정보
}
const CharacterPreview: React.FC<CharacterPreviewProps> = ({ characterData, userProfile }) => {
return (
<div className="character-preview-container">
{/* 기존 캐릭터 미리보기 로직 /}
<div className="character-model">
{/ 캐릭터 모델 렌더링 */}
</div>
  {/* 실제 모습 표시 영역 */}
  {userProfile &amp;&amp; userProfile.profileImageUrl &amp;&amp; (
    &lt;div className=&quot;user-real-image-wrapper&quot;&gt;
      &lt;img
        src={userProfile.profileImageUrl}
        alt=&quot;User's real image&quot;
        className=&quot;user-real-image&quot;
      /&gt;
      &lt;p className=&quot;image-label&quot;&gt;Your Real Look&lt;/p&gt;
    &lt;/div&gt;
  )}
&lt;/div&gt;

);
};
export default CharacterPreview;

위 코드는 CharacterPreview 컴포넌트가 렌더링될 때, userProfile 객체에 profileImageUrl이 존재하면 해당 이미지를 'Your Real Look'이라는 라벨과 함께 보여주도록 하는 방식입니다. UserProfile 타입과 profileImageUrl 속성은 실제 프로젝트의 데이터 구조에 맞게 조정해야 합니다.

결과

• 캐릭터 생성 화면에 사용자의 실제 모습(프로필 사진)이 표시됩니다.
• 사용자는 캐릭터를 만들면서 자신의 모습과 비교하며 더 만족스러운 결과물을 얻을 수 있게 되었습니다.
• 캐릭터 생성 과정의 개인화 수준이 한 단계 높아졌습니다.

정리 — 같은 함정 안 빠지려면

• [ ] 캐릭터 생성 UI에 개인화 요소(실제 모습 반영)를 추가할 때는 어떤 컴포넌트에서, 어떤 데이터를 활용할지 미리 설계한다.
• [ ] HomeClient.tsx와 같이 핵심 UI 로직이 담긴 파일 수정 시, 관련 컴포넌트의 데이터 흐름과 렌더링 구조를 충분히 파악한다.
• [ ] 사용자 프로필 이미지와 같은 외부 리소스 로딩 시, 해당 리소스가 존재할 경우에만 렌더링되도록 조건부 렌더링을 적용한다.