[포트폴리오 기획] 1. 사이트 맵 및 정보 구조 (IA) 설계 - 와이어프레임 설정

와이어프레임은 각 페이지의 레이아웃과 정보 배치를 시각적으로 표현하는 작업이야.

아래에 네 포트폴리오 웹사이트의 주요 페이지들에 대한 와이어프레임 구조를 텍스트로 먼저 설명할게.

 

각 페이지마다 핵심 콘텐츠가 어떻게 배치될지, 그리고 사용자 흐름에 맞춰 정보를 제공하는 구조를 단계적으로 나눠보자.

 

1. Home (홈 페이지)

 

구성 요소:

 

• 헤더: 상단에 네 이름과 로고, 네비게이션 메뉴 (About, Projects, Blog, Contact).

• 영웅 섹션 (Hero Section): 큰 배경 이미지 또는 네 대표 프로젝트의 이미지, 짧은 한 줄 소개(예: “Frontend Developer with 3 Years of Experience”).

• 대표 프로젝트 하이라이트: 프로젝트 썸네일 2~3개, 간단한 설명과 ‘자세히 보기’ 버튼. 좌우로 슬라이드 가능한 방식도 고려.

• 최신 블로그 글: 블로그 글 제목, 썸네일 이미지, 짧은 요약, ‘더 보기’ 링크.

• 푸터: 간단한 연락처 정보, 소셜 미디어 링크.

 

2. About (자기소개 / 이력서 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 소개 섹션: 네 경력, 기술 스택을 요약한 텍스트 블록. 네 이미지를 배치해도 좋고, 간단한 인사말도 추가 가능.

• 경력: 타임라인 형식으로 각 경력과 프로젝트를 정리 (회사명, 역할, 기간).

• 기술 스택: 아이콘 또는 텍스트로 네가 사용 가능한 기술 나열 (HTML, CSS, JavaScript, React 등).

• 이력서 다운로드 버튼: 다운로드 가능한 PDF 파일 링크.

 

3. Projects (프로젝트 목록 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 프로젝트 리스트 섹션:

• 프로젝트 썸네일: 이미지와 함께 제목, 간단한 설명(프로젝트 목적, 사용 기술).

• 필터 옵션: 기술 스택(React, PHP 등) 또는 카테고리(개발, 디자인 등)로 필터링 가능하게.

• 프로젝트 상세 링크: 각 프로젝트마다 ‘상세보기’ 버튼을 통해 프로젝트 상세 페이지로 이동.

 

4. Project Details (프로젝트 상세 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 프로젝트 개요: 프로젝트 배경 이미지 또는 대표 이미지, 프로젝트 이름.

• 프로젝트 설명 섹션: 프로젝트 개요(목표, 기간, 참여 인원), 사용 기술, 네가 기여한 역할.

• 도전 과제 및 해결 방법: 프로젝트에서 직면한 문제와 이를 해결한 과정 설명.

• GitHub 또는 배포 링크: 프로젝트 소스 코드 또는 라이브 링크.

• 이미지 갤러리: 프로젝트의 주요 화면을 보여주는 스크린샷.

 

5. Blog (블로그 메인 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 블로그 글 목록:

• 각 글에 대한 썸네일 이미지, 제목, 작성 날짜, 간단한 요약을 표시.

• 블로그 글은 최신 순으로 배치, 카테고리별 또는 태그별 필터링 옵션 제공.

• ‘더 보기’ 버튼: 글 목록 하단에 더 많은 글을 불러올 수 있는 버튼.

 

6. Blog Post (블로그 글 상세 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 글 본문: 제목, 작성 날짜, 본문 내용.

• 연관 글: 비슷한 주제의 다른 글을 추천.

• 댓글 섹션 (선택사항): 독자가 글에 대해 의견을 남길 수 있는 공간.

 

7. Contact (연락처 페이지)

 

구성 요소:

 

• 헤더: 상단 네비게이션 동일하게 유지.

• 연락처 정보: 이메일, LinkedIn, GitHub 링크 등의 정보.

• 연락 폼: 이름, 이메일, 메시지를 입력할 수 있는 간단한 폼.

• 소셜 미디어 링크: LinkedIn, GitHub 등으로 바로 이동 가능한 링크들.

 

시각적인 와이어프레임 제작

 

위 설명을 기반으로 와이어프레임을 시각적으로 제작해줄 수 있어. HTML, CSS, 그리고 도구들을 사용하여 와이어프레임을 시각화하거나 피그마(Figma), 어도비 XD 같은 툴을 활용해 디자인할 수 있어.

 

만약 네가 원하는 특정 스타일이나 레이아웃이 있다면 추가적으로 알려주면 그에 맞춰 더 디테일하게 수정할 수 있어!

 

Q1: 프로젝트 목록 페이지에서 필터링 기능을 추가하면 사용자 경험이 어떻게 향상될 수 있을까?

Q2: 와이어프레임에서 시각적 요소보다 우선적으로 고려해야 할 정보는 무엇일까?

Q3: 각 페이지 간의 이동을 더 직관적으로 만들기 위한 디자인 요소는 어떤 게 있을까?