안녕하세요! 지난 4부에서 외부 데이터를 불러와 내 웹사이트를 채우는 ‘마법’을 경험해 보셨나요? 프로젝트 리스트가 꽉 차니 이제 제법 그럴싸한 사이트가 되었을 거예요.
하지만 기술적인 역량만큼 중요한 것이 있습니다. 바로 이 사이트를 만든 ‘여러분’이 어떤 사람인지 보여주는 것이죠. 오늘은 우리 웹사이트의 정체성을 완성해 줄 ‘About (소개)’ 페이지를 만들어 보려 합니다. 입문 개발자분들에게는 이 페이지가 온라인상의 ‘첫인상’이자 ‘이력서’가 될 수 있으니, 함께 정성껏 꾸며봅시다!
1. About 페이지 생성 및 구조 잡기
Next.js의 약속대로 app 폴더 아래에 about 폴더를 만들고 page.tsx 파일을 생성해 주세요.
2. 나를 브랜딩하는 레이아웃
가독성을 높이면서도 깔끔한 느낌을 줄 수 있도록 Tailwind CSS로 옷을 입혀보겠습니다. 이번에는 데이터를 불러오는 대신, 여러분의 이야기를 직접 담아볼게요.
[app/about/page.tsx 작성하기]
export default function AboutPage() {
return (
<div className="py-16 max-w-3xl mx-auto px-4">
{/* 프로필 섹션: 첫인상이 결정되는 곳입니다 */}
<section className="text-center mb-16">
<div className="w-32 h-32 bg-gradient-to-tr from-blue-500 to-indigo-400 rounded-full mx-auto mb-6 flex items-center justify-center text-white font-bold text-3xl shadow-lg">
{/* 실제 본인의 사진이나 미모지를 넣으면 더 좋습니다! */}
ME
</div>
<h2 className="text-4xl font-bold mb-4 text-gray-800">안녕하세요, jxlove 입니다</h2>
<p className="text-lg text-gray-600 leading-relaxed">
어제보다 더 나은 오늘의 코드를 고민하며, <br />
복잡한 문제를 단순하고 명확하게 해결하는 과정에서 큰 보람을 느낍니다.
</p>
</section>
{/* 스타일을 응용해봐요 */}
<section className="mb-16">
<h3 className="text-2xl font-bold mb-6 border-l-4 border-blue-500 pl-4 text-gray-800">My Tech Stack</h3>
<div className="flex flex-wrap gap-3">
{["Next.js", "React", "TypeScript", "Tailwind CSS", "AWS"].map((tech) => (
<span key={tech} className="px-4 py-2 bg-blue-50 text-blue-700 rounded-lg text-sm font-semibold border border-blue-100">
{tech}
</span>
))}
</div>
</section>
{/* 가치관 섹션: 입문 개발자의 열정을 보여주는 공간 */}
<section className="bg-gray-50 p-10 rounded-3xl border border-gray-100">
<h3 className="text-2xl font-bold mb-6 text-gray-800">저는 이런 개발자가 되고 싶어요</h3>
<ul className="space-y-5 text-gray-700">
<li className="flex gap-3">
<span className="text-blue-500 font-bold">●</span>
동료들이 신뢰하고 협업하고 싶어 하는 개발자
</li>
<li className="flex gap-3">
<span className="text-blue-500 font-bold">●</span>
기술의 원리를 깊이 있게 탐구하고 공유하는 개발자
</li>
<li className="flex gap-3">
<span className="text-blue-500 font-bold">●</span>
사용자의 불편함을 예민하게 포착해 개선하는 개발자
</li>
</ul>
</section>
</div>
);
}3. 초급 개발자를 위한 ‘셀프 브랜딩’ 팁
- 사진 활용: ‘ME’라고 적힌 부분에 실제 본인의 프로필 이미지를 넣어보세요. 훨씬 더 신뢰감을 줍니다.
- 여백 활용:
py-16처럼 섹션 사이의 여백을 충분히 주면 글이 훨씬 더 잘 읽힙니다. 전문적인 느낌은 바로 이 ‘여백’에서 나옵니다. - 링크 연결: 2부에서 만든 헤더의 ‘소개’ 버튼 링크가
<Link href="/about">으로 잘 연결되어 있는지 마지막으로 확인해 주세요!
마치며
오늘 우리는 웹사이트에 ‘온기’를 불어넣는 소개 페이지를 완성했습니다. 기술적인 프로젝트 목록도 중요하지만, 그 코드를 작성한 사람의 이야기가 담길 때 비로소 가치 있는 웹사이트가 됩니다.
이제 모든 페이지의 구성이 끝났습니다! 정말 긴 여정이었죠?
다음 포스팅인 대망의 [5부: Vercel 배포 및 최적화]에서는 이 모든 결과물을 실제 도메인으로 배포하고, 검색 엔진에 잘 걸리도록 다듬어 보겠습니다. 드디어 여러분의 웹사이트가 세상 밖으로 나갈 시간입니다!
감사합니다.