옐 FE개발자 포트폴리오

옐 FE개발자 👩‍💻

https://yelldev-portfolio.vercel.app/

-

React.js, styled-components (Feat. TypeScript)

반응형 웹사이트 

컬러칩 : #FFC000 #1BB991 #474339 #F7F3F4

 

 

 

---

 

 

 

 

🍋 컬러칩 정하기

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

전체적인 색감에 대한 아이디어는 'Dribble'이라는 여러 디자이너의 작업물들을 볼 수 있는 사이트에서 얻었다. 닉네임으로 쓰고 있는 '옐'이 옐로우에서 생각한 단어라 메인 포인트로 쓸 색을 노랑색으로 잡았다. 노랑색도 여러가지 종류가 있지만, 어린아이들에게 잘 어울리는 찐한 색감을 좋아하기 때문에 그런 색을 쓴 것들을 유심히 찾아봤다. 노랑색과 파랑색을 같이 쓰려고 했는데 민트색도 좋아해서, 포인트컬러로는 노랑색과 민트색으로 정했다.

 

 

 

🍋 전체적인 레이아웃 생각하기

한 페이지 내에서 스크롤만으로 이동하며 정보를 볼 수 있도록 레이아웃을 구상할까 아니면 헤더에 네비게이션을 만들고 클릭해서 옮길 수 있게 할까 고민을 하다가 후자로 선택했다. 정보를 각 섹션별로 나누어서 보는 게 더 낫지 않을까 판단. react router dom을 이용해서 Router를 만들고 페이지가 길어져서 위 아래로 스크롤 이동시 헤더가 같이 움직일 수 있게 position을 sticky로 넣었다. 

const HeaderContainer = styled.header`
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 32px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 5;
`

styled-components를 사용하며 만든 헤더 컨테이너. 이 sticky 속성에 위치 값을 넣지 않으면 작동이 되지 않는다. 구글링 검색을 통해 알았다! 그래서 top: 0을 주었더니 원하는대로 작동하는 헤더. 헤더가 다른 컨텐츠 위에 있을 때 살짝 비춰보이도록 backrground-color에서 rgba 마지막 값에 0.9로 주었다.

 

 

 

🍋 각 섹션 레이아웃

이 부분은 어떤 큰 그림을 두고서 시작한 게 아니라 이리저리 움직이다가 이렇게하면 괜찮겠다 싶어서 스타일링을 바꿔가며 무엇이 가장 나을 지 고민했다. 컬러칩은 무엇을 쓸지 생각했기 때문에 어떤 폰트를 쓸 지도 생각해봤다. 한글폰트는 'Pretendard Variable'로, 영문폰트는 'Nunito Sans'로 결정하고 작업을 하는데 폰트의 굵기를 굵게 해도 원하는 느낌이 안나와서 구글폰트에서 찾아보다가 굵은 폰트는 'Black Han Sans'를 추가해서 작업.

 

---

 

about 

어떤 생각과 마음가짐을 가지고 작업하는 지에 대한 짤막한 소개와 기술스택을 넣었다. 사진을 넣으면 좋을 거 같다는 생각을 했는데 최근에 찍은 사진이 거의 없어서 아이폰에서 만든 미모티콘으로 나를 대신하기로 했다. 얼굴만 나오는 미모티콘이 있고 상체까지 나오는 미모티콘이 있어서 그 두 개를 저장해서 썼다. 현재 아이폰8을 사용하고 있는데 이 기종에서는 미모티콘에서 쓸 수 있는 기능 지원이 전부 되지 않는 거 같아서 이정도로만 만족하기로. 왼쪽이 쓴 미모티콘. 사진이 jpg로 저장되어 뒷부분의 하얀 배경까지 나오더라. 뒤에 포인트 색상이 있는 원을 넣고 싶어서 오랜만에 누끼로 이미지를 따고 png로 사진을 저장했다. 

왼쪽에는 미모티콘과 내 깃허브, 블로그를 방문할 수 있도록 하는 아이콘 링크. 그리고 오른쪽에는 자기소개와 기술스택 뱃지를 넣었다. 저 살짝 보이는 기술스택 뱃지가 고민했던 결과. 개발자의 기술스택은 수치로 볼 수 있도록 표시하는 게 좋다고 했는데 그 기준을 어떻게 잡아야 할 지 모르겠더라. 그래서 떠오른 게 각 레포지토리 README에서 썼던 뱃지를 넣는 걸로 하면 어떨까라는 생각. 저 뱃지 자체가 마크다운 형식에서만 쓸 수 있는거라 react-markdown이라는 라이브러리를 이용해서 간편하게 넣을 수 있었다. 

 

기술뱃지는 여기 레포에서 https://github.com/Ileriayo/markdown-badges

 

 

projects

깔끔하게 보여주자 라는 생각으로 구성. 이 부분은 노마드코더에서 6개월만에 독학으로 취업하신 분의 포트폴리오를 참고해서 구성했다. 그 프로젝트를 대표할 수 있는 이미지를 넣고, 프로젝트 이름,  프로젝트에 사용한 기술스택, 프로젝트에 대한 설명, 그리고 해당 프로젝트 웹사이트와 깃허브 레포지토리가 연결되는 링크 아이콘을 넣었다.

 

구성은 똑같고 안에 내용물만 달라지니까 이걸 컴포넌트로 만들어서 구성하면 어떨까? 라는 생각을 했다. 데이터 자체를 json 형식으로 만들어서 받아와 쓰면 좋겠지만 그렇게 하는 걸 잘 모르겠어서, 일단은 ProjectsData.ts 라는 파일을 만들고 거기에 순서대로 배열 안에 오브젝트를 넣는 방향으로 구성했다.

const ProjectsData = [
.
.
  {
    id: 3,
    title: 'Clone Twitter',
    img_src: `${cloneTwitter}`,
    hashtags: ['React', 'CSS', 'Firebase'],
    description: 'SNS인 트위터의 기능을 일부 구현하여 만든 웹사이트 ',
    links: {
      web: 'https://pak-fuse.github.io/react-clone-twitter/',
      github: 'https://github.com/pak-fuse/react-clone-twitter'
    }
  },
 .
 .
 ];

그래서 이 정보를 import해서 만든 컴포넌트 안에 넣어주는 걸로 했다. 나중에 포트폴리오 업데이트 할 때 이 부분에다가 데이터를 더 추가하면 되지 않을까 싶다. (이후에 더 좋은 방식을 알게 되면 그렇게 수정하는 걸로)

 

 

contact

간단하게 연락할 수 있는 이메일 주소를 쓰고 연락을 달라고 적어두었다. 메일 아이콘을 눌렀을 때 직접적으로 메일을 보낼 수 있는 창이 뜨거나 아니면 밑에 form을 만들어 내용을 적고 전송하기 버튼을 누르면 메일을 보낼 수 있는 작업을 하는 것도 좋을텐데 이 부분은 조금 더 고민해봐야겠다.

 

 

 

🍋배포

포트폴리오이기 때문에 원하는 도메인을 사서 하시는 분들도 있는 거 같은데 깃허브와 연동해서 쓸 수 있는 vercel을 통해 배포했다. 전에 프로젝트 했을 때 이걸로 배포해본 적이 있는데 그 때보다 조금 더 수월하게 배포할 수 있었다. 일단은 배포를 하려면 당연히 에러 있으면 안되고, 경고 조차 있으면 배포되는 중간에 작동이 멈춰버린다. 그래서 배포하기 전에 테스트하면서 경고가 뜨나 안뜨나 확인하고 vercel에서 내 프로젝트가 올라가 있는 깃허브 레포랑 연동하면 간단하게 배포할 수 있다. 도메인은 https://{내 레포 이름}.vercel.app 이라는 도메인을 얻는다. netlify도 그러는지 모르겠는데 vercel의 경우, 깃허브와 연동해놓고 main 브랜치에 커밋을 푸쉬할 때마다 자동으로 재배포된다. 그 점이 편리!

 

 

---

 

 

구인공고를 보다가 지원하고 싶은 회사가 있어서 이력서를 다시 쓰고 포트폴리오를 만들었다. 전에는 일을 한 경험이 없기 때문에 내가 만든 토이프로젝트 자체가 포트폴리오라고 생각을 했다. 그런데 그게 아니라 다른 분들이 만든 포트폴리오를 보니 본인이 어떤 사람이고, 무엇을 경험했고, 어떤 실력을 가지고 있는 지에 대한 정보를 다른 사람이 보기 좋게 만드는 것이 포트폴리오더라. 그래서 나의 색과 취향을 듬뿍 넣어서 만들어야겠다고 생각했다. 참고할만한 것들을 찾아 구글에 검색해서 보다가 몇 명의 참고할만한 포트폴리오 모음집 같은 걸 봤다. 화려한 애니메이션들이 들어간 포트폴리오를 보고 나도 저렇게 만들어야 하나 싶었는데 그 포스팅 밑의 댓글에는 포트폴리오에서는 사이트 자체의 화려함보다 다른 사람들이 당신의 정보를 얻기 위함이라는 글을 보고 생각을 바꾸었다. 그래서 폰트 크기도 작게 하지 않고 나의 정보를 깔끔하게 보여주면서도 취향이 듬뿍 들어간 걸로 만들자로 결론-!

 

본명이 들어간 걸로 만들었어야 했나 싶기도 했는데 처음 컨셉 자체를 내가 쓰고 있는 닉네임에서 가져와 전체적인 컬러칩을 구상했기 때문에 닉네임을 로고 같은 형식으로 생각하고 소개하는 페이지에 본명을 넣는 걸로 바꾸었다.

 

내가 만든 프로젝트를 보여주는 섹션에서 Github API를 써볼까 고민하기도 했다. 구글링을 해보니 역시나 개발자들이 많이 모이는 곳 답게 깃허브에서 받아올 수 있는 정보들이 어마어마하게 많았는데 fetch로 데이터를 받아보니 내가 원했던 정보는 README에 정리한 곳에 있어서 굳이 리드미에 올린 사진 가져오자고 API를 쓰는 게 맞는 걸까 라는 의문이... 내 포트폴리오 사이트에 얼마나 많은 사람들이 들어오겠냐만은 여기 레포에서 리드미 얻어오고, 저기 레포에서 얻어오는 게 의미가 없을 거 같아 데이터 형식의 컴포넌트로 수작업했다.

 

노마드코더 리액트마스터 클래스가 업데이트 되면서 React와 함께 TypeScript를 쓰고, Recoil까지 써서 타입스크립트 기반의 포트폴리오를 만들려고 야심차게 마음을 먹었건만 데이터를 외부에서 받아 쓰는 것도 아니고 상태관리를 필요로 하는 부분도 거의 없기 때문에 괜히 타입스크립트를 쓰려고 했나 라는 생각이 들었다. 타입스크립트 부분은 styled-components에서 theme을 넣어주거나 위에서 내가 만든 데이터형식을 넘겨줄 때만 사용해봄. 이걸로는 타입스크립트를 써봤다고 할 수 없어서 피쳐링 타입스크립트로 표시...

 

CSS-in-JS를 조금 더 자유자재로 쓰고 싶다. 스타일컴포넌트 라이브러리가 SCSS 문법이랑 비슷한 거 같고 활용을 더 잘할 수 있을 거 같은데 아직 거기까지는... 조금 더 공부를 하고 공식문서를 꼼꼼히 읽어봐야겠다. 노마드코더 업데이트된 강의 들으면서 타입스크립트랑 리코일도 써보고 조금 익숙해지면 프로젝트 구상해서 하나 해봐야지.