개발자 포트폴리오, RPG 지도처럼 재탄생: '/journey' 페이지 개편 및 고유명사 익명화

개발자 포트폴리오, RPG 지도처럼 재탄생: '/journey' 페이지 개편 및 고유명사 익명화

서비스 구조를 정리하고 사용자 경험을 개선하기 위해, 개발 성장 여정을 담은 새로운 포트폴리오 허브 페이지를 개발했습니다. 기존 페이지와 관련 기능들을 제거하고, 개인 정보 보호를 위해 고유명사를 익명화하는 작업도 함께 진행했습니다.

시도와 함정

가장 먼저 '/journey' 페이지를 RPG 지도처럼 시각적으로 구성하는 데 집중했습니다. 기존 페이지와 관련된 모든 요소들을 제거하는 과정에서 예상치 못한 충돌이 발생했습니다. 특히 레벨 배지가 히어로 이미지와 겹치는 문제가 계속해서 나타났습니다.

<!-- 기존 journey 페이지 레이아웃 일부 (예시) -->
<div class="journey-container">
  <div class="level-badge">Lv. 10</div>
  <div class="hero-section">
    <img src="/images/hero.png" alt="Hero Image">
  </div>
  <!-- ... 기타 콘텐츠 ... -->
</div>

/* 기존 CSS 일부 (예시) */
.level-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10; /* 히어로보다 위에 있어야 함 */
}
.hero-section {
position: relative;
z-index: 5; /* 레벨 배지보다 아래 */
}

위와 같이 z-index를 설정했지만, 새로운 레이아웃 구조와 CSS 충돌로 인해 레벨 배지가 히어로 이미지 뒤로 숨어버리는 현상이 발생했습니다. 3시간 동안 CSS를 뒤져봐도 명확한 원인을 찾기 어려웠습니다.

원인

결국 문제는 새로운 '/journey' 페이지의 레이아웃 구조와 기존 CSS의 충돌이었습니다. 특히, 새로운 페이지에서는 position: absolute 대신 flexbox나 grid를 활용한 레이아웃을 사용했는데, 이 과정에서 z-index 속성이 의도대로 작동하지 않았습니다. 또한, 기존에 사용하던 클래스 이름들이 새로운 구조와 겹치면서 예상치 못한 스타일이 적용되었습니다.

해결

RPG 지도 형태의 신규 '/journey' 페이지를 개발하고, 기존 '/journey' 페이지와 관련 요소를 제거하여 서비스 구조를 재정비했습니다. 또한, 개인 정보 보호를 위해 회사/프로젝트 고유명사를 익명화하고, UI 문제를 해결하기 위해 레벨 배지와 히어로 간의 겹침 현상을 수정했습니다.

<!-- 수정된 journey 페이지 레이아웃 일부 (예시) -->
<div class="journey-map-container">
  <div class="map-overlay"></div>
  <div class="hero-wrapper">
    <img src="/images/hero.png" alt="Hero Image" class="hero-image">
    <div class="level-badge-new">Lv. 10</div>
  </div>
  <!-- ... 기타 콘텐츠 ... -->
</div>

/* 수정된 CSS 일부 (예시) */
.hero-wrapper {
  position: relative; /* 히어로 이미지를 감싸는 컨테이너 */
  z-index: 5;
}
.level-badge-new {
position: absolute;
top: 15px;
left: 15px;
z-index: 10; /* 히어로보다 명확하게 위에 오도록 /
background-color: rgba(0, 0, 0, 0.7); / 가독성 향상 */
color: white;
padding: 5px 10px;
border-radius: 5px;
}

z-index 충돌을 해결하기 위해, 히어로 이미지를 감싸는 별도의 div (.hero-wrapper)를 만들고, 레벨 배지를 해당 div 내부에 position: absolute로 배치했습니다. 이렇게 하면 z-index가 부모 요소의 레이아웃 컨텍스트 안에서 올바르게 작동하게 됩니다. 또한, 회사/프로젝트 이름은 익명화 처리하여 [익명의 회사] 또는 [프로젝트 A]와 같이 표기했습니다.

결과

• 개발 성장 여정을 위한 새로운 공개 포트폴리오 허브 '/journey' 페이지가 성공적으로 개발되었습니다.
• 기존 페이지 및 관련 기능 제거를 통해 서비스 구조가 간결하게 정리되었습니다.
• 고유명사 익명화 및 레벨 배지/히어로 겹침 UI 수정으로 사용자 경험이 개선되었습니다.

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

• [ ] 새로운 기능 개발 시, 기존 기능과의 충돌 가능성을 미리 파악하고 테스트 계획에 포함시키기.
• [ ] CSS 클래스 이름이 다른 부분과 겹치지 않도록 네이밍 컨벤션을 준수하거나, 고유한 접두사 사용 고려.
• [ ] z-index 문제 발생 시, 관련 요소들의 부모 요소 레이아웃 컨텍스트를 먼저 확인하기.
• [ ] 개인 정보 보호를 위한 익명화 작업은 개발 초기 단계부터 계획하고 적용하기.