[TIL] #9 디자인 카타(웹사이트),피그마 프로토타이핑,아티클 읽어보기

오늘의 학습내용📖

 1.디자인 카타 

 

이번 카타 주제는 웹사이트! 오늘은 레퍼런스만 찾아서 정리했다

• 웹사이트는 특정 기업,개인 또는 조직이 인터넷을 통해 제공하는 정보의 모음
• 사용자가 웹 브라우저를 통해 접근할 수 있는 여러 웹페이지로 구성된 플랫폼
• 기본 목적은 사용자에게 정보를 제공하거나, 특정 제품과 서비스를 알리는 것
• 웹사이트 내에는 다양한 하위 페이지가 포함될 수 있다.
• 웹사이트의 주요 구성요소 예시로는 홈페이지,소개 페이지,제품/서비스 페이지,문의 페이지,블로그/뉴스 페이지 등이 있다.

나는 네이버 클라우드,미니스탁,오롤리데이를 레퍼런스로 가져갔다.

오늘은 시간 내에 레퍼런스 고르고 설명까지 쓰기 완료 😎

 

 2.피그마 활용법(2) 수강 

 

💡다양한 환경에서의 UI 차이

• UI는 기능과 목적이 중요하다
• UI에 차이가 있다는 것은 목적에 차이가 있다는 뜻이다
• 목적에 차이가 있으면 UX에서도 차이가 생긴다

 

💡웹과 앱의 차이

1. 페이지 이동
   • 앱은 임의로 주소를 입력해서 이동할 수 없다.
   • 반면 웹은 주소창에 URL을 입력하면 어디든 접근 가능하기 때문에
   • 잘못된 화면에 접근할 수 있다는 문제가 생긴다. 이런 경우 다시 정상적인 화면으로 돌려보내줄 수 있어야 한다.
2. 뒤로가기
   • 앱은 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동
   • 웹은 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유롭기 때문에
   • 뒤로가기를 통해 접근할 수 없는 화면에 접근하면 결제가 2번 발생하거나 취소가 여러 번 되는 등 치명적인 문제가 발생할 수 있다.
3. 주요 메뉴 이동
   • 모바일 웹에서는 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI 배치
   • 앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 한다.
   • 두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI이다.
   • 최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는다→ 사용자가 편하고 쉽게 제품을 쓸 수 있는 방향으로 수렴한다.
4. 바텀시트
   • 화면 하단에 고정되어 현재 화면과 관련된 옵션이나 메뉴를 제공하는 UI
   • 다이얼로그와 같은 컨테이너 컴포넌트 종류 중 하나이다
   • 바텀시트는 화면의 하단에 고정되어있다
   • 앱에서는 바텀시트를 드래그해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어렵다.

💡스마트 애니메이트 적용시

1. 움직일 요소의 이름이 같은가
2. 레이어 구조가 동일한가 확인!

💡피그마에서 포지션 설정하기

• Static, Fixed, Sticky → 프로토타입 패널에서 설정
• Absolute→ 프레임 패널 안에서 설정, 오토레이아웃 프레임 안에 있을 때만 사용 가능. 오토레이아웃에 영향받지 않고 일반 프레임에 배치하는 것처럼 움직일 수 있음.

 

 3.아티클 읽어보기 

 

피그마 강의에서 추천해준 폰트 관련 아티클을 읽고 정리해보았다.

이번 아티클을 읽으며 행간,자간은 보통 어떻게 설정하는지랑 폰트 스타일 가이드의 중요성을 알게 되었다.

근데 폰트 색상 대비 4.5:1은 어떤 걸 말하는 걸까...? 이것도 튜터님께 질문해봐야겠다.

아티클은 읽을 때 마다 새로운 지식이 생기는 것 같아서 뭔가 기분이 좋다!!

아예 아티클 정리용 노션 페이지를 따로 만들었다.

정리해둔 거 아침에 커피 한 잔 하면서 잠깰 겸 읽어야지~

---

느낀 점, 새롭게 깨달은 것💡

나는 아침에 기분이 좋은 사람인 것 같다...아침에 중요한 일들을 바짝 해둬야겠다 ㅎㅎ

오늘 아티클 읽으며 개발팀에서도 CSS로 폰트 스타일을 적용해둘 수 있다는 걸 첨 알았다! 

 

오늘의 잘한 점🥰

- 늦게나마 아침운동 다녀왔다 ㅎㅎ

- 미션인증 모임에서 지킬 계획을 세웠다

- 강의 두 편 완강했다 ~.~

 

오늘의 문제점,부족한 것😵‍💫

- 어제부터 뜨개질을 시작했는데 중간중간 뜨개질이 너무 하고싶어서 손이 근질거렸다ㅋㅋ

 

해결방법👊

- 쉬는 시간이랑 ... 끝나고 해야지...ㅎㅎ

 

 

어제 팀원들이랑 찍은 사진(?) ㅎㅎ