디자인을 바꾸는 가장 쉬운 방법

디자인은 감각보다 규칙에 가깝습니다

웹사이트 디자인을 어렵게 느끼는 이유는 "예쁘게 만들어야 한다"는 부담 때문입니다. 하지만 처음부터 멋진 디자인을 목표로 잡을 필요는 없습니다. 비개발자가 Next.js 사이트를 직접 다룰 때의 목표는 먼저 깔끔하고 읽기 쉬운 화면을 만드는 것입니다.

화면의 인상은 대부분 네 가지가 결정합니다.

• 색상: 밝은지, 차분한지, 신뢰감이 있는지 결정합니다.

• 여백: 답답한 화면인지, 숨 쉴 공간이 있는 화면인지 결정합니다.

• 글자 크기: 무엇이 중요한 정보인지 알려 줍니다.

• 정렬: 화면이 정돈되어 보이는지 결정합니다.

디자인을 옷차림에 비유하면 쉽습니다. 색상은 옷의 색 조합, 여백은 옷의 핏, 글자 크기는 강조하고 싶은 포인트, 정렬은 전체적인 자세입니다. 비싼 옷이 아니어도 색을 줄이고, 크기를 맞추고, 간격을 일정하게 하면 단정해 보입니다. 웹사이트도 같습니다.

AI 생성 이미지

CSS는 화면에 입히는 옷입니다

CSS는 웹페이지의 디자인을 담당하는 기술입니다. 웹의 기본을 이야기할 때 HTML은 내용, CSS는 디자인이라고 했습니다. 조금 더 쉽게 말하면 HTML이 "무엇을 보여 줄지" 정한다면, CSS는 "어떻게 보이게 할지" 정합니다.

예를 들어 다음 문장이 있다고 해 보겠습니다.

<h1>작은 브랜드를 위한 웹사이트 제작</h1>

이 문장은 제목입니다. 하지만 아직 어떤 색인지, 얼마나 큰지, 가운데에 둘지 왼쪽에 둘지는 정하지 않았습니다. 이때 디자인 지시를 붙이는 곳이 className입니다.

<h1 className='text-4xl font-bold text-center'>
  작은 브랜드를 위한 웹사이트 제작
</h1>

여기서 className은 "이 요소에 어떤 디자인을 적용할지 적는 칸"입니다. 옷에 붙은 세탁 라벨처럼, 브라우저에게 "이 제목은 크게, 굵게, 가운데 정렬로 보여 줘"라고 알려 줍니다.

React와 Next.js에서는 HTML의 class 대신 className을 사용합니다. 처음에는 낯설지만 의미는 단순합니다.

className='디자인 지시문을 적는 자리'

Tailwind CSS는 짧은 디자인 단어 모음입니다

이 책의 프로젝트처럼 Tailwind CSS를 선택했다면, className 안에 짧은 단어들을 적어 디자인을 바꿀 수 있습니다. Tailwind CSS는 CSS를 더 빨리 쓰기 위한 도구입니다. 긴 CSS 문장을 직접 작성하는 대신, 미리 정해진 짧은 표현을 조합합니다.

예를 들어 일반 CSS로는 이런 식으로 씁니다.

.title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

Tailwind CSS에서는 이렇게 씁니다.

<h1 className='text-4xl font-bold text-center'>제목</h1>

외워야 할 암호처럼 보일 수 있지만, 자주 쓰는 표현은 생각보다 많지 않습니다.

여기서 padding은 박스 안쪽 여백입니다. 선물 상자 안에서 물건과 상자 벽 사이의 공간이라고 생각하면 됩니다. margin은 박스 바깥 여백입니다. 선물 상자와 다른 상자 사이의 거리입니다.

실습: 첫 화면을 더 깔끔하게 바꾸기

이제 app/page.tsx를 열고 첫 화면을 조금 더 정돈해 보겠습니다. 아래 예시는 회사 소개나 개인 포트폴리오 첫 화면으로 쓸 수 있는 간단한 구조입니다.

import Link from 'next/link';

export default function Home() {
  return (
    <main className='min-h-screen bg-slate-50 px-6 py-16'>
      <section className='mx-auto max-w-4xl text-center'>
        <p className='mb-4 text-sm font-semibold text-blue-600'>
          NEXT.JS STARTER
        </p>

        <h1 className='mb-6 text-4xl font-bold tracking-tight text-slate-900'>
          작은 브랜드를 위한 깔끔한 웹사이트
        </h1>

        <p className='mx-auto mb-8 max-w-2xl text-lg leading-8 text-slate-600'>
          복잡한 기능보다 중요한 내용을 잘 보여 주는 사이트를 만듭니다.
          소개, 서비스, 문의 페이지를 차근차근 정리해 보세요.
        </p>

        <div className='flex justify-center gap-3'>
          <Link className='rounded-full bg-blue-600 px-6 py-3 text-sm font-bold text-white' href='/contact'>
            문의하기
          </Link>
          <Link className='rounded-full border border-slate-300 px-6 py-3 text-sm font-bold text-slate-700' href='/about'>
            더 알아보기
          </Link>
        </div>
      </section>
    </main>
  );
}

Link는 사이트 안의 다른 페이지로 이동할 때 사용하는 Next.js의 연결 도구입니다. 일반 링크처럼 href로 이동할 주소를 적고, className으로 버튼처럼 보이게 꾸밀 수 있습니다.

이 코드에서 중요한 것은 문법을 모두 외우는 것이 아닙니다. 무엇을 바꾸면 화면이 어떻게 달라지는지 감을 잡는 것입니다.

• bg-slate-50을 bg-white로 바꾸면 배경이 더 하얗게 보입니다.

• text-4xl을 text-5xl로 바꾸면 제목이 더 커집니다.

• text-blue-600을 text-green-600으로 바꾸면 강조 색이 초록색으로 바뀝니다.

• py-16을 py-24로 바꾸면 위아래 여백이 더 넓어집니다.

• max-w-4xl을 max-w-2xl로 바꾸면 내용 영역의 폭이 좁아집니다.

한 번에 많이 바꾸지 말고 하나씩 바꾸고 저장하세요. 브라우저에서 변화가 보이면 그 표현의 의미를 몸으로 익히게 됩니다.

flex는 요소를 줄 세우는 방법입니다

flex는 처음 보면 어려운 단어입니다. 하지만 식탁 위에 컵과 접시를 줄 세우는 일로 생각하면 쉽습니다. 요소를 가로로 놓을지, 가운데에 모을지, 사이를 얼마나 띄울지 정하는 배치 도구입니다.

<div className='flex justify-center gap-3'>
  <button>버튼 1</button>
  <button>버튼 2</button>
</div>

이 예시에서 각 표현은 이렇게 읽으면 됩니다.

• flex: 안에 있는 요소들을 정렬 가능한 상태로 만듭니다.

• justify-center: 가로 방향으로 가운데에 모읍니다.

• gap-3: 요소 사이의 간격을 줍니다.

버튼 두 개가 너무 붙어 있으면 답답해 보입니다. 이때 gap-3, gap-4, gap-6처럼 간격을 조정하면 됩니다. 초보 단계에서는 flex, justify-center, items-center, gap 정도만 알아도 많은 화면을 정리할 수 있습니다.

모바일과 PC 화면은 다르게 보여야 합니다

반응형 디자인은 화면 크기에 따라 배치를 바꾸는 방식입니다. 전문 용어처럼 들리지만, 결국 "휴대폰에서는 좁게, 컴퓨터에서는 넓게 보여 주는 것"입니다.

Tailwind CSS에서는 md: 같은 접두어를 붙여 화면 크기별 디자인을 지정합니다.

<h1 className='text-3xl md:text-5xl'>
  화면 크기에 따라 달라지는 제목
</h1>

이 코드는 이렇게 읽습니다.

• 기본값 text-3xl: 모바일처럼 작은 화면에서 제목 크기

• md:text-5xl: 중간 크기 이상 화면에서 제목 크기

카드 목록도 마찬가지입니다.

<div className='grid gap-6 md:grid-cols-3'>
  <div className='rounded-xl bg-white p-6 shadow'>서비스 1</div>
  <div className='rounded-xl bg-white p-6 shadow'>서비스 2</div>
  <div className='rounded-xl bg-white p-6 shadow'>서비스 3</div>
</div>

여기서 grid는 바둑판처럼 칸을 나누는 배치 방식입니다. md:grid-cols-3은 "태블릿이나 PC처럼 넓은 화면에서는 3칸으로 보여 줘"라는 뜻입니다. 모바일에서는 기본적으로 한 줄에 하나씩 쌓이고, 넓은 화면에서는 세 칸으로 나뉩니다.

디자인을 망치지 않는 다섯 가지 규칙

디자인 감각이 없어도 다음 규칙만 지키면 화면이 훨씬 안정적으로 보입니다.

첫째, 색상은 적게 씁니다. 처음에는 배경색 1개, 본문 글자색 1개, 강조색 1개만 정하세요. 예를 들어 white, slate, blue 조합만으로도 충분합니다.

둘째, 여백 숫자를 통일합니다. 어떤 곳은 p-5, 어떤 곳은 p-7, 또 다른 곳은 p-9처럼 제각각 쓰면 화면이 어수선해집니다. 처음에는 p-4, p-6, p-8 정도만 사용하세요.

셋째, 버튼 모양을 통일합니다. 어떤 버튼은 네모, 어떤 버튼은 동그라미, 어떤 버튼은 그림자가 있으면 사이트가 조각나 보입니다. 주요 버튼은 같은 배경색, 같은 둥글기, 같은 글자 굵기를 사용하세요.

<Link className='rounded-full bg-blue-600 px-6 py-3 text-sm font-bold text-white' href='/contact'>
  문의하기
</Link>

넷째, 글자 크기에 계층을 둡니다. 큰 제목, 중간 제목, 본문을 구분해야 읽기 쉽습니다. 예를 들어 큰 제목은 text-4xl, 중간 제목은 text-2xl, 본문은 text-base 또는 text-lg로 시작해 보세요.

다섯째, 가운데 정렬을 남용하지 않습니다. 첫 화면의 큰 소개 문구는 가운데 정렬이 어울립니다. 하지만 긴 설명글, 목록, 카드 안의 문장은 왼쪽 정렬이 더 읽기 쉽습니다.

컴포넌트에 스타일을 입히면 수정이 쉬워집니다

지난 장에서 컴포넌트는 반복되는 화면 조각이라고 했습니다. 디자인에서도 컴포넌트는 큰 도움이 됩니다. 예를 들어 여러 페이지에서 같은 버튼을 쓴다면 매번 같은 className을 복사하지 말고 Button 컴포넌트 안에 넣을 수 있습니다.

import Link from 'next/link';
import type { ReactNode } from 'react';

type ButtonProps = {
  href: string;
  children: ReactNode;
};

export default function Button({ href, children }: ButtonProps) {
  return (
    <Link className='rounded-full bg-blue-600 px-6 py-3 text-sm font-bold text-white' href={href}>
      {children}
    </Link>
  );
}

처음 보는 코드가 조금 늘어났지만, 핵심은 단순합니다. 이 버튼 컴포넌트는 href로 이동할 주소를 받고, children 자리에는 버튼 안에 보일 문구를 받습니다. 페이지에서는 다음처럼 사용할 수 있습니다.

<Button href='/contact'>문의하기</Button>

이렇게 해 두면 버튼 색을 바꾸고 싶을 때 한 파일만 수정하면 됩니다. 파란색 버튼을 초록색으로 바꾸고 싶다면 bg-blue-600을 bg-green-600으로 바꾸면 됩니다. 사이트 전체의 버튼이 함께 바뀝니다.

직접 할 수 있는 일은 색상, 여백, 글자 크기, 버튼 모양처럼 화면에 바로 보이는 수정입니다. 전문가에게 맡기면 좋은 일은 브랜드 전체 디자인 시스템, 복잡한 애니메이션, 접근성 검토, 다양한 기기에서의 세밀한 품질 확인입니다.

자주 나는 실수와 확인 순서

디자인을 바꿨는데 화면이 그대로라면 먼저 저장했는지 확인하세요. VS Code에서 파일 이름 옆에 점이 남아 있으면 아직 저장되지 않은 상태일 수 있습니다.

그다음 className 철자를 확인합니다. classname이나 class로 쓰면 의도대로 적용되지 않을 수 있습니다. React와 Next.js에서는 className을 사용합니다.

Tailwind 표현도 한 글자 차이로 적용되지 않을 수 있습니다. 예를 들어 text-blue600이 아니라 text-blue-600입니다. 색상 이름, 하이픈, 숫자 순서를 확인하세요.

또 한 가지는 Tailwind CSS가 설정된 프로젝트인지 확인하는 것입니다. 이 책의 흐름대로 만든 프로젝트라면 보통 이미 설정되어 있습니다. 하지만 다른 사람이 만든 프로젝트를 이어받았다면 Tailwind CSS가 없어서 bg-blue-600, p-6 같은 표현이 아무 변화도 만들지 않을 수 있습니다.

마지막으로 개발 서버가 켜져 있는지 확인합니다. 터미널에 npm run dev가 실행 중이어야 하고, 브라우저 주소는 보통 http://localhost:3000이어야 합니다.

검색이 필요할 때는 이런 키워드로 찾아보면 좋습니다.

• Tailwind CSS background color

• Tailwind CSS padding margin

• Tailwind CSS flex center

• Tailwind CSS responsive md

• Next.js className not working

이번 장에서 기억할 것

디자인을 바꾸는 첫걸음은 대단한 감각이 아니라 작은 규칙입니다. 색상은 줄이고, 여백은 일정하게 두고, 글자 크기로 중요도를 나누고, 버튼 스타일을 통일하세요.

className은 디자인 지시문을 적는 자리입니다. Tailwind CSS의 bg, text, p, m, flex 같은 표현은 처음에는 낯설지만, 화면을 보며 하나씩 바꿔 보면 빠르게 익숙해집니다.

이제 우리는 페이지를 만들고, 반복되는 부분을 컴포넌트로 나누고, 그 컴포넌트에 기본적인 디자인까지 입힐 수 있게 되었습니다. 다음에는 사이트의 인상을 더 완성도 있게 만드는 이미지, 아이콘, 폰트, 검색엔진 설정을 다뤄 보겠습니다.