[TIL] D+42 디자인 심화 과제 1일차

1️⃣ 디자인 카타

SaaS 서비스 리서치 - 노션

 

 

어제는 SaaS에 대해 조사를 해보았고

오늘은 SaaS 서비스 중 하나인 노션의 핵심가치와 핵심기능,SaaS 특성에 기반한 특화된 점,비즈니스 모델 등을 조사해보았다.

회사 다닐 때 여러 앱을 왔다갔다 하면서 문서 작성을 해야해서 정신 없었는데

노션이 그런 점을 해결해주는 앱이라는 것을 조사하면서 처음 깨달았다 !

 

비즈니스 모델 중 하나가 API를 통한 비즈니스 확장이라는데 나도 그렇고 다른 분들도 API에 대해 잘 모르실 것 같아서

설명을 추가하려고 챗지피티의 도움을 받아봤다...

초등학생도 이해하기 쉽게 API에 대해 설명해달라고 했더니

정말 쉽게 알려준당 AI는 볼 때마다 정말 신기하구 대단하다 ... ㅇㅅㅇ!!!

그치만 API에 대한 설명은 이것 만으로는 뭔가 부족함 ... 내일 마저 더 조사해봐야지~

 

2️⃣ 디자인 심화 과제

웹플로우 활용하여 랜딩페이지 제작하기

 

어제 다행히 3주차까지 강의를 다 듣고 저녁 7시에 과제 발제를 들었다.

이번 과제는 강의에서 배운 웹플로우를 활용하여 랜딩 페이지를 제작하는 것이다...!!

 

선택안은 두 가지...!

1.제공된 페이지 중 하나를 똑같이 만드는 것

2.주제를 자유롭게 선정하고 페이지 구성을 직접 기획하거나 디자인 하는 것

 

흠 ,,, 아직 페이지 구성을 직접 기획하거나 디자인 하기에는 시간이 부족할 것 같아서

나는 제공된 페이지 중 하나인 노션의 랜딩 페이지를 클로닝하는 것으로 결정했다.

기존 노션 랜딩 페이지에도 수정하면 좋을 것 같은 부분들이 있어서 ㅎㅎㅎ

예를 들면 메인에 타이포그래피...폰트가 너무 크고 행간,줄바꿈도 수정해야할 것 같음ㅎㅎㅎ

 

 

 

우선, 노션 랜딩 페이지를 캡쳐해서 살펴보고

전에 같은 팀이었던 분께서 알려주신

페이지 HTML을 고대로 옮겨주는 유용한 플러그인을 사용해서 구조를 살펴보았다!

 

그리고 강의에서 제공해주었던 스타일 가이드 형식이 좋은 것 같아서

우선 동일한 형식으로 스타일 가이드를 제작해보기부터 시작!!

 

했는데 !!!! 개인과제 가이드 다시 읽어보니까

스타일 가이드 웹플로우가 아니라 피그마에 만드는 거였나본데...? 오아오아오앙....~~

지금이라도 알아서 다행이다 히히~

 

 

피그마에서 네비게이션 바 사이즈랑 마진,컨텐츠 영역 사이즈 재고,,, 

컬러 추출하고, 텍스트 사이즈도 재보았다.

폰트는 Helvetica를 썼던데 나는 Pretendard로 대체해서 써야지,,,,