2026 초보자 자바스크립트 포트폴리오 사이트 만드는 법

• 목록
• 답변
• 글쓰기
• 옵션
  • 수정
  • 삭제

코딩 공부는 했지만 무엇을 보여줘야 할지 막막한가요? 초보 개발자에게 필요한 것은 화려한 효과가 아니라, 방문자가 짧은 시간 안에 기술과 프로젝트를 이해할 수 있는 자바스크립트 포트폴리오 사이트입니다. 이 글에서는 HTML·CSS·JavaScript의 역할부터 프로젝트 구성, 코드 작성, 공개 전 점검 방법까지 차근차근 안내합니다.

포트폴리오 사이트의 목적부터 정하기

작품 모음이 아니라 역량을 설명하는 페이지

포트폴리오는 단순히 결과물을 모아 놓은 갤러리가 아닙니다. 일반적인 개념은 지식백과의 Portfolio 정의에서도 확인할 수 있지만, 개발자 포트폴리오에서는 특히 어떤 문제를 발견했고 어떤 기술로 해결했는지가 중요합니다. 완성 화면만 올리면 방문자는 여러분이 직접 구현한 범위를 판단하기 어렵습니다.

먼저 사이트를 볼 사람을 한 명 떠올려 보세요. 신입 개발자를 찾는 채용 담당자라면 기술 스택과 역할을 빠르게 확인하고 싶어 합니다. 협업자를 구하는 개발자라면 코드 구조, Git 저장소, 문제 해결 과정을 궁금해합니다. 이 대상에 따라 첫 화면의 문장과 프로젝트 설명 순서가 달라집니다.

초보자가 준비할 최소 콘텐츠

처음부터 블로그, 다국어, 관리자 페이지까지 만들 필요는 없습니다. 아래 다섯 요소만 제대로 갖춰도 개인 개발자 사이트의 기본 역할을 수행합니다. 프로젝트가 하나뿐이라면 숫자를 부풀리지 말고 구현 과정과 개선 기록을 더 자세히 보여주는 편이 좋습니다.

• 소개: 이름 또는 활동명, 관심 개발 분야, 한 문장 소개
• 기술: 실제로 사용해 본 언어와 도구, 숙련 수준의 근거
• 프로젝트: 문제, 담당 기능, 사용 기술, 결과와 배운 점
• 연결 정보: GitHub, 이메일, 이력서 또는 전문 네트워크
• 행동 버튼: 프로젝트 보기, 코드 확인, 연락하기 중 하나

팁: 첫 화면에서 “무엇을 만드는 개발자인지”를 10초 안에 알 수 없다면 디자인보다 소개 문장부터 고쳐 보세요.

HTML·CSS·JavaScript 역할 이해하기

세 기술을 집 짓기에 비유하면

HTML은 방과 문을 나누는 구조, CSS는 색상과 배치를 담당하는 인테리어, JavaScript는 버튼이나 조명처럼 사용자 행동에 반응하는 장치입니다. 초보자는 세 기술을 한꺼번에 복잡하게 사용하기보다, HTML만으로 모든 정보를 읽을 수 있게 만든 뒤 CSS와 JavaScript를 순서대로 추가하는 것이 안전합니다.

예를 들어 프로젝트 카드는 HTML의 section, article, heading, link 요소로 구성합니다. CSS로 카드 간격과 반응형 열을 만들고, JavaScript로 기술별 필터 기능을 붙입니다. JavaScript가 실행되지 않더라도 프로젝트 목록이 보이게 만들면 접근성과 검색 노출 측면에서도 유리합니다.

정적 사이트와 프레임워크 비교

2026년에도 첫 포트폴리오라면 별도 프레임워크 없이 시작해도 충분합니다. React나 Vue는 반복되는 화면과 상태가 많을 때 편리하지만, 소개와 프로젝트 몇 개로 구성된 사이트에는 초기 설정과 패키지 관리가 오히려 부담이 될 수 있습니다. 다음 비교표를 보고 현재 수준에 맞게 선택하세요.

• 프로젝트가 3개 이하라면 기본 JavaScript로 시작합니다.
• 지원 직무가 React 개발자라면 React 선택 이유를 설명합니다.
• 도구 이름보다 왜 그 도구가 필요했는지를 기록합니다.

프로젝트 폴더와 화면을 단계별로 만들기

유지하기 쉬운 최소 폴더 구조

작업 폴더에는 index.html, style.css, script.js를 만들고 assets 폴더에 아이콘과 문서를 보관합니다. 파일 이름에는 공백과 한글을 피하고 영문 소문자와 하이픈을 사용하세요. 대소문자를 다르게 적어도 로컬 컴퓨터에서는 열릴 수 있지만, Linux 기반 서버에서는 파일을 찾지 못할 수 있습니다.

페이지 순서는 소개, 기술, 프로젝트, 연락처처럼 방문자의 질문 흐름에 맞추는 것이 좋습니다. 각 영역에는 고유한 id를 지정해 메뉴 링크가 정확히 이동하도록 합니다. HTML의 제목 단계도 h2 다음에 h3가 오도록 유지하면 화면 구조를 사람과 검색 엔진 모두 쉽게 이해할 수 있습니다.

1. index.html에 소개와 프로젝트 내용을 먼저 작성합니다.
2. style.css에서 글자 크기, 최대 폭, 여백을 지정합니다.
3. 모바일 화면을 기준으로 한 열 레이아웃을 완성합니다.
4. 넓은 화면에서 프로젝트 카드를 두세 열로 확장합니다.
5. 마지막에 script.js로 메뉴와 필터 기능을 추가합니다.

초보자에게 유용한 JavaScript 기능

첫 기능으로는 프로젝트 필터가 적당합니다. 각 카드에 data-tech 속성으로 javascript, php, linux 같은 값을 넣고, 버튼을 클릭하면 일치하지 않는 카드를 숨깁니다. 기능을 구현한 뒤에는 “전체” 버튼을 반드시 제공하고, 키보드의 Tab과 Enter만으로도 조작 가능한지 확인하세요.

두 번째로 추천하는 기능은 현재 연도 자동 표시와 모바일 메뉴입니다. 반면 의미 없이 움직이는 배경, 자동 재생 음악, 과도한 커서 효과는 콘텐츠를 읽기 어렵게 하고 저사양 기기에서 성능을 떨어뜨릴 수 있습니다. 효과의 개수보다 반응 속도와 사용 이유가 더 중요한 평가 요소입니다.

전문가 조언: JavaScript 기능을 추가할 때마다 “이 기능이 방문자의 어떤 행동을 더 쉽게 만드는가?”라고 질문해 보세요.

프로젝트 설명을 설득력 있게 작성하는 법

문제·행동·결과의 세 단계

프로젝트 제목 아래에 기술 이름만 나열하지 마세요. “일정 관리 앱”이라면 사용자가 겪는 불편, 여러분이 맡은 구현, 개선된 결과를 순서대로 적습니다. 포트폴리오 용어 설명처럼 포트폴리오는 선별된 결과를 보여주는 성격이 있으므로, 모든 연습물을 동일한 비중으로 넣기보다 대표 작업을 골라 깊이 있게 설명하는 편이 효과적입니다.

예를 들어 “할 일 앱을 만들었습니다”보다 “새로고침 후 데이터가 사라지는 문제를 localStorage로 해결하고, 필터 상태를 유지하도록 로직을 분리했습니다”가 훨씬 구체적입니다. 측정 가능한 수치가 있다면 초기 로딩 시간, 번들 크기, 테스트 수, 사용자 피드백 건수처럼 검증 가능한 범위에서 제시하세요. 근거 없는 사용률이나 성능 향상 수치는 신뢰를 떨어뜨립니다.

• 문제: 누구에게 어떤 불편이 있었는가?
• 역할: 팀 또는 개인 프로젝트에서 직접 맡은 범위는 무엇인가?
• 선택: 해당 기술과 구조를 선택한 이유는 무엇인가?
• 해결: 가장 어려웠던 오류와 해결 과정은 무엇인가?
• 결과: 작동 화면, 저장소, 배운 점과 다음 개선 항목은 무엇인가?

링크와 README 연결하기

각 프로젝트 카드에는 실행 페이지와 소스 코드 링크를 구분해 배치합니다. 저장소 README에는 설치 방법, 실행 명령, 환경 변수 예시, 주요 기능, 폴더 구조를 적어야 합니다. 비밀 키나 실제 비밀번호는 절대 저장소에 올리지 말고, 필요한 변수 이름만 .env.example 파일로 안내하세요.

디자인 작업이나 글도 함께 보여주고 싶다면 개발 프로젝트와 별도의 묶음으로 나누는 것이 좋습니다. 포트폴리오 관련 개념을 참고하되, 자신의 사이트에서는 지원 분야와 직접 연결되는 작업을 앞에 배치하세요. 다양한 재능을 보여주더라도 핵심 개발 역량이 뒤로 밀리지 않아야 합니다.

공개 전 점검표와 자주 묻는 질문

모바일·성능·신뢰도 체크

사이트를 공개하기 전에는 본인 컴퓨터에서 보이는지만 확인해서는 안 됩니다. 브라우저 창을 좁혀 320px 안팎의 화면을 살펴보고, 실제 스마트폰에서도 메뉴와 버튼을 눌러 보세요. 긴 프로젝트 제목이 카드 밖으로 튀어나오지 않는지, 글자와 배경의 대비가 충분한지, 링크의 클릭 영역이 너무 작지 않은지도 확인합니다.

도메인은 보통 연 단위로 비용을 내며, 확장자와 등록 업체에 따라 가격 차이가 큽니다. 정적 포트폴리오는 무료 호스팅 범위로도 시작할 수 있지만 저장 공간, 트래픽, 빌드 시간, 사용자 지정 도메인 지원 조건은 서비스마다 바뀔 수 있으므로 2026년 현재 공식 요금표를 직접 확인해야 합니다. 무료 서비스라도 자동 갱신, 프로젝트 공개 범위, 휴면 정책을 함께 살펴보세요.

• 모든 메뉴와 외부 링크가 정상적으로 열리는지 확인합니다.
• 404 페이지와 잘못된 대소문자 파일명을 검사합니다.
• 이메일 주소, GitHub 주소, 이력서 버전을 다시 확인합니다.
• 페이지 제목과 메타 설명을 페이지 내용에 맞게 작성합니다.
• 휴대전화와 데스크톱에서 키보드 탐색을 시험합니다.
• 사용하지 않는 라이브러리와 큰 동영상 파일을 제거합니다.

초보자가 자주 묻는 질문

Q. 프로젝트가 하나뿐이어도 공개해도 되나요?
가능합니다. 하나의 프로젝트에 기획 이유, 기능별 구현, 오류 해결, 개선 계획을 충실히 적으면 단순한 연습물 다섯 개보다 더 많은 판단 근거를 제공합니다. 작은 버전부터 공개하고 변경 기록을 꾸준히 남겨 보세요.

Q. 디자인 감각이 부족하면 템플릿을 써도 되나요?
사용할 수 있지만 라이선스와 출처 조건을 확인해야 합니다. 색상과 문구만 바꾸는 데 그치지 말고 HTML 구조, 반응형 처리, 접근성 문제를 직접 개선한 내용을 기록하세요. 템플릿 제작자의 작업을 자신의 디자인처럼 표현해서는 안 됩니다.

Q. 기술 숙련도를 별점이나 퍼센트로 표시해야 하나요?
근거가 모호하므로 권장하지 않습니다. “JavaScript 80%” 대신 구현한 기능, 사용 기간, 해결한 문제를 연결하면 방문자가 수준을 스스로 판단할 수 있습니다. 기술 목록은 실제 프로젝트에서 확인 가능한 항목으로 제한하세요.

Q. 공개 후에는 무엇을 업데이트해야 하나요?
깨진 링크와 의존성 경고를 주기적으로 확인하고, 프로젝트에 새 기능을 추가했다면 설명과 화면도 함께 갱신합니다. 연락처와 이력서 날짜도 분기마다 점검하세요. 작게 만들고 실제로 공개한 뒤 개선 기록을 쌓는 과정 자체가 초보 개발자의 좋은 포트폴리오가 됩니다.