이력서에 링크 하나 넣어둘 포트폴리오 페이지가 필요할 때, 게시판이나 회원 기능까지 갖춘 무거운 홈페이지는 굳이 필요 없는 경우가 많습니다. cmshom.com 무료 웹디자인 에디터로 소개와 작업물 목록 정도만 담은 가벼운 페이지를 만들어본 과정을 정리했습니다.
맨 위에는 이름과 간단한 소개, 그 아래에 작업물을 모아 보여줄 영역, 마지막에 연락처를 두는 순서로 섹션을 나눠 배치합니다. 소개 문구는 너무 길지 않게, 하는 일과 관심 분야 정도만 담아도 충분합니다. 프로필 사진이나 대표 작업물 이미지를 맨 위에 함께 올려두면 첫인상을 잡는 데 도움이 됩니다.
작업물이 여러 개라면 카드 형태로 나란히 놓고 그리드로 정렬하는 편이 보기 편합니다. 다운받은 CSS를 보면 이런 구조로 짜여 있습니다.
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}PC에서는 3칸으로 나란히 보이던 작업물 카드가 화면이 좁아지면 한 줄씩 세로로 쌓이도록 이미 짜여 있어서, 모바일로 봐도 어색하지 않습니다. 카드 크기를 비슷하게 맞추고 정렬·분산 기능으로 간격을 일정하게 잡아두면 전체적으로 더 정돈되어 보입니다.
작업물이 많아질수록 캔버스가 복잡해지는데, 레이어 트리를 열어두면 지금 몇 개의 섹션과 카드가 있는지 목록으로 한눈에 확인하고 순서도 바로 바꿀 수 있습니다.
카드 순서나 크기를 이것저것 바꿔보고 싶을 때는 undo·redo로 부담 없이 시도해볼 수 있습니다. 정렬·분산 기능을 함께 쓰면 카드 사이 간격을 일정하게 맞추는 것도 어렵지 않습니다.
다 만들고 나면 HTML·CSS·JS를 ZIP으로 받습니다. 클래스명이 알아보기 쉽게 붙어 있어서, 나중에 작업물을 하나 추가하고 싶을 때 코드를 열어 비슷한 카드 하나를 복사해서 내용만 바꾸는 정도는 직접 해볼 수 있습니다.
포트폴리오를 넘어 자기소개, 이력, 연락처까지 여러 페이지로 늘리고 싶어지면 AI 홈페이지 3분 개설(/ai-start)도 참고해보세요.