TIL (Today I learned)
오늘 나는 무엇을 했나요
-노코드 강의 1주차 수강
-디자인 카타 OS별 UI차이 발표
-튜터님과 UX개인과제 디벨롭에 대한 면담
오늘은 어떤 것을 배웠나요
1. 노코드 강의 1~2주차 수강
웹페이지의 기본 구조는 블럭형태고 그안에 HTML CSS 자바스크립트가 있다.
일단 HTML과 CSS의 개념을 다시 한번 복습한후 자바스크립트를 추가로 배웠다.
사람으로 치자면 HTMl이 뼈대고 CSS가 그위에 복장및 꾸밈요소라면 자바스크립트는 행동이라고 생각하면 된다.
실습으로 About 페이지를 만들었다.
순서로는
1.전체 구조 잡기
2.디자인 입히기
3.유저 인터렉션 추가하기
4.반응형 디자인하기
이다
1. 전체구조잡기
먼저 구역을 잡는것이다.
히어로,히스토리,프로젝트,컨택트 구역을 잡는다.
하나만 설명해보자면
히어로 구역을 잡으려고 하면 먼저 그 구역에 무엇이 어떻게 들어간지 들어갈지를 본다.
히어로 섹션에는 왼쪽과 오른쪽으로 나눌수 있고
왼쪽에는 텍스트묶음이 세로로 배치되어있고, 오른쪽에는 사진하나만 있다.
이럴때 구역을 나눈다고 하면, 일단 제일 부모섹션으로 볼때는 자식들이 가로로 되어있으므로 Flex에서 가로방향으로 추가를 한후, 그다음 자식들안에 있는 요소들은 세로로 배치되어있기 때문에 flex에서 세로방향으로 추가를 하면 히어로 구역잡기완료이다.
이러한 방향으로 나머지 구역들도 각 요소들의 방향을 보면서 구역을 잡으면 된다.
이때 요소를 찾을때 꿀팁은 Ctrl+e를 하면 검색으로 찾아서 바로 넣을수가 있다! (퀵서치 기능)
다음으로 디자인입히는법을 배웠다.
2.디자인 입히기
구역을 나누었다면 이제 그것을 꾸밀차례이다.
클래스를 추가하거나 텍스트,이미지를 채우고, 요소정렬,크기수정,요소간격수정등을 하는것인데 이것은
여러번 해야 익숙해질것 같다.
이때 주의할점은 모든 텍스트의 크기나 색상 클래스들은 정해진스타일가이드를 적용해야 하는것이다.
디자인까지 입혔다면 유저 인터렉션을 추가해야한다.
3.유저 인터렉션 추가하기
유저 인터렉션은 사용자가 어떤 행동을 했을 때 어떤 결과가 나오도록 세팅하는것이다.
흔히 있는 헤더의 링크에 추가를 할수가있다.
About 요소를 클릭후 우측에서 setting 패널에 들어가 링크 설정을 한다
타입은 페이지 목표는 지금페이지가 홈이므로 홈으로 한다.
그후 디자인패널에 가면 초록색으로 Current라는 클래스가 추가가 되어있는데 이것이 유저가 특정 상황을 충족할 때 추가적으로 붙는 클래스이다!
여기서 Current는 현재 이 페이지에 있을때 라는 의미이다.
이때 글자를 수정하면 유저가 이 상황을 충족할 때 글자도 그에 맞게 수정이 되는것이다.
인터렉션을 적용했다면 마지막으로 반응형 디자인을 할 차례이다
4.반응형 디자인하기
먼저 브레이크 포인트를 알아야한다.
브레이크 포인트는 그 px가 될경우 디자인이 바뀌게 설정을 하는것이다.
렙탑에서 px가 특정 px까지 낮아질경우 테블릿이 되고 테블릿에서 특정 px까지 낮아질경우 모바일로 변하는것이다.
예시로 아래와 같이 브레이크 포인트를 잡을수있다.
[참고] 브레이크 포인트
- 렙탑 : 992px 이상 (별도로 랩탑 보다 더 큰 넓이의 브레이크 포인트를 추가할수도 있어요.)
- 테블릿 : 768px~991px
- 가로 모바일 : 480px ~ 767px
- 세로 모바일 : 480 미만
이때 3가지를 알아두면 좋다.
1.브레이크 포인트는 별표가 되어있는 포인트에서 바꾼 변경은 그 아래 브레이크 포인트까지 전부 변경이 된다.
2.이때 역방향으로는 1번처럼 되지않고 순방향으로만 적용이 된다.
3.그러나 하위브레이크포인트에서 한번 수정하고 나면 위에서 아무리 바꿔도 그 하위브레이크포인트포함 그아래 브레이크포인트는 적용이 안된다.
반응형 디자인도 브레이크 포인트 하나하나 수정을 해줘야 한다. 렙탑에서 수정을 하면 아래까지 수정이 다 된다고해도
모바일 같은경우 렙탑에 비해 화면이 작기 때문에 사진크기나 폰트사이즈가 이상하게 보일수가 있기때문이다.!!
2. 디자인 카타 OS별 UI차이 리서치
업스케일을 해야할때는 아이폰은 해상도가 2배 3배 이런식으로 하며 1.5배는 없다.
그래서 안드로이드에서 hdpi로만들었을때 이것을 아이폰으로 옮기려면 업스케일( 2배) 해야한다.
우리가 클론디자인을 할때 스크린샷해오는건 물리적해상도라 실제로 작업할때는 안드로이드,ios의 논리적 해상도로 맞춰서 작업을 해야 한다!
세리프와 산세리프의 차이를 쉽게 이해했다.
세리프=명조계열 :사람이 필기한것처럼 꺽어지는느낌이드는것
고딕계열=산세리프=획없이 쭉쭉 이어져있다.
ios와 안드로이드 둘다 기본을 산세리프로 사용한다.
서체와 타이포그래피 체계에서는 제일 중요한 한가지만 기억을 하면된다!
많은 서체와 체계가 있지만 둘다 결국 큰제목부터 알림 캡션까지 이것들을 나누어 각각 사용이 되는것이다.
이것을 우리가 나중에 타이포그래피를 만들때 참고를 하면된다!
아래는 카타에서 같은 조원이 물어본 코멘트이다.
이에 대해 튜터님이 대신 답변을 해주셨다.
먼저 갤럭시의 기본폰트는 노토산스가 아니고 다른 폰트로 지정이 되있을수있다.
왜냐하면 일단 IOS=아이폰 이렇게 볼수 있는데 안드로이드는 갤럭시 이외 LG 등 여러가지가 있다.
그래서 안드로이드는 기본폰트가 노토산스이지만 갤럭시는 다른폰트를 사용할수도있으므로 이것이 미묘하게 달라서 작업할때 주의해야한다!
가끔 디자인을 할때 예로들어 메세지앱을 사용할때
메세지앱의 핵심행동은 메세지가 온것을 보는행동이다. 이러한 UI에서는 상대적으로 중요한것은 사용자가 폰트크기를 바꿔도 변화되지않도록 DP로 고정하고 그외 변화가 있어도 되는 덜 중요한것들은 SP로 하는식으로도 할수있다.!
3.튜터님과 UX개인과제 디벨롭에 대한 면담
튜터님과 디벨롭한것을 같이 보았다.
먼저 나는 튜터님의 피드백중 테스크를 넓게보고 그안에 후속질문을 많이 작성하여 인사이트를 도출하라는 피드백을 해주셨다.
그래서 난 이전에는 테스크의 수행범위를 한정적으로만 했었는데 이번에는 좀더 넓은 범위의 테스크로 다시 개선을 하고 후속질문을 작성을 했다.
튜터님은 일단 테스크의 갯수가 많은것보다 후속질문을 각 케이스의 맞게 경우의 수를 고려하여 리스트를 많이 작성하는것이 좋다고 하셨다
그이유는 일단 랜딩페이지의 역할에서 가장 핵심역할은 가입유도즉 CTA버튼을 눌르게하는것이다.
그러면 사실 테스크로 필요한것은 2가지로 줄여도 가능하다는 말이다.
페이지탐색테스크 -> 가입유도에 대한 테스크
하지만 내가 궁금한것을 물어봤다. 테스크가 1~2개에 몰아넣으면 나중에 후속질문을 할때 까먹을수도 있지않냐는 질문에 튜터님은 그 까먹은 것조차에서 인사이트를 얻을수가 있고, 그 이유는 기억이 안나서 그런건지 관심이 없던건지로 볼수도 있고 기억이 안난다는것은 상대적으로 덜 중요하기에 그런것일수도있고, UX가 애초에 기억하기 힘들게 제작이 되있을수도 있다는것이다.
즉 까먹은것 자체가 UX라서 제작자입장에서 까먹으면 안돼는것을 사용자가 까먹지않게 개선을 하는것도 목적중 하나이다.
만약 제작자가 생각하기에 가격이 중요한데 사용자는 이 정보를 까먹었다면 덜 중요하거나 UX가 그렇게 설계가 되있을수도 있다는소리이다. 그러면 이떄 까먹은 이유를 찾아야한다.
이것을 후속질문으로 인사이트를 뽑아내는것이다.
또한 이렇게 나온 인사이트를 가지고 1차원적으로 바로 문제정의를 하면안됀다. 다양하게 많은 의견을 들어보고 거기서 한번더 다시 생각을 해야 한다
예를 들어서 A라는 사람이 CTA버튼이 너무 색이 이상하다는 인사이트가 나왔다.
그런데 알고보니 이사람은 다크모드를 쓰고있었고 근데 우리는 다크모드를 지원하지않아서 강제로 이사람이 다크모드로 설정을 하다보니 색상이 이상하게나온것이다. 우리는 그걸 예상하지못할수도있다.
그래서 항상 인사이트를 구하고 문제정의를한다음 가설을 가지고 또 다른사람도 같은 문제를 일으키는지 체크를 해야한다.
마지막 질문으로 UT를 개선후와 전을 동일한 사람에게 해도 되냐는 질문에 튜터님은 요약하자면
동일인한테해도되는데 그경우는 모수에따라 달라 모수가많으면해도되지만
적으면적을수록 다른사람한테 해야 의미있는 인사이트가 나온다고 하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 노코드 강의를 수강을 했다. 일단 제일 중요한건 반복반복인것같다.
이것은 외운다고 되는일이 아니고 디자인 피그마를 한것처럼 반복을 해봐야 손에 익히기 때문이다.
일단 오늘 한것들을 다시 한번 강의를 안보고 만들어 봐야겠다.