changetodev blog

프론트엔드 개발자의 웹 포트폴리오 만들기

이번 포트폴리오 프로젝트는 다음과 같은 목표를 가지고 만들어 졌다.

💡

여러 잘 만든 포트폴리오의 디자인 및 UX를 긁어다 조합해 보기.

CSS의 grid/flex 연습

개인 성과정리 차원

깃허브 페이지 배포

ChangeToDev's portfolio

https://enterryan.github.io/tagDev/

아토믹 디자인 적용.

기존에 유용하게 사용하던 아토믹 디자인을 사용하여 제작 하였습니다.

아토믹 디자인이란 더 이상 분해할 수 없는 작은 컴포넌트 단위(Atoms) 부터 시작해 총 5가지의 단계를 거쳐 최종 Pages를 만드는 디자인 기법으로, 컴포넌트의 재 사용성이 용이하다. 아토믹 디자인 또한 함수형 프로그램을 지향 함으로 각 컴포넌트는 독립적으로 수행이 가능해야 한다. atoms 더 이상 쪼갤 수 없는 UI최소 단위 (ex 인풋 태그, 버튼) molecules atoms를 모아 구성한 UI 단위 (ex 폼) organisms atoms와 molecules를 모아 구성한 UI단위, 핵심 기능이 들어가며 여기까지는 재활용이 가능하다. (ex 검색창, 헤더, 아티클 ,네비게이션) templates Data를 가지지 않는 최종 레이아웃 형태 Pages 실제 페이지를 구성하는 UI 단위 + data와 연결

시맨틱 태그를 활용해 각 아래와 같은 아티클 컴포넌트로 구성되어있습니다.


<main>
  <Thumbnail/>
  <AboutMe/>
  <Introduce />
  <Skills />
  <Carrer />
  <ProjectArticle />
</main>

디자인 카피 및 핵심 UI 기능

1. 모바일 화면 지원

모바일 화면을 지원하기 위해서는 레이아웃을 미디어 쿼리로 수정을 해야 한다.

나에 경우에는 다음과 같은 헤더가 있는데

디바이스 화면이 줄어들면 너무 많은 텍스트가 있어서 드롭다운 메뉴로 컴포넌트를 변경해야 한다.

또한 flex와 grid를 통해 요소를 디바이스 크기에 맞게 기본적으로 자동 배치하며 아래와 같은 레이아웃을 고정한 녀석들은 직접 미디어 쿼리로 사이즈를 수정해야한다.


flex-direction: column;

display :grid;
  grid-template-areas: 
  'intro-icon intro-tittle'
  'intro-icon intro-value';
  grid-template-columns: 50% 50%;
  
  
  /*미디어 쿼리를 통한 비율 조절*/
  @media (max-width: 768px) {
  .project-article {
    padding: 1rem;
  }

  .project-grid {
  grid-template-areas: 
  'intro-icon'
  'intro-tittle'
  'intro-icon'
  'intro-value';
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

[PC일때의 기본 grid 배치]

[모바일일 경우 일렬 배치]

2. 스크롤링

각 아티클의 타이틀에 id를 주고 네비게이션의 아티클 이름 클릭시 타이트로 자동 스크롤 구현

메인 페이지의 경우 헤더보단 인사 에니메이션에 초점 포커스 유도를 위해 헤더 백그라운드를 페이지와 동일하게 하고 스크롤시 헤더 존재 각인

우측 하단에 최상위로 스크롤링 버튼 추가.

3. 특정 Card에 대한 hover 이밴트로 인식UX 주기

특정 카드에 대한 hover 이밴트로 어떤 카드에 지금 마우스가 올라가있나 시각적 요소 추가.

4. 모달을 통한 상세한 내용 전달.

각 카드에 너무 많은 데이터를 전달하기 보단 대제목, 소제목, 기술 스택등만 나열하고 상세 개발 내역은 모달을 통해 전달.

후기

외부에서 받는 데이터셋이 없어 아토믹 디자인을 유용하게 잘썻다.

단, 역시나 원자와 분자의 구분이 모호해서 힘들었다.

생각보다 프로젝트가 회사에서 한건 내용을 걸러야 하다보니 쓰기가 쉽지 않았다.

회사에서 진행한 프로젝트의 경우 회사 이력을 쓴 곳에서 바로 볼수 있게 하면 좋을것같다.

Changetodev's Blog

개인 포트폴리오 페이지 만들기