🎨Frontend

미니홈 낭독 기능 개발: 캐릭터 연동 및 별명 옵트인 광장 구현

2026년 미니홈 낭독 기능 개발: 캐릭터 연동, 별명 옵트인 광장 구현 및 앨범 디자인 개선. 성능 문제 해결 과정과 결과.

📅 2026년 8월 2일·📖 3분 읽기·👁 7

미니홈 낭독 기능 개발: 캐릭터 연동 및 별명 옵트인 광장 구현

미니홈 낭독 기능 개발 중 캐릭터 연동과 별명 옵트인을 통한 광장 개방 기능, 그리고 앨범 디자인 개선 작업을 진행했다. 앨범 관련 기능 개발은 웹디자인 개선에 초점을 맞춰 폴라로이드 하이라이트 보드, '그때의 재하' 섹션, 월별 챕터 추가 등을 포함했다. 이 과정에서 시안부터 구현까지의 전반적인 내용을 문서화하는 것도 잊지 않았다.

시도와 함정

처음에는 낭독 기능을 단순히 캐릭터에 연결하는 방식만 생각했다. 하지만 사용자 참여를 유도하고 싶어서 별명 옵트인 방식으로 광장을 개방하는 아이디어를 추가했다. 이 과정에서 캐릭터 ID와 사용자 별명을 매핑하는 로직을 구현해야 했는데, 예상치 못한 데이터베이스 조회 성능 저하를 겪었다.

-- 초기 쿼리 예시 (성능 문제 발생)
SELECT c.character_name, u.nickname
FROM characters c
JOIN users u ON c.user_id = u.id
WHERE c.is_active = TRUE AND u.is_opted_in = TRUE;

쿼리가 복잡해지면서 응답 시간이 길어졌고, 사용자 경험에 직접적인 영향을 미쳤다. 3시간 넘게 이 문제를 붙잡고 있었다.

원인

알고 보니 문제는 복잡한 조인과 WHERE 절에 있었다. 특히 users 테이블의 is_opted_in 필터가 대규모 데이터셋에서 성능 저하의 주범이었다. 인덱스가 제대로 설정되지 않은 상태에서 여러 조건을 동시에 만족하는 데이터를 찾는 데 많은 시간이 소요된 것이다.

해결

해결책은 간단했다. users 테이블에 is_opted_in 컬럼에 대한 인덱스를 추가하고, 쿼리 자체를 좀 더 효율적으로 수정했다.

-- 인덱스 추가 (MySQL 예시)
CREATE INDEX idx_users_opted_in ON users (is_opted_in);

-- 최적화된 쿼리 예시 SELECT c.character_name, u.nickname FROM characters c INNER JOIN users u ON c.user_id = u.id AND u.is_opted_in = TRUE WHERE c.is_active = TRUE;

이렇게 변경하니 데이터베이스 부하가 현저히 줄었고, 낭독 기능과 광장 개방 속도가 눈에 띄게 빨라졌다. 앨범 디자인 개선 작업도 시안을 바탕으로 폴라로이드 하이라이트 보드, '그때의 재하' 섹션, 월별 챕터를 추가하는 방식으로 진행했고, 이 과정 전체를 기록으로 남겼다.

결과

  • 미니홈 낭독 기능의 캐릭터 연동 및 별명 옵트인 광장 개방 기능이 안정적으로 구현됨.
  • 앨범 웹디자인 개선으로 사용자 경험이 향상됨 (폴라로이드 보드, '그때의 재하' 섹션, 월별 챕터 추가).
  • 기능 개발 및 디자인 개선 과정 문서화로 향후 유지보수 및 유사 기능 개발에 대한 레퍼런스 확보.

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

  • [ ] 복잡한 쿼리 작성 시, 각 조건절과 조인에 대한 성능 영향을 미리 고려하자.
  • [ ] 대규모 데이터셋을 다룰 때는 컬럼별 인덱스 설정을 최우선으로 점검하자.
  • [ ] 기능 개발과 디자인 개선은 물론, 그 과정 자체를 기록하는 습관을 들이자.

태그

#미니홈#낭독 기능#캐릭터 연동#별명 옵트인#광장 구현#앨범 디자인#성능 최적화