WIL 8주차 (서비스랜딩페이지 개인과제 끝)

프로덕트 디자이너 본캠프 KPT 

Keep (현재 만족하고 있는 부분)

모르는 부분은 최대한 혼자 해결해보고 그것도 안되면 튜터님들에게 질문하는것이 공부할때 더 확실히 기억을 할 수 있는것같아서 좋다.

Problem (불편하게 느끼는 부분)

- 튜터님 인원 수가 적었음
질문을 드리러갈 때 학생 수에 비해 튜터님의 수가 적어서 질문을 하기까지 오랜 시간이 걸릴 때가 있다.
-피곤한 몸
요즘들어 pc를 오래봐서 눈이 떨림

 

Try (Problem에 대한 해결책)

-튜터님 인원수
사실 이건 어쩔수없어서 최대한 혼자서 해결해보는식으로 하고있다.

-피곤한 몸
최대한 영양제 챙겨먹고 눈운동해야겠다.

---

프로덕트 디자이너 본캠프 WIL 6주차

 

- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일

노코드 강의로 웹플로우 사용법과 페이지를 만드는 방법들을 배운개념들로 서비스 랜딩페이지를 과제로 작업하였다.

카타에서는 SaaS를 리서치하며 튜터님의 코멘트및 해설을 들으면서 SaaS에 대한 이해도와 서비스 각각의 핵심경험에 대한 구체적인 개념을 배웠다.

 

- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

웹플로우를 사용하면서 디자이너로서 성장한것같아서 좋다

 

- FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

 

SaaS 리서치를 할때나 그외 UX를 할때 서비스를 리서치할때 가장 중요한것은 사람들이 이거 때문에 쓰기시작했어요를 리서치해야한다.

"핵심행동"이 무엇이고 그 핵심행동을 위하여 이 앱을 어떤 플로우가 있고 어떤기능이 있는지를 알아야하는것이다.

SaaS리서치를 하면서 각 앱들의 핵심행동을 리서치하고 다른카타조원들이 가져온것들을 보면서 어떤식으로 하는지 배웠고, 이것으로 UX리서치를 할때 큰 도움이 될 것 같다.

 

 

웹플로우를 사용하면서 되는것이 있고 안되는것이 있었는데 그럴때마다 문제와 원인과 해결방법을 작성을 해보았다.

 

먼저 같은 클래스인데도 링크버튼으로 컨버트를 하려고하는데 같은 클래스가 한번에 적용이 안돼는 문제가 있었는데

Div block 과 Link Block은 서로 HTML구조가 달라 요소의 종류가 바뀌는것이므로 같은 클래스가 적용되어 있더라도

다른 Div Block도 자동으로 Link block으로 반영이 되지 않는것이였다.

그래서 Link Block이 필요한 상황일때는 잘 생각을 해보고 처음부터 Link Block을 사용하는것이 효율적이다.
또한 웹플로우는 한번에 여러 요소를 선택하거나 변환할 수 있는 기능이 없기 때문에 더 더욱 처음부터 요소를 정해놓고 하는것이 좋은것이다!

모바일에서 스페이스바를 눌러서 줄을 맞추면서 수정을 하고있었는데
알고보니 텍스트 콘텐츠는 브레이크포인트 상관없이  모두 적용이 되는것이다! 그래서 계속 이걸로 찾아봤는데 뭔가 되지가 않아서 일단 오늘까지 해보고 안되면 내일 튜터님에게 질문을 하기로 결정하였다.
ㄴ 이 질문으로 튜터님에게 오늘 물어보고 배운것

먼저 텍스트 콘텐츠같은것은 HTML이고 그외 속성이 CSS이기 때문에 속성이 변하는건 위에 영향이 안가는데 HTML은 변해도 모든 포인트에 적용이 되는것이였다.

튜터님이 알려주신 우회 방법으로는 텍스트의 크기와 글간격? 만을 조절해서 하는것과 아예 줄이 넘어가는 부분은 나눠서 하나의 텍스트를 2개의 텍스트로 하는 방법이 있다고 하셨는데 스타일을 변경해서 줄바꿈을 하는것이 더 편하다고 말씀해주셨다.

피그마와 웹플로우에서 텍스트 설정을 똑같이 했는데도 폰트차이나 줄간격 차이가 있어서 찾아보니
무슨 렌더링 방식의 차이나 폰트 렌더링 엔진 운영 체제의 영향등의 요소로 인해 차이가 난다고 하였다.
예시로 피그마에서 줄간격을 -1px로 하는거와 웹플로우에서 똑같이  -1px로 하는거가 육안으로 봐도 차이가 나는 식이다. 일단 해결방법으로 피그마의 -1px와 비슷한 줄간격을 가질때까지 웹플로우에서 수정을 하였다.

 

다음 텍스트가 Hug가 안되는 부분도 있었다. 이것은 Flex Child에서 Align을 Left로 변경해서 해결을 하였다.
div에 hug같은 성질을 넣으려면 그위에 div에먼저 flex나 grid를 설정해야 그안에 div에 flex  Child 나 grid Child가 생겼었다.

div 요소는 Focused가 작동하지않는 문제가 있었다.
이유가 div는 focus가 기본적으로 입력가능한 요소가 아니라서 작동하지않는것이다.
해결법으로 Div 요소가 포커스를 받을 수 있도록 만들려면, tabindex 속성을 사용하여 Div가 포커스를 받을 수 있게 설정할 수 있었다. tabindex 속성은 HTML 요소가 키보드로 포커스를 받을 수 있도록 만들어준다고 한다.
Div 요소를 선택하고, Settings 패널에서 Custom Attributes를 추가하고 tabindex="0"을 설정하면 Div 요소도 포커스를 받을 수 있게 된다.
tabindex="0": 일반적인 포커스 가능한 요소처럼 동작.
tabindex="-1": 포커스를 받을 수 없게 설정 (기본값)

 

결과적으로, 현재 나의 상태는 어떻게 되었지?

웹플로우로 랜딩페이지를 구현하면서 웹플로우 사용방법과 flex grid , 클래스, 인터렉션활용을 처음보다 능숙하게 할수있게 되었고, UX리서치를 할때 어떤부분을 중점적으로 봐야할지 알게되었다.

 

이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?

일단 다음주부터는 UX집중반주차로 오전에 코딩 오후에 디자인을 한다고 한것같은데

일단 웹플로우로 한번더 아무 랜딩페이지를 가져와서 한번더 만들어보고, 부족한부분이 무엇인지 찾고

UX프로젝트 피드백을 디벨롭해서 한번더 만든것을 보고 개선해야할 문제점이 무엇인지 생각해보기