프론트엔드 개발자 이형민입니다 프로젝트 회고
프론트엔드 개발자 이형민입니다 포트폴리오 웹 사이트 개발 회고
시작
https://github.com/hyoungqu23/Hyoungmin_Portfolio
부족하지만 나를 보여줄 수 있는 포트폴리오가 필요하다는 생각을 했다. 개발자를 선택한 나를 영업하기 위해 가장 필요한 것 중 하나라고 생각했다.
기획 과정
이미 React로 진행하는 포트폴리오와 여러 페이지로 구성한 Next.js 포트폴리오, 두 개의 기획을 갈아엎은 후, 결국 다시 Next.js를 활용하지만 하나의 페이지로 구성하기로 기획을 한 후 약간의 스크롤 애니메이션을 추가해 심심함을 없애고자 했다.
Header의 경우 좌측 사이드바와 상단 바를 고민하고 있었다. 우선 둘 다 구현해본 결과 좌측 사이드 바의 경우에는 내부 디자인이 전체적으로 우측으로 밀려 균형이 맞지 않는 듯한 뷰를 보여주기 때문에 별로였다. 따라서 하나의 페이지로 구성되므로 위에서 아래로 내려오는 구조의 특성 상 상단 바에 위치하는 것이 구조적으로 안정적인 듯 하여 상단 바로 선택했다. 특히 Sticky한 상단 바를 통해 어떤 위치에서도 상단 바를 활용할 수 있게 했다.
홈 섹션에서는 들어온 사람의 눈을 확 끌 수 있도록 Framer Motion을 활용해 시각적인 애니메이션을 추가했다. 화려한 애니메이션은 아니지만 재치있는 문구를 활용하여 시각적인 즐거움과 나를 인지시킬 수 있도록 만들었다.
포트폴리오에서 가장 중요한 섹션은 프로젝트 섹션이라고 생각했다. 따라서, 소개 섹션과 경험 세션은 간단히 작성하고 약간의 애니메이션만 추가했다. 프로젝트 섹션이 가장 중요한 이유는 내가 개발자로서 진행한 팀 프로젝트나 개인 프로젝트를 보여줄 수 있는 부분이 해당 섹션뿐이기 때문이다. 물론 GitHub의 README.md를 활용해 어떤 프로젝트인지, 어떤 생각을 하고 어떻게 진행했는지, 어떤 스킬을 활용했는지 등을 작성할 수는 있지만 한 번에 볼 수 있게 프로젝트 섹션을 가장 공들여 기획했다.
프로젝트 섹션에는 프로젝트의 이미지와 함께, 관련 내용을 게시했다. 게시 방식으로 처음에는 슬라이더를 선택했지만, 이는 포트폴리오를 보는 사람에게 가로 스크롤이 생겨 어색함을 초래하는 것 같아 결국 스크롤하면서 확인할 수 있게 기획하는 것으로 결정했다.
프론트엔드 개발자 이형민입니다
당연하게도, 나의 포트폴리오를 만드는 것이기 때문에 기획부터 디자인, 개발, 배포, 배포 후 관리까지 모두 혼자 진행하게 되었다. 다른 팀 프로젝트에서 배포를 여러번 경험했지만, 당시에는 팀원들과 함께 배포 에러를 해결하며 진행했는데, 이번에는 그렇게 크거나, 백엔드가 존재하거나, 복잡한 프로젝트가 아니기 때문에 배포 에러가 발생하지 않을 것으로 생각하며 포트폴리오 프로젝트를 시작했다.
만들어둔 Next.js 보일러 플레이트를 바탕으로 시작했는데, 중간에 TypeScript 관련 ESLint 플러그인이 없어 빌드 에러가 발생해 급하게 추가하는 등의 문제도 있었다.
Tailwind CSS 첫 사용기
특히, Tailwind CSS를 처음 사용해보면서, 확실히 기존에 주로 사용하던 Styled-Components, Emotion 등과 같은 CSS-in-JS보다 Tailwind CSS가 작성하기 쉽다고 느꼈다. className으로 작성하기 때문에 해당 태그가 어떤 스타일을 가지고 있는지 쉽게 확인할 수 있고, 작성 방식도 조금만 학습하면 쉽게 작성할 수 있었다. 또한 여러 익스텐션이 존재하여 쉽게 작성할 수 있도록 도와주기 때문에 어렵지 않게 진행할 수 있기 때문에 추천할 만하다.
가장 잘 활용한 익스텐션들은 다음과 같다.
Tailwind CSS를 사용하면서 느낀 가장 큰 강점은 Mobile First 작성 방식이다. 반응형 디자인을 CSS-in-JS에서 작성하는 것은 @media로 미디어쿼리를 작성하는 등의 추가적인 코드가 많이 필요하다. 이러한 방식이 나쁘다는 것은 아니다. 내가 작성할 때 느낀 점은 미디어쿼리를 통해 반응형 디자인을 구축하는 것은 코드가 읽기 쉽다는 장점 말고는 없다고 생각한다.
하지만, 미디어쿼리보다 Tailwind CSS의 반응형 디자인 스타일링 코드가 더 읽기 쉽고, 작성하기 쉽다고 느꼈다. 다음 코드를 확인해보자.
<div className="text-sm md:text-xl">반응형 디자인 예시</div>즉, 모바일 뷰에서는 작은 폰트 사이즈가, 태블릿 뷰 이상에서는 큰 폰트 사이즈가 적용되는 것을 쉽게 알 수 있고, 작성한 코드도 단 한줄도 되지 않는 것을 볼 수 있다. (너무 편해.. 좋아..)
그리고, 정말 다크모드도 쉽게 구현할 수 있다는 점도 장점이다.
TypeScript의 강점
TypeScript에는 안정성과 표현력이라는 두 가지 강점이 있다고 한다. 안정적인 코드를 작성하게 해주고, 에러를 방지할 수 있게 해주고, 추상을 통해 JavaScript의 표현력을 증대시킬 수 있다. 아직 TypeScript를 사용해본지 얼마 되지 않았기에 추상을 활용한 표현력 증대의 강점을 느끼지는 못했다. 하지만, 데이터를 프로젝트 내부의 파일로 추가하고, 이를 가져오는 방식으로 진행하면서 TypeScript의 강점을 느꼈다. 자동완성도 확실하게 되고, 생략한 데이터가 존재할 때 경고가 발생하여 미리 확인할 수 있게 되어 더 안정적으로 코드를 작성할 수 있었다.
포트폴리오에 대한 피드백 받기
부트캠프나 원티드 프로그램을 함께 진행한 여러 동료분들에게 포트폴리오에 대한 피드백을 요청했고, 여러 피드백을 받았다.
- 블로그에 작성한 트러블 슈팅과 회고 글을 포트폴리오에 연결했으면 좋겠다.
- 기술 스택과 프로젝트 기본 정보를 더 보여주는 것이 좋겠다.
- 블로그에 강점이 있다고 생각하니까 꼭 블로그를 연결해주어야 한다.
- 반응형 디자인을 구현한 것이 만족스럽지만 특정 부분에서 Font Size가 너무 작다.
- 블로그와 깃허브로 연결하는 부분을 조금 더 잘 보이게 하면 좋겠다.
- 링크가 새로운 탭에서 열리는 것이 좋겠다.
받은 피드백을 적용하여 UI 디자인을 수정했고, 블로그에 작성한 트러블 슈팅, 회고 글을 연결했다. 추가적으로 링크가 잘 보이지 않는다는 피드백으로 인해 링크에 Hover하는 경우 링크 이모지를 추가하면서, target=”_blank”로 링크가 새로운 탭에서 열리게 설정했다.
<a className="hover:before:content-['🔗']" href={retroUrl} target="_blank">
{title} 회고 보러가기
</a>마무리
포트폴리오 프로젝트를 진행하면서 기존에 작성한 글들이나 프로젝트의 README.md를 다시 수정하고, 정리할 수 있는 시간을 가졌다. 이러한 시간 속에서 이전에 작성한 코드는 어떤 생각으로 그렇게 작성했는지를 확인하며 한걸음 더 성장했다는 것을 체감할 수 있어 자신감을 가지게 되었다. 아직 체득하고 성장할 길이 무궁무진하지만, 사소한 한 걸음이라도 나아갔다는 발전감을 느끼는 것이 꾸준하고 끈기 있게 학습하고 성장하는 길이라고 생각한다. 그러한 느낌을 받을 수 있었다는 것만으로도 이번 프로젝트는 성공적이다!
TypeScript, Tailwind CSS를 처음 사용하면서 효율적임을 느낀 점도 아주 만족스러웠다. 다음 프로젝트에서도 꾸준히 사용하면서 조금 더 깊게 이해해보도록 해야겠다..!
끝! 🙋🏻♂️