프로덕트 디자이너 본캠프 WIL 7주차
- FACTS(사실, 객관) :이번 일주일 동안 있었던 일, 내가 한 일
1.노코드 녹강 1~3주차 수강
웹플로우와 에어테이블사용법을 배웠다.
배운것으로 About 페이지 및 블로그 홈 페이지, 블로그 게시글 페이지를 만들었다.
2.퍼블리싱 실시간 강의 수강
HTML와 CSS 그리고 트랜지션 애니메이션 및 반응형 디자인을 만드는법을 배웠다.
배운것으로 간단하게 자기소개페이지를 만들어보았다.
3.디자인 카타 ( OS별 UI차이 )
OS별 차이 ( 안드로이드와 IOS) 별 UI차이를 리서치하고 발표를 하였다.
그중 나는 제스처에 대해 조사를 하였다.
4.UX개인과제 피드백에 대한 디벨롭 및 디벨롭에 대한 면담
UX개인과제 피드백에 대해 디벨롭을 하였고 사용성테스트의 목적과 후속질문리스트를 디벨롭하였고 그것에 대해 다시 면담을 받았다.
- FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
디자인과 비슷하면서도 아니고 어려우면서도 할만하다.
- FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
1.노코드 녹강 1~3주차 수강
먼저 1주차에서는 웹플로우의 기본적인 구성요소와 기본구조를 배웠으며,
페이지를 만들기 위한 과정을 배웠다. 먼저 전체로 봤을때
1.전체 구조 잡기
2.디자인 입히기
3.유저 인터렉션 추가하기
4.반응형 디자인하기
이런 순으로 되있으며, 1~3주차 모두 이런식으로 페이지들을 제작하였다.
섹션마다 구조를 잡는 법을 배웠으며, 여기서 Flex와 Grid를 사용하여 각 섹션 구조를 잡고 그안에 내용을 채워넣는법을 배웠다.
유저 인터렉션은 피그마와 비슷하다. 만약 호버상태에대한 인터렉션을 할려면 해당요소에 호버클래스를 넣은다음 디자인을 변경하면 적용이 된다.
반응형 디자인에서 브레이크 포인트와 각 반응형 디자인을 할때 3가지 특징을 배웠다.
1.브레이크 포인트에서 바꾼 변경은 아래 포인트까지 적용이된다.
2.역방향에서 순방향으로는 적용이 안된다.
3.만약 중간단계에서 바꾼다면 그 포인트부터 아래는 1번의 결과가 적용이 안된다
2주차에서는 에어테이블 사용법과 웹플로우 콜렉션과 에어테이블연동하는법 및 웹플로우 콜렉션 리스트 사용법을 알았다.
3주차도 1~2주차와 동일하게 페이지를 만드는과정을 배웠으며, 에이테이블의 오토메이션기능과 그에 따른 고객응대 자동화및 GA4에 대한것을 배웠다.
2.퍼블리싱 실시간 강의 수강
HTML.CSS를 배웠다.
HTML은 뼈대이며 CSS는 그것을 꾸미는 옷과 같다. 마지막으로 트랜잭션이나 애니메이션은 꾸민옷을 입은사람이 행동을 하는것으로 쉽게 이해했다.
HTML의 태그에 대한 개념을 배웠으며,
1.항상 < > 로 감싸져 있어야 함.
2.이미지 태그는 종료 태그가 없다.
3.태그에 속성을 넣을수있다.
4.태그는 다른 태그안에 들어가거나 밖에 존재할수있다.
마지막으로 주로 쓰는 태그들을 하나하나 써보며 배웠다.
다음 CSS의 쓰는방식을 배웠다. 총3가지로
1.각 태그안에 직접 스타일을 쓰기
2.<style>태그를 이용해서 HTML파일의 <head>태그안에 스타일을 쓰기
3.별도의 .css 파일을 만들어서 링크로 연결하기
이렇게 사용을 할수가 있는것을 배웠다.
CSS에 구조에 대해서도 배웠다.
먼저 CSS의 전체구조는 rule set이라고 부른다고 한다.
구조는 p { color : red; } 이런식으로 되어있고
HTML이 <> 로 감싸는것과 비슷하게 {}로 감싼다
앞에 p는 선택자인데 이 선택자의 종류도 배웠다.
1.요소 선택자
앞에서 배운 HTML태그중에서 선택한다
2.클래스 선택자
주로 <div>로 묶은 것들에 클래스를 걸어 한꺼번에 꾸밀때 사용한다.
3.아이디 선택자
원하는 특정 요소 하나만 꾸밀때 사용한다.
이런식으로 3가지가 있으며 선택자에도 우선순위가 있다.
1. 인라인 스타일 (`style` 속성으로 직접 지정된 스타일) ( 아까 위에서 말한 CSS를 입히는 방식중 1번째의 방식이다)
2. 아이디 선택자*(`#id`)
3. 클래스, 속성 선택자, 가상 클래스 (`.class`, `[attr]`, `:hover`)
4. 태그 선택자, 가상 요소 (`div`, `p`, `::before`)
5. 전체 선택자(*)은 가장 낮은 우선순위
다음 CSS에도 컴포넌트의 의사상태와 비슷한 기능이 있다.
가상 클래스로 특별한 상태일 때만 작동하는 CSS스타일이다.
1. :hover
마우스를 올렸을때 작동
2. :focus
클릭하거나, 입력창에 포커스가 맞춰질 때 작동
3. :active
버튼을 누르고있는 동안 작동
다음 레이아웃으로 HTML요소는 기본적으로 박스 모양으로 CSS레이아웃도 박스 모델을 기반으로 하고있으며, 개념으로는 익숙한 패딩,보더,마진,width,backgroung-color,color,text-align이 있다. 개념은 피그마에서 사용한 것과 비슷하다.
마지막으로 디스플레이 속성과 포지셔닝 속성을 배웠다.
디스플레이 속성
HTML요소가 페이지에서 어떻게 배치되고 보여질지를 결정하는 속성이다.
1.block
요소가 블록처럼 동작하여 한줄 전체를 차지하여 다른 요소는 다음줄로 밀려나게됨
2.inline
요소가 인라인처럼 동작하여 내용 크기만큼 공간차지하고 다른요소와 같은줄에 배치됨
3.inline-block
이름처럼 인라인처럼 보이지만 블록처럼 동작함 그래서 블록 요소처럼 크기와 여백(padding, margin)을 가질 수 있다.
4.none
요소를 숨겨 화면에 보이지않음
포지셔닝 속성
요소가 페이지 안에서 어떻게 배치될지를 결정하는 속성이다.
디자인에서도 익숙한 개념이다
1.position:static
기본값이다. HTML문서의 순서대로 배치됨
2.position: relative
요소가 기본 위치에 있고, 상하좌우 요소를 사용해 기준 위치에서 이동한다.
3.position: absolute
바깥태그가body일경우 문서의 처음부터 배치가 되지만
그외 바깥태그의 포지션이 위에 포지션중 하나라면 그것을 기준으로 위치가 잡힘
마지막으로 Grid와 Flex 트랜지션 애니메이션을 배웠으며, 반응형 디자인을 하는 방법을배웠다.
먼저 Grid와 Flex는 행과 열을 다룰때 중요한 기능이며 트랜지션과 애니메이션은 유저인터렉션에 대한 기능이다.
이때 Grid를 사용하여 섹션을 나누려는중에 강의에 안나ㅍ온 더 편한 방법이 있을까 찾아보았다.
바로 grid-template-areas이다.
이것은 grid-column ,grid-row보다 가독성과 직관성이 좋고, 배치및 위치 설정이 편리하다고 자주 사용이 된다고 한다.
이렇게 퍼블리싱 강의를 다 듣고 기본적인 자기소개페이지를 만들어보며 복습을 하였다.
3.디자인 카타 ( OS별 UI차이 )
제스처를 리서치했으며, 그중 IOS와 안드로이드의 제스처 명칭 차이점을 알수있었다.
대채로 명칭과 그에 따른 동작이 비슷한것이 많았지만
iOS는 회전과 줌을 세분화하여 정밀한 조작을 지원하며,
안드로이드는 더 유연한 탐색 및 이동 기능을 제공하는것을 알았다.
이러한 제스처의 명칭을 배우는 이유는 개발자와 소통을 위해 배우는것인것 같았다.
그외 해상도와 사이즈에서는 물리적 해상도 ,논리적 해상도를 고려하여 작업을 해야하는것
기본서체와 타이포그래피 체계에서는 텍스트가 들어갈 구역에 따른 스타일 이름이 OS별마다 어떤지
UI컴포넌트에서도 OS별마다 명칭이 다르다는것과 플랫폼별 특징을 이해하고, 각 가이드라인에 맞는 디자인 체계를 활용해 최적화된 사용자 경험을 제공해야 한다는것을 배웠다.
4.UX개인과제 피드백에 대한 디벨롭 및 디벨롭에 대한 면담
랜딩페이지에 핵심목적을 못정한것같으며 ,사용성테스트에 대한 피드백으로 테스크가 너무 세분화하여 전체적인 인사이트를 얻기가 어렵고 후속질문에서 좀더 인사이트를 뽑는게 좋다는 피드백으로 개선을 해보았다. 먼저 랜딩페이지의 핵심목적을 정한후 테스크를 핵심목적과 맞게 각각 정한후 후속질문을 뽑고 다시 면담을 받았다.
면담에서 또 튜터님의 피드백을 받고 2차 개선을 하였다.
핵심목적을 정한것은 좋지만 그에 우선순위를 정한후 가장 핵심이 목적을 테스크를 만들고 그 전에 정보탐색에 대한 테스크를 하는것이 좋다고 하였다.
즉 사실 테스크는 갯수가 그렇게 많지는 않아도 그안 후속질문에서 좀더 다양한 케이스에 대한 질문리스트를 만들어서
전체적으로 인사이트를 뽑는것도 좋다고 하셨다.
결과적으로, 현재 나의 상태는 어떻게 되었지?
웹플로우를 배웠지만 아직은 웹플로우를 사용하여 페이지를 만드는데 시간이 조금 걸린다.
더욱 인사이트를 얻을수있는 사용성테스트목적 테스크 후속질문을 구성하는 법을 배웠다.
퍼블리싱 강의를 들었지만 아직은 익숙하지가 않다.
이 상태에서 다음 일주일을 더 잘 보내려면 무엇이 필요할까?
주말에 웹플로우 강의를 2회차 듣고 결과물만 보고 그대로 만들수있을정도로 해야겠다.
퍼블리싱 강의 녹화본을 보고 한번더 따라 만들어봐야겠다.
사용성테스크 목적과 그에맞는 테스크 후속질문을 한번더 만들어보며 공부해야겠다.
'내일배움캠프 > 본캠프 WIL' 카테고리의 다른 글
| WIL 9주차 (UX 집중반) (4) | 2024.12.27 |
|---|---|
| WIL 8주차 (서비스랜딩페이지 개인과제 끝) (3) | 2024.12.20 |
| WIL 6주차 ( UX팀 프로젝트 끝 ) (3) | 2024.12.06 |
| WIL 5주차 (1) | 2024.11.29 |
| WIL 4주차 (2) | 2024.11.22 |