[웹 포트폴리오 만들기] 1편 - 디자인 구상하기

2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기

2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기

2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기

2024.05.21 - [PROJECT] - [웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기

2024.05.31 - [PROJECT] - [웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성

내가 왜..벌써...졸업? 이제 백수라고?

 

 

대학교를 졸업하고.. 취업 준비를 하게 되었다.
코로나로 거의 3년 날려먹으니까 뭔가 대학 생활 한 거 같지도 않는데 말입니다.....

일단 이력서와 포트폴리오부터 만들어야겠다고 생각했고.. 정보를 찾기 시작했다.

인터넷에서 좀 알아본 결과 프론트엔드 취업 준비에 포트폴리오는 거의 필수..!
난 포트폴리오를 웹으로 만들기로 결정했다.
이유는 그냥... NEXTJS 강의 듣고 나서 아직 따로 써본 적이 없어 연습용으로 적당할 거 같았고 포트폴리오 자체가 프로젝트가 된다는 게 좋은 거 같아서 그렇게 결정했다.

 

---

 

 

제일 먼저 다른 사람들의 포트폴리오를 많이 보면서 참고할 만한 부분이 있는지 찾았다.
일단 외국인이든 한국인이든 대충 둘러본 결과 두 부류로 나뉘는 것 같았다.

 

첫 번째는 자신의 스킬을 뽐내기 위해, 이목을 끌기 위해 최대한 화려하고 복잡하고 다양한 스킬을 쓴 사이트.
두 번짼 심플하고 깔끔하게 만든 사이트.

 

나도 처음엔 전자처럼 만들어보려고 생각했지만 직접 다른 사람들의 사이트를 보니 전자 형식의 사이트는 가독성도 안 좋고 무거워서 로딩이 길고 버벅거리는 경우가 많았다.

 

그래서 나는 간단명료하게 가는 거로 결정했다.

일단 아이패드로 사이트의 전체적인 디자인을 간단히 스케치했다.
디자인에 대해 배워본 적이 없어서 생각보다 어렵고 많은 시간이 걸렸다.

 

 

아이패드로 스케치한 초안

스케치 진짜 허접하긴 하다...

그리고 바로 코딩하려고 했는데..
이 상태에서 바로 코딩하는 것보단 디자인을 깔끔하게 하고 코딩하는 게 더 나을 거 같다고 생각했다.
피그마는 써본 적 없지만 이번 기회에 한번 써보기로 했다.

대충 피그마 강의 10분 정도 듣고 그냥 직접 만져보기로 했다.
생각보다 어려운 툴이 아니어서 쉽게 쓸 수 있었다.

 

메인페이지 디자인 후보들

일단 메인페이지부터 여러개 만들어보면서 생각했다.

바로 코드부터 짰으면 이렇게 시안들을 비교할수 없었을거고 디자인 퀄이 더 낮아졌을것이다

 

친구들의 의견을 들어보니 2번이 괜찮다고 해서 저거로 결정하고 나머지페이지들도 작업했다.

 

전체 디자인

 

 

나름 이정도면 예쁘게 잘나온거같아서 대만족이다. 

만들땐 .. 난 프론트인데 왜 디자이너가 하는 걸 해야해...라고 중얼거리면서 했지만...(머리 벅벅 뜯으면서 만듬)

 

이제 내일부턴 만들어진 디자인을 토대로 코드작성을 시작해야겠다.

 

이제 진짜 시작인거다...

코딩 드가자~