software

LovedIn: 사례 연구

발행: (2026년 2월 21일 오후 09:10 GMT+9)
13 분 소요
원문: Dev.to

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source line exactly as you provided and preserve all formatting, markdown, and technical terms.

소개

안녕하세요, 저는 Awoyemi Abiola이며, Rise Academy 프론트‑엔드 트랙 프로젝트 – LovedIn의 Week 5 task에 대한 케이스 스터디입니다.

이 케이스 스터디에서는 다음 내용을 다룹니다:

  • 이 프로젝트가 해결하는 사랑과 관련된 과제들
  • 누구를 위해 해결하는지
  • 솔루션 및 UI 디자인
  • 기술 구조 및 아키텍처 (HTML + CSS)
  • 협업에 대한 전반적인 회고와 개선이 필요한 영역

그럼 시작해 보겠습니다.

문제

오늘날 빠르게 변화하는 디지털 세계에서, 로맨틱한 관심을 표현하는 것이 점점 더 복잡하고 불안하게 만들고 있습니다. 많은 사람들이 다음과 같은 어려움을 겪고 있습니다:

  1. 올바른 말을 찾는 것 – 완벽한 고백을 만들기 위한 압박감은 종종 기회를 놓치거나 어색한 상황을 초래합니다. 무엇을 말할지, 어떻게 말할지, 언제 말할지를 지나치게 고민하는 데 시간을 보내며, 결국 아무 말도 하지 못하게 될 수 있습니다.
  2. 개인화의 어려움 – 일반적인 제스처는 비인격적이거나 불성실하게 느껴집니다. “내 여자친구/남자친구가 되어줄래?” 같은 간단한 문자는 그 결정 뒤에 담긴 깊은 생각과 배려를 전달하지 못합니다.
  3. 기억에 남는 형식의 부재 – 전통적인 문자 메시지나 소셜 미디어 DM은 관계의 중요한 순간이 가져야 할 특별하고 지속적인 품질이 부족합니다. 이러한 순간은 소중히 여겨져야 하며, 채팅 기록의 바다에 묻히지 않아야 합니다.

LovedIn은 이러한 도전을 해결하기 위해 구조화되고 사려 깊으며 개인화된 플랫폼을 제공함으로써 로맨틱한 고백에서 오는 스트레스를 없애고 진정성과 성실함을 유지합니다. 사용자가 아름답고 기억에 남는 방식으로 감정을 표현할 수 있는 도구를 제공합니다.

대상 청중

LovedIn의 주요 청중은 기술에 능숙한 청년층(18‑35세) 으로, 온라인 데이트 문화에 익숙하고 창의적이며 사려 깊은 애정 표현을 중시합니다.

Solution Overview

우리는 다음과 같은 흐름을 가진 다중 페이지 제안 웹사이트를 설계했습니다:

  1. 인터랙티브 랜딩 페이지 – 시작부터 사용자를 끌어들입니다.
  2. 개인화된 정보 수집 – 제안자와 대상 파트너에 대한 세부 정보를 수집하는 양식.
  3. 자동 생성된 맞춤형 제안 페이지 – 수집된 데이터를 사용해 최종 공유 가능한 제안을 렌더링합니다.

이 흐름은 제작 과정 전반에 걸쳐 감정적 연결을 유지합니다; 사용자는 단순히 양식을 작성하고 링크를 받는 것이 아니라, 잠재 파트너를 위한 사려 깊고 로맨틱한 경험을 만들고 있습니다.

Visual Design

Colour Palette

역할Hex Code이름
Primary#E22B3BScarlet Blush
Secondary#ED4779Wild Strawberry
Accent#FA88BBPetal Frost
Background#F0D1D7Pink Carnation
Support#D86A77Blush Rose

이 팔레트는 로맨틱하고 애정 어린 색조를 강조하여, 시끄럽거나 과도하지 않으면서도 따뜻하고 부드러우며 감성적으로 초대하는 분위기를 만들어냅니다.

Typography

우리는 로맨스를 유지하면서도 가독성을 확보할 수 있는 서체가 필요했습니다. 여러 차례 논의 끝에 다음을 선택했습니다:

  • Headings: Playfair Display – 표현력이 풍부하면서도 우아합니다.
  • Body text: Inter – 간결하고 매우 읽기 쉽습니다.

Technical Architecture

웹사이트는 접근성과 SEO를 향상시키기 위해 시맨틱 HTML을 사용하여 구축되었습니다:

  • <nav> – 내비게이션 및 히어로 섹션
  • <main> – 주요 콘텐츠
  • <section> – 관련 콘텐츠를 논리적으로 그룹화
  • <footer> – 마무리 콘텐츠
  • <aside> – 보조 콘텐츠

CSS – Global Custom Properties

모든 색상, 폰트, 간격 및 전환 값은 CSS 커스텀 프로퍼티로 저장되며, 모든 페이지에서 공유되는 기본 스타일시트에 정의됩니다.

:root {
  /* ==================== COLORS ==================== */

  /* Primary Colors */
  --color-primary: #e22b3b;
  --color-primary-bg: #f0d1d7;

  /* Secondary Colors */
  --color-secondary: #ed4779;
  --color-secondary-bg: #fff6f8;

  /* Accent Colors */
  --color-accent: #fa88bb;

  /* Support Colors */
  --color-support: #d86a77;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-black: #000000;

  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families */
  --font-display: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  /* Base Font Size */
  --font-size-base: 16px;

  /* Font Sizes – Type Scale */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 3rem;     /* 48px */
  --font-size-6xl: 3.75rem;  /* 60px */
  --font-size-7xl: 4.5rem;   /* 72px */

  /* Heading Scales */
  --heading-h1: var(--font-size-5xl);
  --heading-h2: var(--font-size-4xl);
  --heading-h3: var(--font-size-3xl);
  --heading-h4: var(--font-size-2xl);
  --heading-h5: var(--font-size-xl);
  --heading-h6: var(--font-size-lg);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==================== SPACING & SHAPES ==================== */

  /* Spacing Scale – Padding / Margin */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 2.5rem;   /* 40px */
  --spacing-3xl: 3rem;     /* 48px */
  --spacing-4xl: 4rem;     /* 64px */
  --spacing-5xl: 5rem;     /* 80px */
  --spacing-6xl: 6rem;     /* 96px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
}

이 변수들은 스타일시트 전반에 걸쳐 참조되어 일관된 시각 언어를 보장하고, 향후 업데이트를 간편하게 만들어 줍니다.

Reflection

  • Collaboration: Rise Academy 코호트와 협업하면서 빠른 피드백 루프를 만들 수 있었고, 접근성 문제를 초기에 발견할 수 있었습니다.
  • What went well:
    • Semantic markup가 SEO와 스크린리더 내비게이션을 개선했습니다.
    • 색상 팔레트와 타이포그래피가 일관된 로맨틱 분위기를 연출했습니다.
    • CSS custom properties를 사용해 디자인 시스템을 유지보수하기 쉽게 만들었습니다.
  • Areas to improve:
    • 저조도 환경을 선호하는 사용자를 위해 다크 모드 변형을 추가합니다.
    • 폼 검증 로직에 대한 단위 테스트를 구현합니다.
    • 저사양 디바이스에서 랜딩 페이지 애니메이션 성능을 향상시킵니다.

Overall, LovedIn demonstrates how thoughtful UI/UX combined with clean, semantic code can turn a stressful moment—like a romantic proposal—into a memorable, joyful experience.

CSS 변수 및 디자인 토큰

/* ========== SHADOWS ========== */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-colored: 0 6px 20px rgba(226, 43, 59, 0.25);
--shadow-subtle: 0 0 0 3px rgba(226, 43, 59, 0.15);

/* ========== TRANSITIONS ========== */
--transition-fast: 150ms ease-in-out;
--transition-base: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;

/* ========== LINEAR GRADIENTS ========== */
--gradient-primary: linear-gradient(
  135deg,
  var(--color-primary-bg),
  var(--color-secondary-bg)
);
--gradient-secondary: linear-gradient(
  135deg,
  var(--color-secondary-bg),
  var(--color-primary-bg)
);
--gradient-transparent: linear-gradient(
  rgba(255, 192, 203, 0.6),
  rgba(255, 182, 193, 0.6)
);

이 접근 방식은 웹사이트의 공유 요소에 일관성과 결합성을 보장하여 가능한 한 반복을 줄였습니다.

레이아웃 전략

Flexbox는 일관된 레이아웃과 원활한 반응성을 위해 애플리케이션 전반에 걸쳐 사용되었습니다:

display: flex;
align-items: center;
justify-content: space-between;

원래 네비게이션 바는 시맨틱 표준을 따르지 않았으며, HTML 구조가 중복되었습니다. 모든 네비게이션 링크가 <nav> 요소의 직접 자식이 되도록 수정되었습니다.

HTML

<nav class="navigation">
  <div class="logo">
    [Image: LovedIn logo]
  </div>

  <div id="nav-links-container">
    <a href="#features">Features</a>
    <a href="stories.html">Stories</a>
    <a href="login.html">Sign In</a>
    <a href="index.html#get-started">Get Started</a>
  </div>
</nav>

CSS

.navigation {
  max-width: 1144px;
  margin: 0 auto var(--spacing-3xl);
  background: var(--color-secondary-bg);
  border-radius: var(--radius-full);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}

#nav-links-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-3xl);
}

프로젝트 회고

전체적으로 이번 프로젝트는 저에게 매우 흥미로운 경험이었습니다. Git 및 GitHub를 활용한 협업과 의미론적 HTML 작성 표준, CSS를 이용한 구조화된 디자인 시스템 구축에 대해 많이 배웠습니다.

협업은 도전 과제 없이 이루어지지는 않았습니다—특히 팀원들의 관점 차이로 인해 기능 및 페이지 구현에 대한 표준화된 접근 방식을 유지하는 데 어려움이 있었습니다. 우리는 명확하고 간결한 논의와 정기적인 회의를 통해 이러한 장애물을 극복했으며, 매주 요구사항이 잘 전달되고 이해될 수 있도록 했습니다.

향후 개선 사항 (v2.0)

  • 시맨틱 강화 – 의미를 더 명확히 하기 위해 HTML을 추가로 정제합니다.
  • SEO 최적화 – 메타데이터, 헤딩, 콘텐츠 계층 구조를 개선합니다.
  • 접근성 – ARIA 역할, 포커스 관리, 색상 대비 등을 점검하고 보완합니다.

감사의 글

  • Oluchi Okwuosa – GitHub 협업자
  • Sophia Ahuoyiza – GitHub 기여자 (이슈 제출 및 피드백)

그들의 버전 사례 연구를 여기에서 볼 수 있습니다:
Link to case study.

0 조회
#frontend #case study #HTML #CSS #UI design #web development #Rise Academy #project reflection
원문 보기
Share:
Back to Blog

관련 글

더 보기 »