[LostBoard 프로젝트] 초기화면 디자인 수정

기존 초기화면

초기화면 변경 이유

LostBoard를 처음 만들고 나서 몇 명의 친구들에게 보여줬는데, 공통적으로 나온 피드백이 있었습니다.

"이게 뭐하는 사이트야?"
"Lost Ark 관련 사이트 맞아?"
"뭘 해야 할지 모르겠어"

 

맞는 말이었습니다. 기존 초기화면은 단순히 텍스트 필드와 버튼만 덩그러니 있어서, 처음 방문하는 사용자가 이 사이트의 목적을 파악하기 어려웠습니다.

🔍 기존 디자인의 문제점

1. 정보 부족

// 기존 코드 - 너무 심플함
<div className="content">
  <TextField
    label="캐릭터명"
    variant="standard"
    value={characterName}
    onChange={handleInputChange}
  />
  <Button variant="contained" onClick={handleSearch}>
    검색
  </Button>
</div>

• 사이트 제목이나 설명이 전혀 없음
• 무엇을 검색하는 건지, 왜 검색해야 하는지 불분명
• Lost Ark와의 연관성을 알 수 없음

2. 시각적 정체성 부족

/* 기존 CSS - 밋밋한 디자인 */
.content {
  background-color: #1f2125;
  color: white;
  padding: 20px;
}

• 일반적인 화이트 테마로 게임 특성 반영 안됨
• Lost Ark의 느낌과 거리가 멀음
• 브랜딩 요소 전혀 없음

🎨 개선 방향 설정

개선하면서 중점을 둔 4가지 포인트입니다:

1. 명확한 정보 전달 - 사이트 목적 명시
2. Lost Ark 테마 적용 - 게임 유저들의 친숙함 증대
3. 인터랙티브 요소 - 반응성 있는 UI
4. 반응형 디자인 - 모든 화면 사이즈에서 최적화

 

🛠 구체적인 개선 작업

1. 브랜딩과 정보 전달 강화

변경 후:

<div className="home-content">
  <h1 className="home-title">LostBoard</h1>
  <p className="home-subtitle">
    Lost Ark 플레이어를 위한 레이드 효율성 분석 도구<br/>
  </p>
  
  <div className="search-container">
    {/* 검색 UI */}
  </div>
</div>

 

개선효과:

• 사이트명과 목적을 명확히 표시
• 사용자가 무엇을 해야 하는지 직관적으로 안내
• 전문적이고 신뢰감 있는 첫인상 제공

2. Lost Ark 테마 색상

색상 팔레트 정의:

:root {
  /* Lost Ark 시그니처 골드 */
  --primary-gold: #D4AF37;
  --primary-gold-light: #F4E4BC;
  --primary-gold-dark: #B8941F;
  --primary-gold-glow: rgba(212, 175, 55, 0.3);
  
  /* 다크 배경 */
  --bg-primary: #0A0A0B;
  --bg-secondary: #1A1B1E;
  --bg-tertiary: #2A2B2E;
  --bg-card: #1E1F22;
  
  /* 텍스트 계층 */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B3B8;
  --text-muted: #8A8B8F;
}

 

제목 그라데이션 효과 적용:

.home-title {
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-gold), var(--primary-gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px var(--primary-gold-glow);
  letter-spacing: 2px;
}

 

개선 효과:

• Lost Ark 게임 내 UI와 유사한 고급스러운 느낌
• 금색 포인트로 프리미엄 서비스 인상
• 일관된 색상 시스템으로 브랜드 정체성 강화

3. 인터랙티브한 검색 컨테이너

카드 형태의 검색 영역:

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-heavy);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  min-width: 400px;
}

.search-container:hover {
  border-color: var(--primary-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-5px);
}

 

Material-UI 입력 필드 커스터마이징:

<TextField
  id="character-search"
  label="캐릭터명"
  variant="outlined"
  fullWidth
  sx={{
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'var(--bg-tertiary)',
      color: 'var(--text-primary)',
      borderRadius: '12px',
      '& fieldset': {
        borderColor: 'var(--border-color)',
        borderWidth: '2px',
      },
      '&:hover fieldset': {
        borderColor: 'var(--primary-gold)',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'var(--primary-gold)',
        boxShadow: '0 0 10px var(--primary-gold-glow)',
      },
    },
  }}
/>

 

개선 효과:

• 호버 시 시각적 피드백으로 반응성 증대
• 카드 형태로 검색 영역을 명확히 구분
• 부드러운 애니메이션으로 모던한 느낌

4. 반응형 디자인 적용

반응형 디자인 최적화:

@media (max-width: 768px) {
  .home-title {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
  }
  
  .search-container {
    min-width: auto;
    width: 100%;
    max-width: 350px;
    padding: 30px 20px;
  }
  
  .home-subtitle {
    font-size: 1rem;
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .home-title {
    font-size: 2rem;
  }
  
  .search-container {
    padding: 25px 15px;
  }
}

 

개선 효과:

• 다양한 화면 크기에서 일관된 사용자 경험

 

📊 개선 결과 비교

기존 초기화면

수정된 초기화면

🎯 사용자 반응 변화

 

✅ "아, Lost Ark 사이트구나!" - 즉시 인식
✅ "뭘 하는 사이트인지 바로 알겠어" - 명확한 정보 전달
✅ "디자인이 게임이랑 잘 어울려" - 테마 일치성
✅ "화면 크기를 변경해도 잘 보여" - 반응형 디자인 효과

 

🚀 다음 개선 계획

초기화면 개선을 통해 얻은 인사이트:

1. 일관된 디자인 시스템 - 다른 페이지에도 동일한 테마 적용 예정
2. 로딩 상태 개선 - 검색 중 상태를 더 명확히 표시
3. 애니메이션 강화 - 페이지 전환 시 부드러운 효과 추가
4. 접근성 개선 - 키보드 네비게이션 및 스크린 리더 지원

💡 배운 점

이번 디자인 개선을 통해 깨달은 것들

 

1. 사용자 관점의 중요성

• 개발자가 당연하다고 생각하는 것들이 사용자에게는 전혀 당연하지 않음
• 첫인상이 사용자의 사이트 이용 의지에 큰 영향을 미침

2. 브랜딩의 힘

• 단순히 기능만 잘 작동하는 것보다 정체성이 명확한 것이 중요
• 타겟 유저에게 친숙한 디자인 언어 사용의 효과

3. 점진적 개선의 가치

• 한 번에 모든 걸 완벽하게 만들 필요 없음
• 사용자 피드백을 받고 단계적으로 개선하는 것이 더 효과적