10. 좋아하는 웹 화면 만들어보기

벌써 10강이다 남은 미션까지 잘 마무리 하자

먼저 내가 좋아하는 웹사이트다

https://www.jimmyjimmyc.com/

JIMMY C

내가 개인적으로 좋아했던 영상 감독이자 컬러리스트인데, 유명하지는 않지만 우연히 접하게 된 계기로 팔로우업 하고 있었다.

웹사이트 자체는 굉장히 단순하고 영상 포트폴리오용 사이트이지만, 전체적인 방향의 일관성이 마음에 들었기 때문에 선정했다.

1. 분석 및 계획 수립

웹 화면 분석

대상 선정: 자신이 좋아하는 웹 사이트(포털, 쇼핑몰, 블로그 등)를 선택.
구성 요소 분석: 화면의 레이아웃, 헤더, 네비게이션, 콘텐츠 영역, 푸터, 버튼, 이미지, 아이콘 등 요소들을 세밀하게 분석.
의도 파악: 각 디자인 요소가 사용된 이유(가독성, 시각적 강조, 사용자 흐름 등)를 메모.

 

디자인 시스템 작성

기본 요소 정리: 폰트, 색상, spacing, 버튼 스타일 등 반복 사용될 요소에 대한 규칙을 문서화.
스타일 가이드 제작: 디자인 전반에 일관성을 유지할 수 있는 가이드라인 작성.

2. 디자인 모방의 원칙

단순 모방이 아닌 분석

구조 이해: 단순히 따라 그리는 것이 아니라, 왜 그런 레이아웃과 디자인 요소가 사용되었는지 고민.
개선 아이디어 도출: 기존 디자인의 장단점을 파악하고, 자신만의 디자인 원칙을 추가하여 재해석.

3. 프로토타입 완성 및 사용자 흐름 점검

인터랙션 및 전환 효과: 최종 디자인에 대해 각 페이지 간의 전환 및 인터랙션 효과를 설정하여,
실제 사용자 경험과 유사한 흐름 구성.
사용성 테스트: 프로토타입을 실제로 사용해보고, 사용자 피드백을 반영해 수정 및 보완.

 

---

실습으로 넘어가면

실습 1: 웹 화면 분석 및 스케치

실습 단계:

자신이 좋아하는 웹 사이트를 선정하고, 주요 페이지(홈페이지, 리스트 페이지, 상세 페이지 등)의 스크린샷을 캡처.
캡처한 이미지를 참고하여 피그마 내 새 파일에서 기본 레이아웃(헤더, 콘텐츠, 푸터 등)의 스케치 작업 진행.
연필 도구 또는 간단한 사각형, 선 도구를 사용하여 전체적인 구도를 잡고, 각 영역의 위치와 비율을 대략적으로 배치.

실습 목표:

캡처한 웹 화면의 구조와 구성 요소를 이해한 상태로, 스케치 레벨의 레이아웃이 완성됨.
전체 디자인의 뼈대를 확립하여 이후 세부 디자인 작업을 진행할 기반 마련.

실습 2: 디자인 재현 작업

실습 단계:

스케치한 레이아웃을 토대로 세부 구성 요소(헤더, 네비게이션 바, 콘텐츠 영역, 사이드바, 푸터 등)를 실제로 디자인.

그리드 시스템과 프레임을 활용하여 각 영역을 정확하게 배치.

앞 단계에서 제작한 UI 컴포넌트를 재사용하여 버튼, 카드, 이미지 영역 등 주요 요소를 구성.
타이포그래피와 색상 팔레트를 적용하여 일관된 디자인 스타일을 유지.

실습 목표:

원본 웹 사이트와 유사한 디자인 구조가 재현되며, 컴포넌트와 스타일 가이드를 적용한 결과 일관된 디자인이 완성됨.
세부적인 디자인 요소(버튼, 텍스트, 이미지 등)가 통일감을 가지며 배치됨.

---

아래는 내가 따라 만들어본 랜딩페이지 디자인

단순하고 조잡하지만 아주 마음에 든다. 다만 디테일한부분에 대한 실력이 아직 미숙하다. 계속 발전해나가야 할듯하다.

이정도로 실습하고 추후에 학습을 진행하며 과제를 완성시켜야겠다. 너무 힘들다