그룹 페이지에 수상 내역 추가로 프로필 완성도 올려

kpop 그룹의 프로필 페이지에 수상 정보를 추가했다. 적재 봇, UI 컴포넌트, 다국어 번역까지 한 번에 정리한 작업이었는데, 각 레이어에서 뭘 챙겨야 하는지 좋은 학습이 됐다.

왜 수상 정보가 필요했나

그룹 정보를 담는 페이지에서 수상 내역은 꽤 중요한 요소다. 팬들은 "이 그룹이 어떤 상을 받았나"를 궁금해하고, 정보 완성도 관점에서도 성과와 성취도 관련 데이터가 들어오면 컨텐츠 가치가 올라간다. 근데 처음엔 데이터가 적재되지 않고 있었다. 수상 정보를 정제해서 DB에 넣고, 페이지에 섹션을 표시하고, 다국어를 지원하는 일이 필요했던 것.

세 가지 부분으로 나눠 진행

1. 적재 봇 구축 (seed_awards.py)

데이터를 수동으로 넣을 수는 없으니 자동화 봇을 만들었다. 이런 류의 적재 작업은 보통 이렇게 흘러간다:

• 외부 소스(API, 크롤링, 입력 파일)에서 데이터 가져오기
• 정제/정규화 (중복 제거, 날짜 포맷 통일, 필드명 매핑)
• 기존 데이터와 비교해서 새 항목만 삽입 또는 갱신
• 로깅해서 문제 발생 시 추적 가능하게 하기

이번엔 수상 정보를 주기적으로 싱크하는 구조로 짰는데, 같은 상을 중복으로 적재하지 않도록 고민이 필요했다. 또 새로운 수상이 들어올 때마다 수동 개입 없이 자동으로 처리되는 구조라 나중에 유지보수 비용이 훨씬 낮을 것 같다.

2. 페이지에 렌더링 (GroupPage.astro + db.ts)

데이터가 DB에 들어가면 이제 화면에 표시해야 한다. Astro 컴포넌트에서 DB 쿼리를 날려서 해당 그룹의 수상 목록을 가져오고, 카드나 리스트 형태로 렌더링한다. 이 부분에서 주의할 점은:

• 그룹이 수상 정보를 가지지 않았을 때를 처리 (빈 상태 메시지, skeleton UI 등)
• 정렬 순서 결정 (최신순? 상의 등급순?)
• 페이지 레이아웃에서 수상 섹션의 위치와 비중

특히 "아직 수상이 없는 그룹" 같은 엣지 케이스를 미리 생각해 두니 나중에 버그를 줄일 수 있었다.

3. 번역 문자열 분할 (translate.py + ui.ts)

다국어 지원이 필요할 때 항상 마주치는 문제가 번역 관리다. 특히 수상 정보처럼 긴 텍스트가 많으면, 번역 문자열이 한 파일에 너무 커진다.

// 기존: ui.ts에 모든 번역 스트링을 한곳에
awards: {
  title: "수상",
  description: "그룹이 받은 상들...",
  // 다른 언어 버전들...
  // 점점 커짐
}

// 분할 후: 긴 본문을 별도 모듈로
awards_title = "수상"
awards_section = "..."  // 긴 설명은 따로

번역 텍스트를 분할하면:
- 번역 작업자가 도메인별로 일할 수 있다
- 버전 컨트롤에서 merge conflict이 줄어든다
- 특정 문자열만 업데이트할 때 다른 부분이 영향받지 않는다

배운 점들

자동화 봇의 가치. 수상 데이터를 수동으로 넣는 것보다, 한 번 봇을 제대로 만들어 놓으면 유지보수 비용이 훨씬 낮다. 나중에 데이터가 추가돼도 자동으로 싱크되니까, 팀의 수동 작업을 많이 줄일 수 있다.

번역 구조는 일찍 분할하기. 국제화를 지원하는 프로젝트에서 번역 파일이 커질수록 관리가 힘들어진다. 초반에 도메인별, 파일 크기별로 쪼개는 게 낫다. 한번 합쳐진 파일을 나중에 쪼개는 건 여러 언어판을 동시에 수정해야 해서 복잡하다.

DB 레이어의 중요성. 페이지가 직접 쿼리를 날리는 것보다, db.ts 같은 계층을 두고 조회 로직을 캡슐화하면, 나중에 스키마가 바뀌어도 페이지는 건드릴 필요가 없다. 변경 영향도를 최소화할 수 있다.

이 작업을 하면서 작은 기능 추가도 백엔드(적재), 데이터 계층(DB), 프론트엔드(UI), 다국어 레이어를 고르게 손봐야 한다는 걸 다시 느꼈다.

🛒 이 글과 어울리는 추천 상품

• 외장SSD 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.