DAY12_피그마 킵고잉 베이붸(블로그밀리지말자..힝)

이번주 내 마지막날! 피그마는 킵고잉 유후

 

---

오늘의 수업 요약

- 웹 구성

- 반응형 디자인

- instant swap 실습

 

웹에 대해 알아보기

웹의 정의와 변화

• 웹
  : World Wide Web의 줄임말

	웹1.0(정적 웹)	웹2.0(소셜 웹)	웹3.0(분산형 웹)
핵심특징	- 일방향 정보 제공 - 제작자 중심 - HTML 위주	- UGC - 소셜미디어 - 사용자 참여 - AJAX	- 블록체인 - AI - 시맨틱 웹 - Web3
사용자 역할	정보소비자(Consumer) 읽기만 가능한 수동방문자	정보 생산자(Prosumer) 콘텐츠 제작,공유, 댓글 참여	정보소유자(Owner) 데이터통제, 개인화, 주권 행사
비유	페이지를 넘겨볼 수 있으나 수정 불가	시청자가 실시간으로 참여하고 소통	개인이 직접 관리하는 자산과 데이터

 

 

기본 구성 요소

헤더	웹사이트 최상단 영역	로고, GNB, 검색창, 로그인, 언어 선택 등 주요기능
푸터	웹사이트 최하단 영역	회사/기업 정보, 이용약관 등 법적으로 필요한 정보
브레드크럼	사용자의 현재 위치를 표시하는 보조 내비게이션	홈 > 여성의류 > 티셔츠

 

 

반응형 디자인

PC vs 모바일 웹

PC웹	모바일 웹
1024px 이상의 넓은 해상도 지원	작은 화면에 최적화된 단순한 레이아웃
멀티 컬럼 레이아웃과 풍부한 콘텐츠	터치 인터렉션 중심 UI/UX 설계
마우스 오버(hover) 인터랙션 활용 가능	PC 웹과는 별개의 소스로 구축되는 경우 존재

 

반응형 웹

→ 하나의 소스가 기기 화면 크기에 반응하여 자동으로 최적화되는 웹사이트

→ 브라우저 창 크기나 기기에 따라 요소들이 자동으로 배치됨

→ 해상도마다의 브레이크 포인트를 확인하면서 디자인해야됨!

 

constraints 실습!

→ 정렬을 어떻게 하냐에 따라 콘텐츠의 배치 조절이 달라짐

→ 헤더랑 푸터 정렬을 다르게 하는게 나중에 디자인할때 편함~

Constraints 종류별로 다 해봄ㅋ

 

오늘의 과제는 인스턴스 스왑 다시 해보기 / 로그인페이지 만들기였다.

강사님이 이상형으로 스타뚜를 끊으셨기에!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

나도 성찬이 모음집을...ㅋㅋㅋㅋㅋ

잘생겼다!!!!!!!!! 정말 사심 100프롴ㅋㅋㅋㅋㅋㅋ

이렇게 보니 많이 컸따 성찬아...흑흑흑 남자가 되가는구나...ㅠㅠㅠㅠ 이 누나는 감격해서 울엉...ㅠㅠㅠㅋㅋㅋㅋ

 

그리고 로그인페이지 만들어보기 과제!

사실 뭐 기획하나 없이 만들라고 하셔서...어...어케하지 하다가... 레퍼런스 찾고 하다가...

일단 이미지를 골라보고 있었는데 좀 추상적인 이미지가 있길래 거기에 맞는 무드로 디자인해보았다.

로고도 만들어주고... 넘 오랜만에 만들어서 폰트감이 좀 떨어지긴했는데;

그냥 깔꼼...한거겠찌...?ㅋㅋㅋㅋㅋㅋㅋ

모바일 버전도 만들라고 하셔서 그냥 2가지 버전으로 만들어보았다.

이쁜건 1번째인데, 보통 스크롤 많이 하지 않게 2번째 버전으로 많이들 사용하기에~

오늘도 재미진 피그마 강의~~~

 

이제 내일부터는... 꼭... 매일매일 올려야징..힝