[Vue.js] 나를 소개하는 홈페이지 만들기 (5) - 프로토타입

Next14 + Netlify 로 새로 작성했습니다.

https://whothatsme.tistory.com/42

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

 

---

 

홈페이지를 만들기 위해 간략하게나마 전체적인 그림을 머리 속에 정리하고 진행하려한다.

개인 프로젝트로 진행되지만 컴포넌트를 나누거나 틀을 나눌 때도 머리속에 그려지기 쉽게 나눌 수 있다.

 

프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의 제품의 원형으로 개발 검증과 양산 검증을 거쳐야 시제품이 될 수 있다. 프로토타입은 '정보시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기모델'이다.

 

포트폴리오를 위한 예시들은 핀터레스트(Pinterest) 에서 쉽게 찾아볼 수 있다. 포트폴리오 예시나 웹 디자인 등과 같이 검색을 하면 많은 예시들을 볼 수 있다.

https://www.pinterest.co.kr/yyc0902/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%98%88%EC%8B%9C/

 

다음은 임의로 만든 페이퍼 프로토타입이다.

Navbar

네비게이션 바를 이용해서 페이지내 이동을 쉽게 만들어 보려한다. 싱글페이지이기 때문에 다른 페이지 이동은 필요없으므로, 앵커(anchor, #)을 이용해서 원하는 컴포넌트에 도달할 수 있도록 한다.

Home

1~3줄 정도의 나를 소개하면서 전반적인 홈페이지의 느낌을 담는다. 백그라운드 이미지와 글귀로 내가 추구하는 방향성 및 간단하게 나를 소개하면 좋을 것 같다.

About me

이름, 생년월일, 거주지, 학교, 취미 등과 프로필 사진을 담는다. Home과 비교해서 나를 조금 더 자세하게 소개할 수 있도록 한다. 그 외에 앞으로의 비전이나, 10년 후의 나를 생각하면서 적는 것도 괜찮을 것 같다.

Skills

내가 공부했던 기술들도 중요하지만 확실하게 내가 알고 사용하는 기술을 중심적으로 작성한다. 또는 숙련도에 따라 상-중-하로 나누어서 한 눈에 보이도록 하는 것이 중요해보인다.

Project

여지껏 진행했던 프로젝트들을 소개한다. 슬라이드 형태인 캐로셀(Carousel)로 만들것이며, 각 프로젝트별 자세히보기 등의 버튼을 이용해서 모달(Modal)형식으로 소개한다.

Footer

Github, Notion, Tistory 등 이 외에 나를 소개하는 페이지를 추가하여 담고, 하고 싶은 말등을 더 담을 예정이다.

 

막상 기술적으로 크게 어려울 건 없는 작업이다.