[Project] [내 소개 웹사이트] 개인 프로젝트 시작

부트캠프에서 첫 번째 프로젝트가 끝났다. 👏👏👏

끝난 후, 이제 곧 타입 스크립트를 들어갈 예정인데, '타입스크립트를 배우다보면 React를 까먹지 않을까?' 생각이 들었다.

 

그래서 나는 개인프로젝트를 시작해보기로 목표를 잡았다. 왜냐하면!

1. 현재까지 쌓아온 React 관련 지식을 더욱 견고하게 유지하기 위해
2. 다양한 강의 수강과 팀 프로젝트 경험을 통해 나만의 실력을 객관적으로 평가하고, 개선할 기회를 만들어내기 위해

 

🕵️ 주제

 

개인 프로젝트를 하기로 마음을 먹었지만, 당장에 어떤 주제로 프로젝트를 시작해야할지 막막했다.

어렵지 않은 가벼운 주제에 대해서 하고 싶었다.  

한참 고민하면서 나는 내 팀프로젝트에 대해서 노션에 정리를 하고 있었는데, 그 때 문득 든 생각이 나에 대해 소개하는 페이지를 만들어보면 어떨까?

 

'나'를 주제로 잡으면 지금까지 해왔던 프로젝트나, 내 성격, 취미, 기술 스택 등을 정리함으로써, '나'에 대해서도 자연스럽게 생각하게 되고,  성공적으로 되면 나의 포트폴리오에도 긍정적인 영향을 줄 것이다.

 

그래서 첫 번째 개인 프로젝트의 주제는 '나🙋‍♀️'이다. 

 

🎨 CSS 

지금까지 react나 React Native를 이용해 웹/앱 개발을 수행했을 때, 항상 styled-components를 이용하여 개발을 진행하였다. 하지만 나는 이번 프로젝트를 통해서 CSS 프레임워크를 한번 사용해보고 싶었다. 

 

물론 CSS 프레임워크에 대해 많은 경험이나, 지식을 보유하고있다면, 나의 디자인 방향성 맞춰 CSS 프레임워크를 선택해볼텐데, 나는 아직 경험이 많이 없기 때문에 경험을 해보고,시도해보는 것이 우선이라고 생각하여 CSS 프레임워크를 먼저 선택하였다. 

 

프론트엔드는 트렌드에 민감한만큼 요즘 많이 사용하는 CSS 프레임워크가 무엇인지 먼저 조사해보았다.

by https://2023.stateofcss.com/ko-KR/css-frameworks/

 

가장 많이 사용하는 CSS 프레임워크는 Bootstrap이었다. 하지만 그것보다 눈에 띄는 것이 Tailwind CSS의 증가율이었다.

그래서 곧바로 Tailwind CSS에 대해 조사해보았다.

Tailwind CSS은 Utility-First 컨셉을 가진 CSS 프레임워크이다.
하나의 div를 위해서도 컴포넌트를 생성해야했던 styled-components와 달리 HTML 요소 안에서 클래스에 축약된 표현으로 style을 적용하는 것이 굉장히 메리트이다. 또한 HTML을 벗어나지 않기 때문에 별다른 파일 관리와, 클래스 이름을 지정하지 않아도 된다. 

 

이러한 장점을 통해 나는 tailwind CSS를 사용하기로 했다.

 

 

📲 Design 

웹사이트의 주제는 어떻게 할까. 생각해보았을 때, 나의 큰 틀은 두 가지로 정해졌다. 

1. 명함
2. 사진

명함

사실 나의 소개 웹페이지라는 것은 '나'를 보여주는 디지털 명함과 같다. 그래서 명함을 디자인으로 한 웹사이트를 만들면 어떨까 생각해보았다.

 

사진

나의 소개 웹페이지는 내가 만든 프로젝트들, 나의 소개, 어떤 경험을 통해 어떤 기술 스택 능력을 쌓아왔는지에 대해서 보여주는 것이다.  사진의 한 장면처럼 내가 해왔던 것들을 소개하면 조금 더 독특하고, 독창적으로 표현할 수 있을 것이다.

 

결론적으로, 두 주제 중 '사진📸'을 택하였다. 명함보다는 사진이 조금 더 부드러운 인상과 친근한 이미지를 줄 것 같았다.

 

타이틀을 중심으로 Figma를 통해 간단하게 디자인을 구현해보았다.

 

동작 과정은 왼쪽이 홈 화면이고 카메라에 위치한 버튼들이 Nav의 역할을 한다. hover 시 아래와 같이 메뉴 text를 포함한 버튼으로 변한다.해당 버튼을 누르면, 메뉴에 맞는 인생네컷 페이지로 이동한다. 인생네컷 페이지를 통해 나의 생각과, 내가 했던 프로젝트들, 나의 기술 스택 등을 보여줄 예정이다.

 

추후 디자인이 상황에 맞게 변할 수 있겠지만, 전반적인 디자인은 이렇다.   

---

이렇게 전반적인 개인 프로젝트의 목표를 잡았다. 목표 기간은 한달! 한달 동안 복잡하지 않은 간단한 애니메이션과, 프레임을 잡을 것이다! 부트캠프의 일정과 같이 병행하기 때문에 두 페이지 이지만 넉넉하게 잡았다. 

 

조급해하지 말고 차근차근 시작해보자!!💪💪💪💪