TIL (Today I learned)
오늘 나는 무엇을 했나요
-디자인 카타 Saas 리서치
-서비스 랜딩페이지 개인과제
오늘은 어떤 것을 배웠나요
디자인 카타 Saas 리서치
내일 발표일을 앞두고 마지막으로 자료를 리서치하다가 튜터님께서 넣었으면 하는 것을 알려주셨다.
1.핵심기능(행동)
2.핵심기능 플로우
3.핵심기능 플랜목록 및 플랜별 차이점
4.플랜 업그레이드 유도시키는 법
일단 그동안 조사를 해온것들을 잘 정리를 하였고 그중에 플로우는 PC와 앱 둘다 핵심기능 즉 파일업로드에 대한 플로우를 만들었다.
이렇게 플로우를 보면서 드는 생각이 Dropbox는 기능이 많지만 그것이 핵심기능(파일업로드)을 방해 하지 않고
핵심기능을 정말 쉽게 할수 있도록 UXUI 되있는것같아서 사람들이 많이 사용하는것같은 생각이 든다.
서비스 랜딩페이지 개인과제
오늘은 레이아웃구조를 전부 잡고 그안에 컨텐츠를 채워넣었다.
먼저 노션은 레이아웃이 header, hero section, 기능 소개 section, 시작하기 section, footer이 있다.
이중 header,footer는 템플릿에 있는것을 가져와 알맞게 수정을 하였다.
히어로섹션
히어로섹션은 총 2개로 먼저 나누었고 flex로 세로정렬을 하였다. 그후 위에부분에서 전체적으로 flex로 가로정렬을 하지만 왼쪽글부분은 한번더 Div로 들어가 세로정렬을 하였다. 그다음 그안에 버튼과 로고에서도 한번더 div로 들어가 가로정렬을 하였다.
기능소개 섹션은 반복되는 섹션이 3개있어서 한개만 만들고 복사를 하였고 나머지는 따로 섹션을 잡았다.
먼저 전체적으로 세로정렬잡고, 위에부분은 가로정렬로 잡은다음 위에서 왼쪽부분은 또 세로정렬 그아래 링크버튼이 가로정렬로 잡았다. 그다음 위에서 오른쪽부분은 사진과 텍스트가 세로로 정렬되있으므로 세로정렬로 잡았다.
아래부분에 "다른툴에서 옮겨오기"부분도 가로정렬이기때문에 가로로 다시한번 잡았다..
기능섹션중 중복되지않는 템플릿 부분에서는 flex와 grid를 같이 사용하였다.
먼저 전체적으로 세로정렬후 아래부분에 표부분은 먼저 div로 2개를 가로정렬한후 각각 그리드를 넣었다.
그후 둘다 세로정렬이므로 flex세로정렬로 하였다. 저 글자와 화살표는 노션에서는 그냥 글자랑 화살표특수문자로 한번에 넣었길래 가로정렬을 따로안하였다.
기능섹션중 결과부분
먼저 전체적으로 flex세로정렬을 한후 아래부분을 그리드 형식으로 잡았다.
그후 안쪽에서 한번더 div로 묶어 세로정렬하였다.
마지막으로 시작하기 섹션
여기서는 전체적으로 세로정렬후 아래부분을 다시 div로 묶어 가로정렬로 하였다.
그다음 각안쪽을 세로정렬로 한다음 그중 버튼부분은 div로 다시 묶어 가로정렬로 하였다.
레이아웃 구조를 잡아보면서 점점더 flex와 gird의 사용법이 익숙해진것같고, 레이아웃구조가 처음보다 익숙하게 눈에 들어오는것같다.
레이아웃을 다 잡은다음 디자인으로 넘어갔다.
디자인은 전에 가이드를 다 잡아놓았으므로 텍스트와 사진은 원본을 그대로 복사하거나 가져오는식으로 하였다.
문장 줄바꿈이 어색한부분 바꾸거나 그외 이미지를 넣거나 하는 식으로 디자인을 거의...완성 하였다
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
문제가 매우 많았다.
먼저 피그마와 웹플로우에서 텍스트 설정을 똑같이 했는데도 폰트차이나 줄간격 차이가 있어서 찾아보니
무슨 렌더링 방식의 차이나 폰트 렌더링 엔진 운영 체제의 영향등의 요소로 인해 차이가 난다고 하였다.
예시로 피그마에서 줄간격을 -1px로 하는거와 웹플로우에서 똑같이 -1px로 하는거가 육안으로 봐도 차이가 나는 식이다. 일단 해결방법으로 피그마의 -1px와 비슷한 줄간격을 가질때까지 웹플로우에서 수정을 하였다.
다음 이미지를 넣을때 이미지가 자꾸 크기가 왔다갔다 하거나 이미지 크기는 작은데 크기가 조절이 안되거나 하는 문제가있었다. 일단 이것을 해결하려고 이미지 위에 부모div로 80x80(이미지크기) 고정한 div를 만들고 그안에 삽입해서
해결하였다.
다음 텍스트가 Hug가 안되는 부분도 있었다. 이것은 Flex Child에서 Align을 Left로 변경해서 해결을 하였다.
div에 hug같은 성질을 넣으려면 그위에 div에먼저 flex나 grid를 설정해야 그안에 div에 flex Child 나 grid Child가 생겼었다.
다음 사진이 사이즈가 변경이 안됄때는 이미지셋팅에 아무버튼 눌렀다해제하면 적용된다. 근데 가끔 안되는것도있고 되는것도 있었다. 진짜 모르겠다.
아무튼 문제가 매우 많았다. 일단 계속 ai를 이용하여 검색하는데 진짜 봐도 모르겠거나 검색에도 안나오는것은 튜터님에게 질문을 해야할것같다.
지금 모르는게 계속 나와서 다행이다. 나중에 팀 프로젝트할때 좀 더 도움이 될 수 있을것 같다.