나만의 포트폴리오 웹사이트 만들기 (2) - 헤더 구조와 Tailwind 정복기

조준형·2025년 4월 18일

포트폴리오

목록 보기

2/9

지난 글에서는 프로젝트를 어떤 방향으로 구성할지, 그리고 기술 스택(Vite + React + TailwindCSS)을 어떻게 세팅했는지 정리했다. 이번 글에서는 본격적으로 첫 번째 섹션인 헤더(Header) 구성 과정을 다뤄본다.

처음부터 쉬울 줄 알았던 헤더 정렬이 생각보다 만만치 않았고, Tailwind 자동완성 문제까지 겹치면서 삽질의 시작이었다...

처음에는 공식문서에서 보란 듯이 npx tailwindcss init -p를 입력했는데 아무 반응이 없었다. 알고 보니 Tailwind CLI가 따로 분리된 이후에는 @tailwindcss/cli를 써야 제대로 명령어가 동작한다는 걸 나중에야 알게 됐다.

하지만 가장 확실하게 작동한 방법은 Tailwind v3 버전으로 다운그레이드해서 설치하는 것이었다.

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

이후 src/index.css에는 필수로 아래 세 줄이 들어가야 Tailwind가 작동한다는 것도 확인:

@tailwind base;
@tailwind components;
@tailwind utilities;

그리고 main.tsx에서 이 index.css를 import 해주지 않으면 아무것도 안 보인다.

처음엔 단순히 로고 + 메뉴만 넣었지만, 가운데 정렬이 안 돼서 꽤 헤맸다. 이유는 Tailwind에서 justify-center를 쓰려면 그 부모가 flex여야 한다는 걸 잊고 있었기 때문.

<div className="flex-1 flex justify-center">
  <NavMenu />
</div>

이 코드를 쓰기 전엔 메뉴가 오른쪽에 붙거나 들쭉날쭉해서 딱 보기 싫었다. 결국 Header 전체를 3등분 구조로 만들고, 가운데 영역에만 justify-center를 줘서 해결했다.

VSCode에서 자동완성이 안 되는 것도 꽤 스트레스였다. 알고 보니 .vscode/settings.json에 아래 설정을 넣어야 IntelliSense가 .tsx 파일 안에서도 작동한다.

{
  "tailwindCSS.includeLanguages": {
    "typescriptreact": "html"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

이 설정 덕분에 text-, bg-, hover: 이런 것들이 제대로 뜨기 시작했다.

지금까지는 헤더 구성과 스타일 정리에 집중했다. 구조가 안정되니 이제부터는 본격적으로 이력서 요소들을 채워넣을 수 있을 것 같다.

다음 포스트에서는 메뉴 클릭 시 부드럽게 해당 섹션으로 스크롤되는 기능을 구현해보려고 한다.

코린이