예외 처리

• Tools - Development 피그마에서 제작한 프로토 타입을 참고하여 Tools 섹션을 구현하는 단계입니다. 구현사항의 대부분이 이전 Skills 섹션과 동일하기 때문에 이번 포스팅은 매우 짧습니다. • 구현 화면 Tools 섹션을 구현한 화면입니다. 이전의 Skills 섹션과는 달리 해당 기술에 대한 설명은 한 문장으로만 표시됩니다. • 사용자 인터렉션 요소 (gif 이미지에서는 로고 크기 전환이 버벅거리는 것처럼 보이나 실제 구현 화면에서는 매끄럽게 전환됩니다.) 사용자와 상호작용하는 기능은 skills 섹션과 동일합니다. • 앞으로의 계획 다음 구현은 HTML 마크업과 CSS 적용이 쉽지 않을 것이라 예상되는 Projects 섹션입니다. (하지만 기대되기도 합니다!)..

• Skills - Development 피그마에서 제작한 프로토 타입을 참고하여 Skills 섹션을 구현하는 단계입니다. • 구현 화면 Skills 섹션을 구현한 화면입니다. • 반응형 브레이크 포인트(1440px, 576px) 추가 이번 섹션도 태블릿(1024px), 모바일(768px) 브레이크 포인트를 기준으로 반응형 웹을 구현했습니다. 근데 데스크톱에서 태블릿 해상도로 넘어가기 직전과 태블릿에서 모바일 해상도로 넘어가기 직전에 로고가 회색 컨테이너의 범위를 벗어나는 모습을 보았습니다. 이는 다음 브레이크 포인트에 도달하기 전까지 콘텐츠 영역이 상대적으로 계속 좁아지기 때문이었습니다. 제가 중앙 집중형 레이아웃을 설계하면서 데스크톱 해상도에서 설정한 좌우 여백(초기 프로토타입에서는 마..

•  Tools - Layout and Design 이 섹션에서는 제가 팀 프로젝트에서 사용했던 협업툴(Jira, Notion)과 형상관리 도구(Git, Github) 그리고 다른 목적으로 사용했던 기타 도구들(Figma)에 관하여 소개합니다.  •  초안과 디자인 시스템 적용  위 이미지는 디자인 시스템을 적용하기 전 Tools 페이지의 초안입니다. 이번에도 지난번과 같이 두 가지 디자인 시스템을 적용합니다.  12 Column Grid Layout8-point Grid System  지난번 Skills와 레이아웃 형식이 거의 동일하기 때문에 추가적으로 설명드릴 부분이 없습니다. 그러므로 다음 소제목은 곧바로 최종안입니다!   •  최종안 결정   지난 포스팅(Skills) 때에는 로고를 레이아웃 그리..