Leeyanggoo
[CSS] 메인 사이트 디자인 시안 만들기 본문
개발자도구로 페이지 전체 스캔하기!!
스캔하려는 페이지에서 F12(우클릭 '검사')를 누른다
Ctrl + Shift + P로 실행 명령어 창을 켠다.
'스크린샷(screenshot)'이라고 치게 되면 나오는 "원본 크기 스크린샷 캡처(Capture full size screenshot)"를 누른다.
웹 페이지의 전체 스크린샷이 png로 저장됩니다!!
외에도 특정 영역만 포함하는 스크린샷 등 다양한 옵션이 있으니 유용하게 쓰자!!
피그마를 이용해 시안을 만들자!!
원본 크기 스크린샷 캡처(Capture full size screenshot)로 모은 이미지들을 피그마에서 한데 불러냅니다.
자신이 만들고자 하는 페이지에서 참고하면 좋을 소스들을 잘라서 이어붙입니다.
참고 : 피그마(Figma)는 너비 또는 넓이가 4096픽셀보다 큰 이미지의 크기를 줄입니다. 전체 페이지 영역이 크거나 용량이 큰 파일의 경우 픽셀이 깨지는 현상이 발생하니 확인이 필요합니다!!
사이트 시안
fitness와 연관된 해외 사이트를 위주로 조사했습니다.
구글 검색 시 노출되는 페이지 중 약 15 페이지까지의 조사 내용입니다.
가장 좌측의 컴포넌트가 사이트로 만든 시안입니다.
1. 헤더에는 사용자에게 사이트를 홍보하는 문구와 대표 이미지를 배치합니다.
2. 페이지의 메인 컨텐츠로 각 부위별 운동을 알려주는 유형의 레이아웃을 배치합니다.
3. 사용자에게 동기부여를 하고 사이트의 목표가 되는 슬로건을 배치합니다.
4. 사용자에게 운동의 필수 요소들을 알려줍니다.
5. 사용자에게 운동 시 참고해야 할 주의사항을 알려줍니다.
사이트 시안에 참고한 사이트
https://www.webmd.com/fitness-exercise/default.htm
