🖼️ 프로필 이미지 처리 간소화 – 업로드에서 서버 제공으로

기존에는 사용자가 직접 이미지를 업로드해서 프로필 이미지로 등록하는 방식이었지만, 이제는 서버에서 메인 캐릭터 정보를 기준으로 자동으로 이미지를 제공하는 구조로 전환했다. 이 전환은 단순한 기능 변경이 아니라, UX와 유지보수 관점에서도 큰 이점을 가져왔다.

🔄 기존 방식: 사용자 업로드 기반

초기에는 사용자 편의를 위해 다음과 같은 구조로 이미지 등록을 구현했었다:

 <input type="file">로 파일 선택

• FormData로 묶어서 PostResourceWing으로 이미지 업로드

• 업로드된 이미지 ID를 PatchProfileWing에 logo_id로 설정하여 프로필에 등록

const wing = PostResourceWing(formData);
const response = await shootingStar.launch<{ id: string }>(wing);
const uploadedImageId = response.data.id;

const profileUpdateBody: ProfileUpdateBody = {
  foreign_ids: {
    logo_id: uploadedImageId,
  },
};

하지만 이 과정은 다음과 같은 단점이 있었다:

• 사용자가 매번 이미지를 골라야 함 (귀찮음)

• 업로드 과정 중 실패 가능성 존재

• 서버 보안 이슈 발생 가능성

• 캐릭터와 관련 없는 이미지 사용 가능성

✅ 개선 방식: 메인 캐릭터 정보 기반 자동 이미지

이제는 사용자가 별도로 이미지를 업로드하지 않아도, 서버에서 제공하는 메이플 메인 캐릭터의 이미지를 기준으로 프로필 이미지를 세팅한다.

📦 핵심 흐름

1. 서버에서 사용자 프로필 전체를 받아옴 (GetMyUserWing)

2. characters 배열 중 is_main === true인 캐릭터를 찾음

3. 해당 캐릭터의 이미지 경로를 유틸 함수 getImagePathFromProfile()를 통해 생성

const mainChar = myProfileResponse.data.characters.find(char => char.is_main);
setMainCharacter(mainChar || null);
setMyProfileImage(getImagePathFromProfile(myProfileResponse.data));

🧩 유틸 함수: getImagePathFromProfile

function getImagePathFromProfile(profile: ProfileData) {
  if (profile === undefined) {
    return ANONYMOUS_LOGO_ID;
  }
  if (profile.foreign_ids.logo_id) {
    return getImagePath(profile.foreign_ids.logo_id);
  } else if (profile.characters.length > 0) {
    for (const character of profile.characters) {
      if (character.is_main) {
        return getImagePath(character.logo_id);
      }
    }
  }
  return ANONYMOUS_LOGO_ID;
}`;
}

로직이 컴포넌트 외부에 분리되어 재사용성과 테스트 용이성 확보

이미지 경로가 명확하게 정의되므로 img src={...}로 바로 사용 가능

✨ 회고

“유저가 사진을 고를 수 있는 자유보다, 자동 제공되는 일관성이 더 나을 수 있다.”

처음에는 유저가 직접 사진을 고르게 하는 게 당연히 좋다고 생각했다. 하지만 실제 사용성 테스트와 피드백에서는

1. 메인 캐릭터 사진이 가장 ‘그 사람’을 잘 나타냄

2. 서버 일관성 유지가 쉬움

결국 자동화된 방식이 더 직관적이고, 데이터 일관성 + UX 간결성 측면에서도 더 낫다는 결론을 내렸다.

앞으로도 사용자 입력을 받는 구조보다 서버가 알아서 제공할 수 있는 부분은 최대한 자동화하는 방향으로 개선할 계획이다.