[12/18 부트캠프] 카타, 과제: 웹플로우 랜딩페이지 제작②

 

내일배움캠프 D-41 (9주차)

 

📌To Do List

* 카타: SAAS - 슬랙 조사 ✅ (마무리 완료)

* 과제: 웹플로우 랜딩페이지 제작②  ✅

 

 

 

 

01 카타: 슬랙

✏️구성 공부

다양한 정보가 모였을 때 정리하기가 참 힘든 나..

그럼에도 어떻게 하면 좋을지 최대한 머리를 감쌌다.

아무래도 완벽하게 해야한다는 생각 때문에 더 고민이 많아지는 것 같다.

 

어떻게 해야 잘 정리했다고 소문날까...

어떻게 해야 타인이 봤을 때도 이해하기 쉬울까... 뭐 그런 생각들

 

새롭게 알게 된 사실은 슬랙에서 AI기능으로 대화 기반 질문에 대한 답변 기능도 가능했고AI기능을 언제, 어디에서 사용해야하는지였다.예를들어 해당 회사를 처음 들어갔을 경우, 기존 업무가 어땠는지 파악하기 위해 모든 대화내용을 다 둘러봐야하는 불편함이 있었다면, AI기능으로 요약정리하기 기능을 누르면 모든 내용을 함축적으로 잘 정리해서 보여준다는것..!! 요건 몰랐지~?ㅋㅋ기능을 알아도 못쓰면 쓸모가 없는데 이런 걸 알아두면 추후에 빠른 업무 파악에 도움이 되지않을까 싶다.

 

다 마무리하고 봤을 때 내가 고민한 것보다 쉬운 레이아웃이라고 생각들지 않았다ㅋㅋㅋ

 

이번에 카타에서 진행하는 기업 분석은

추후 있을  ux기업분석에도 중요하다는 목적에서 만들어진 것 같다.

시간이 없어서 기업을 분석하거나 그런 것 보다는 UT를 어떻게 할지, 문제정의를 어떻게할지에 대해서 좀 더 초점이 맞춰졌는데

사실 기업분석이 정말 중요하다는 것..!!

그래서 그런 걸 좀 쌓자는 마음으로 슬랙을 조사하며 어떤 카테고리로 분류해서 정리할 지 고민해봤다.

 

 

 

 

1) 슬랙이란?

 

 

 

2) 슬랙의 핵심이 무엇인지?

 

 

 

3) SAAS 특징에 따른 분석

 

 

4) 핵심 기능

 

 

이런식으로 Do와 Don't를 나누어서

효율적인 업무에 대한 생각도 적어봤다.

 

슬랙 이용할 때 카톡 입력하듯이 엔터처리를 여러번 하는 경우가 있는데

이랬을 때 불편한 점은 어느 부분에 스레드를 남겨야할지 모르는 경우가 있다.

 

업무할 땐 하나의 메시지를 길게 작성해야 스레드를 남기는 사람도, 보는 사람도 업무할 때 확인하기도 쉬워진다.

그냥.. 개인적인 팁이라고 생각해서 적어봤슘다...!!ㅋㅋ

 

 

그리고 경쟁사, 사용자 분석 등 미처 조사하지 못한 내용은 같이 조사하시는 ㅈㅎ님께 부탁드렸다!

팀원이 있을 때 좋은 점은 내가 하지 못하는 것 혹은 못한 것을 같이 할 수 있다는 것!

 

 

 

 

 

02 과제: 웹플로우 랜딩페이지 제작 (올라)

✏️제일 헷갈리는 Selector

웹플로우를 제작하며 제일 헷갈렸던 부분은

CLASS selector 선정이다.

아 진짜 알듯말듯 하는게 너무나도... 짜증이났다.

 

사실 이 부분은 튜터님을 한 번 봬서 답변을 들었다.

중간에 수정은 못하고 차곡차곡 잘 쌓아야 한다는 답변을 받았는데

 

예를 들어 Title 40px이라는 class를 전에 만들어둔 게 있고,

아래에 있는 다른 section에 적용을 하려고 하면

가운데 정렬이 돼있다던지, Title 40px 자체만 적용되지 않아서

다시 위로 올라가서 값을 수정해서 flex에서 가운데 정렬을 맞추는 걸 다시 했다.

 

VSC에서 CSS를 봤다면 어떤 속성값들이 어떻게 적용돼있는지 쉽게 볼 수 있을텐데

웹플로우에서 CSS속성값들을 볼 수 없어서 아쉬웠다.

 

그래서 class 이름정할 때, 값들을 정할 때 굉장히 조심조심하면서 진행했는데

결국엔 class값을 그냥 2개로 설정해버리거나 이름을 수정해버렸다.

굉장히 비효율적인 방식으로... 적용을 한 것 같지만?

정말 프로덕트 디자이너가 코드를 딱 봤을 때 이해하는 정도로만 학습해야겠다고 생각했다.

웹 랜딩페이지는 어느정도 구현했으니까..... 이정도로 만족할란다.. ㅠㅠ

 

 

이게 오늘 만든 css고 footer까지 마무리해서 컴포넌트까지 적용되었다.

확실히 header와 footer를 컴포넌트로 만드니까 처음과 끝의 구분이 명확한 것을 알 수 있었다.

 

이렇게 깔-끔

 

총 9개 만든거야 나...?

고생했다 고생했다...

나중에 포트폴리오 만들 때 너무 기대가 된다.

이부분도 튜터님께 여쭤봤는데 포폴페이지를 무료로 배포하는 방법도 다 알려주신다고 하셨다.

내가 기획하고 내가 디자인해서 코딩까지 하면 정말 멋있을 것 같잖아,,!!!

얼른 얼른 배웠으면 좋겠다 :)

 

 

 

 

 

✏️네비게이터 fixed

 

상단 gnb바를 fixed를 눌렀는데 

 

 

이게 뭐시여...?

왜 하얀색 배경이 전체로 퍼지는거지?했는데...

position 값을 전체로 분포하는 값을 줘버린것...

 

 

잘못된 예시..

잘된예시

이렇게 상단바에 붙는 아이콘 모양을 눌러야 상상했던 모양대로 위로 챱! 붙는다.

 

 

그러면 이렇게 깔끔하게 나옴.

스크롤해도 문제 없시여~

 

 

 

✏️gnq바 로고 클릭 시, 최상단으로 이동

텍스트로 미션을 봤을 땐 굉장히 쉬워보였다.

ㅅㅣ작! 하자마자 머리 텅텅 이슈.

 

바로 튜터님께서 보내주신 이동방법 파일을 슬랙에서 뒤적거리며 찾았다.

 

1) 이동하고싶은 영역 선택 - setting - ID설정

2) 누르는 버튼(trigger) 링크 선택 - setting - Brand settings - 페이지 화살표 아이콘 선택 - 설정한 ID 선택

→ 여기서 주의할 점은 링크가 아닌 그 안에 있는 요소를 선택하지 않도록 주의한다

 

 

나는 이동하고싶은 영역 ID를 [Top]이라고 설정해놨기 때문에 Section에 Top 선택하는 드롭다운에서 선택할 수 있었다.

 

 

 

 

✏️버튼 hover, pressed 설정

 

버튼도 hover와 pressed했을 때 컬러가 달랐다. 

hover버튼이 좀 더 어둡고 pressed했을 때 버튼이 호버보다 라이트한 느낌!

기존 버튼에 적용된 값들을 토대로 회원가입 버튼의 hover과 pressed값을 지정했다.

 

역시 제일 참고하기 좋은 것은 이미 만들어진 것을 뜯어서 분석해보는 것이다.

 

 

 

 

 

✏️링크연결

강의에서 다 나왔던 내용인데 상세한 내용이 없어서 겪는 이슈였다.

링크연결? 완전 쉽잖아~~~~ 하고 바로 링크 복붙했는데

자꾸.... 랜딩페이지 그 자체에만 연결되는 이슈..

모든 링크가 다 해당 랜딩페이지로 연결되었다.

 

튜터님 찾아갈까 고민하다가 링크연결... 너무 쉬운 걸 못하는 느낌이 들어서

혼자서 어떻게든 한다는 마인드로 계속 뭐가 문제인지 살펴봤다.

 

혹시... 링크 앞단에 기본적으로 붙어있는 디폴트 값 #이 들어가서 그런 건 아닐까...?

하는 생각이 문득 들어서 #을 빼봤는데 바로 연결한 링크로 이-동☆

고민했던 시간보다 연결이 너무 쉽게 돼서 부들부들했지만 ^^ 

그래도 잘 해결되어서 좋았다

 

 

 

 

 

✏️반응형 디자인

 

타블렛모드로 설정하니 바로 이렇게 돼버리는... 후~~~~~~

 

 

이건 아래로 flex - vertical을 줘야겠다. 두 개씩 해야할까 1개씩 해야할까....

 

 

오~~ 내 생각대로 안되는데~~~

 

 

 

그 우측에 지그재그로 돼있는 레이아웃을 누르니까 이렇게 됐다

보기 좋아서 이걸로 지정!!!

 

가운데 왼쪽 정렬된 타이틀은 title영역을 잡고 flex - center를 맞춰주었다.

또 텍스트 정렬을 가운데로했을 때 class변경될 것 같다..ㅋㅋㅠ

 

 

 

 

 

 

✏️인터랙션

케이크가 빙글빙글 돌아가는 걸 하고싶었는데

계속 hover했을 때 계속해서 돌아가는 기능이 없었다.

그리고 케이크가 자꾸 앞으로 튀어나옴....ㅠㅠ

 

 

이거를 뒤로 보내기위해서 팀원들한테도 물어봤는데

div위계질서를 다시 잡거나

케이크와 하단 텍스트영역을 잡아줄 div를 추가해서 재정렬하는 방법 + absolute를 넣자!

해서 그렇게 해봤는데 그래도 똑같은 현상...

 

결국 튜터님께 가서 어떻게 뒤로 넣어요? 했는데

앞으로 옮기고싶은 블록을 잡고 position - relative로 변경하면 된다고 하셨다.

와 바로 바뀜

 

 

position에서 Z축 설정영역이라고 해야하나

Z축이라는게 앞, 뒤를 나타내는 그런 영역인데

static속성에는 없지만 relative 속성에는 있다.

그래서 relative.....???

설명을 해주시긴했는데 그래도 못알아들음..ㅋㅋㅋㅋ

그냥 relative는 앞으로 나가는 거구나 정도로만 이해했다.

 

 

 

케이크 빙글빙글 돌아가는거 개인적으로 너무 좋았다. 뿌듯-

 

 

 

 

 

 

 

 

✏️심화과제: 에어테이블

연동하는 거에서부터 막혀버렸다

 

 

에어테이블 연동시키려고 하니 선택하지 못한 옵션이 있어서일까 연동이 되지않았다.

왜 저런 쓸데없는것들이 있는걸까?

Webflow CMS state, Nobull Action, Nobull message같은것들이 갑자기 생겨서

다음 단계로 넘어갈 수가 없었다. ㅠㅠㅠ

 

튜터님께 가서 물어보니 굉장히 당황해하시면서 그 원인을 계속 찾으셨는데

내린 결론은 Nobull Airtable 서비스의 종료였다.

엥... 이게 맞나? ㅠㅠㅠ

혹시 몰라서 CMS Bridge라는 비슷한 기능을 하는 앱으로 해봤는데

이것도 총체적 난국....

 

 

Nobull Airtable 앱은 더 이상 사용되지 않습니다. 더 강력한 기능으로 처음부터 다시 구축된 CMS Bridge로 전환하세요.

라는 뜻..이것도 종료된건가..?

 

심화과제는 안할 수 있겠다는 말씀을 마지막으로

내일 공지를 올려주신다고 말씀해주셨다.

오마이갓....

꼭 연동해서 해보고싶었는데 너무 아쉬웠다. 왜 갑자기 종료가된건지...ㅠㅠ

 

그래서 오늘의 과제는 이걸로 일단 마무리다!

만약 에어테이블 심화과제가 없다면 기존에 못했던 밀린 과제를 다시 해야겠다.

 

 

• Figma 특강 듣기
• Figma 개인과제 디벨롭
• UT 문제정의 → UI개선: 과제 디벨롭
• 포트폴리오 구성 정리
• UX 강의 재수강

 

 

 

마무리하며...

첫째날은 서비스 선정, 디자인 시안 제작 + 랜딩제작

둘째날은 랜딩제작

셋째날은 랜딩제작 + 인터랙션 추가 + 심화: 에어테이블(못함)

 

이렇게 진행했다.

앞으로 목,금 이틀이 남았는데 이틀동안 어떻게 시간을 쓸 지 잘 구상해봐야겠다!

 

 

코딩을 하며 UI/UX가 뒤처질 수 있어서 그런지

캠프에서 UI/UX의 부족한 점을 보충할 수 있는 커리큘럼이 추가되었다.

 

늘 담당튜터님께 UX가 너무 부족하다. 다음 프로젝트가 마지막인데 걱정된다고 말했는데

말하길 잘했다는 생각이 들었다.

UI반/ UX반/ UIUX반 이렇게 총 3개의 반이 존재했고

그 중 나는 UX반에 들어갔다.

 

하루에 2시간정도의 시간을 투자해서 총 한 달동안 UX를 보충하는 시간을 가질 것 같다.

코딩과 병행해서 할 수 있을지 잘 모르겠지만 한 번 또 달려봐야지!!!