[TIL] 1029 학습일지

 

오늘 한 일

- 튜터님과 디자인 카타

- 1번 강의 완강 +과제 제출

- 2번 강의 ~2주차 +과제 제출

 

 

오늘 겪었던 문제점

- 졸리다..밥시간 한시간 반씩이면 좋겠다ㅠ 애기 밥먹이고 밥준비해서 먹으면 시간이 끝

- 강의를 듣다보니 당이 엄청 땡긴다. 남편이 사둔 카라멜 훔쳐 먹으면서 오후 강의 버텼다.

나에게 허락된 유일한 마약..투시 롤...

 

 

오늘 배운 점

랜딩페이지에 대하여

1)  랜딩페이지 구분하기

- 랜딩페이지란 상품이나 서비스를 홍보하기 위한 목적으로, 사용자의 액션을 유도한다.

- 일반적인 홈페이지의 첫 화면과 달리 명확한 사용자 행동 유도 목적을 가지고 있다.

히어로섹션도 좌측은 랜딩페이지가 맞고, 우측은 홈페이지 메인 이미지이다. 우측은 페이지 내 사용자 액션으로 이어지지 않는다.

 

기타 예시들

---

2) 좋은 랜딩페이지란?

페이지의 목적으로 사용자 액션을 유도하는 페이지

 

a.명확한 행동 유도버튼

전체 페이지의 모서리와 다르게 차별점을 둔다거나, 명채도 차이를 극명하게 준 버튼 디자인. 디자인이 유려하지 않더라도 좋은 케이스라고 할 수 있겠다.

 

위와 다른 느낌의 랜딩페이지. 성격을 보여주는 채도 낮은 이미지에 키카피와 보조 카피, 그리고 행동 유도버튼이 달려있다. 언뜻 보기에는 이쪽이 더 디자인을 '잘'했다고 보이지만, 사실 성격이 다른 것일뿐 모두 각자의 목적을 달성하면 된다.

 

b. 일관된 브랜딩

일관된 오브제, 컬러를 활용하여 이벤트성 이미지라도 톤앤매너를 일관되게 가져간다.

 

c. 기타 매력적인 요소들

애플의 경우 홈페이지 내 3D애니매이션을 활용한 인터랙션을, 우측 지구톡톡 캠페인의 경우 다이나믹한 시각적 요소를 이용한 페이지의 재미요소를 넣어 사용자 이탈을 방지하고 페이지에 몰입할 수 있도록 만들었다.

 

 

모달(Modal)이란?

- 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것
  예시) 로그인 팝업이 뜨면서, 뒷쪽의 화면이 dimmed처리 되는 것
- 모달은 UI의 이름이 아니라 UI를 분류하는 기준 중 하나라는 뜻.

- 즉, 로그인화면에서 뒤에 가려진 부분을 조작할 수 없다면 '로그인 화면'이 모달이다. 
- '로그인 화면은 모달이다'혹은, '모달의 속성을 가지고 있다.'라고 하는 것이 정확한 표현이다.
- 또한 이 뒤에 화면을 가리는 반투명한 검은 층을 라이트박스(암실처리)라 한다.

 

와이어 프레임 그리는 플러그인,'심플 플로우(Simple flow by Lichin)' 사용법

1) plugin - simpleflow 선택
2) 상단의 copy connector to clipboard 클릭
3) 연결하고 싶은 화면 전/후 순서대로 프레임 클릭 후, Ctrl+V