[감정 일기장] 레이아웃 및 폰트 , 이미지 설정

감정 일기장: 감성적인 UI를 위한 폰트와 레이아웃 설정 ✨

 

 

감정 일기장은 단순한 기록이 아니라 사용자의 감정을 시각적으로 표현하는 공간이다.

이를 위해 감성적인 UI를 구성하는 데 집중하였으며, 폰트 선택부터 레이아웃까지 세심하게 디자인하였다.

이번 포스트에서는 감정 일기장의 UI 최적화 과정, 폰트 설정, 그리고 감정 표현을 돕는 레이아웃 구성에 대해 다룬다. 🎨

1. 감성적인 폰트 적용 ✍️

일기의 본질은 글을 통해 감정을 기록하는 것이다.

따라서 폰트는 사용자의 감정을 자연스럽게 담아낼 수 있도록 선택해야 한다.

이번 프로젝트에서는 Nanum Pen Script 폰트를 사용하여 손글씨 느낌을 살렸다.

📌 폰트 적용 방법

폰트를 적용하기 위해 @font-face를 사용하여 커스텀 폰트를 불러오고, 전체적인 스타일을 설정하였다.

/* index.css */
@font-face {
  font-family: "NanumPenScript";
  src: url("/NanumPenScript-Regular.ttf");
}

body * {
  font-family: "NanumPenScript";
}

 

위 코드에서 @font-face를 사용하여 NanumPenScript-Regular.ttf 파일을 프로젝트에서 직접 불러오도록 설정하였다.

이후, body *에 적용하여 모든 텍스트가 손글씨 느낌을 유지하도록 하였다.

2. 감정 표현을 위한 레이아웃 디자인 🎭

일기의 분위기를 살리기 위해 배경 색상과 컨테이너 스타일을 신경 썼다.

📌 레이아웃 스타일 설정

/* index.css */
html, body {
  margin: 0px;
  width: 100%;
  background-color: rgb(246, 246, 246);
}

#root {
  background-color: white;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  height: 100%;
  box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px;
}

 

위 설정을 통해 중앙 정렬된 600px 너비의 일기장 컨테이너를 만들었고,

배경을 밝은 톤으로 설정하여 깔끔하면서도 따뜻한 느낌을 주었다.

box-shadow를 추가하여 종이 일기장을 연상시키는 효과도 더하였다.

3. 감정을 표현하는 이모지 최적화 😊

감정 일기장의 핵심은 사용자가 자신의 감정을 직관적으로 표현할 수 있는 요소를 제공하는 것이다.

이를 위해 감정별 이모지를 활용하였으며, 이미지 최적화를 진행하였다.

📌 이모지 이미지 불러오기

이모지 이미지는 프로젝트 내 public 폴더에 직접 넣거나, assets 폴더를 만들어 import 방식으로 가져올 수 있다.

✅ 방법 1: public 폴더에서 불러오기

<img src="/emotion1.png" alt="기쁨" />
<img src="/emotion2.png" alt="슬픔" />

이 방식은 빌드 시 별도의 import 과정이 필요 없지만, 정적 파일 관리가 필요하다.

✅ 방법 2: assets 폴더에서 불러오기 (최적화 추천 ✅)

import emotion1 from "./assets/emotion1.png";
import emotion2 from "./assets/emotion2.png";

<img src={emotion1} alt="기쁨" />
<img src={emotion2} alt="슬픔" />

이 방식은 빌드시 Webpack이 최적화해 주기 때문에 권장된다.

📌 이미지 최적화를 위한 추가 설정

이미지 파일 크기를 줄이고 최적화하기 위해 웹 최적화된 PNG 또는 WebP 형식을 사용하면 로딩 속도를 향상시킬 수 있다. 필요하면 react-image 같은 라이브러리를 활용하여 로딩 상태를 추가하는 것도 가능하다.

4. 기본적인 레이아웃 구성 🎨

📌  App.jsx 코드

import { Routes, Route, Link, useNavigate } from "react-router-dom";
import Home from "./pages/Home";
import Diary from "./pages/Diary";
import New from "./pages/New";
import Notfound from "./pages/Notfound";
import { getEmotionImage } from "./util/get-emotion-image";
import "./App.css";

function App() {
  const nav = useNavigate();

  const onClickButton = () => {
    nav("/new");
  };

  return (
    <>
      <div>
        <img src={getEmotionImage(1)} />
        <img src={getEmotionImage(2)} />
        <img src={getEmotionImage(3)} />
        <img src={getEmotionImage(4)} />
        <img src={getEmotionImage(5)} />
      </div>
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/new"}>New</Link>
        <Link to={"/diary"}>Diary</Link>
      </div>
      <button onClick={onClickButton}> New 페이지로 이동 </button>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary/:id" element={<Diary />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  );
}

export default App;

 

✨ 마무리

이번 시간에는 감성적인 UI를 구현하기 위한 폰트 적용, 레이아웃 구성, 감정 이모지 최적화를 중점적으로 다루었다. 🖋️

 

📌 핵심 정리

1. Nanum Pen Script 폰트를 적용하여 손글씨 느낌을 살림
2. 감정을 잘 표현할 수 있도록 중앙 정렬된 배경과 박스 디자인 구성
3. 감정 이모지를 assets 폴더에서 import하여 최적화된 이미지 로딩 구현