TIL (Today I learned)
오늘 나는 무엇을 했나요
-퍼블리싱 실시간 강의 (마무리)
-디자인 카타 OS별 UI차이 리서치
오늘은 어떤 것을 배웠나요
1. 퍼블리싱 실시간 강의
오늘은 퍼블리싱 마지막 강의다.
1.Grid와 flex로 행, 열로 요소를 정렬하는 방법
2.트랜지션과 애니메이션으로 이벤트발생하기
3.반응형 디자인을 이용하여 이것을 grid와 flexbox를 이용하여 반응형 레이아웃 만들기를 배웠다.
1-1. flex
flex는 1차원적으로 그저 행과 열로 요소를 정렬하는방법이다.
이때 Flex에는 줄바꿈 기능이있는데
요소가 컨테이너를 벗어날때 1줄에서 2줄로 줄을 바꾸는 등의 기능이 가능하다.
1-2.Grid
Grid는 2차원적으로 표에 요소를 하나하나 배치하는것처럼 좀더 디테일하게 행열을 정렬할수있다.
2-1 트랜지션
트랜지션은 중간값이 없이 시작과 끝만 볼수가있다.
또한 트리거가 존재해야 이벤트를 발생시킬수가 있다.
2-2 애니메이션
트랜지션과 달리 트리거 없이 기능이 가능하며, 중간에 키프레임이라는 기능으로
중간값도 설정을 할 수가있다.
3 반응형 디자인
에어비엔비와 같이 너비에 따라 웹디자인이 바뀌는것을 반응형 디자인이라고한다.
즉 화면 크기에 맞게 박스(레이아웃)의 배치가 바뀌는것이다.
반응형 디자인이라는 기능이 따로 있는것은 아니고
이것은 미디어 쿼리와 flex,grid를 이용하여 반응형 레이아웃을 만들수가있는것이다.
강의를 듣고 자기소개페이지를 꾸미는중에
grid-column ,grid-row 를 사용하던중 더 편한 방법이 없을까 검색을 해봤다.
바로 grid-template-areas이다.
이것은 grid-column ,grid-row보다 가독성과 직관성이 좋고, 배치및 위치 설정이 편리하다고 자주 사용이 된다고 한다.
바로 써봤다.
먼저 주황색 글씨처럼 배치상태를 생각하며 작성하고
header 클래스와 sidebar클래스 content클래스를 따로 작성후 스타일을 준다음
각각의 컨텐츠를 <div class="클래스이름"> </div>으로 감싼다.
그다음 전체적으로 grid-cotainer클래스로 다시 한번 감싸면
이런식으로 grid-column ,grid-row 와 같은 결과가 나온다.
2. 디자인 카타 OS별 UI차이 리서치
리서치를 하는중 제스처 주의사항을 추가로 조사하면서 배웠다.
제스처 주의사항
제스처 충돌 방지
특정 OS에서 이미 할당된 시스템 제스처와 충돌하지 않도록 주의해야함.
예: iOS의 화면 하단에서 위로 스와이프하면 홈으로 이동.
일관성 유지
같은 OS 내에서는 제스처의 동작을 일관되게 유지하여 사용자가 혼란을
느끼지 않도록 해야한다.
사용자 경험과 직관성
제스처의 직관성: 사용자가 한 번에 이해할 수 있도록 설계하기
복잡한 동작이나 비일관적인 제스처는 혼란을 유발할 수가 있기 때문.
시각적 피드백 제공: 제스처 수행 시 화면에서 즉각적인 피드백을 제공하여 동작 성공 여부를
알린다.
접근성 고려
대체 제스처 제공: 제스처 수행이 어려운 사용자를 위해 음성및, 버튼이나 메뉴 형태의 대안 제공.
일상적인 동작과의 차별화
사용자가 실수로 제스처를 수행하지 않도록 동작을 명확히 구분.
예: 화면을 단순히 터치하는 것과 드래그를 구별.
환경 요소 고려
한 손 사용: 스마트폰 크기가 점점 커짐에 따라 한 손으로도 사용 가능한 제스처를 설계해야
한다.
좌우 손잡이 차이: 왼손잡이와 오른손잡이 사용자 모두 편하게 사용할 수 있도록 제스처
설계를 유연하게 해야 한다.
ex) Gmail의 스와이프 양방향으로 보관기능 지원
유연성
취소와 되돌리기: 실수로 수행한 동작을 취소하거나 되돌릴 수 있는 기능 제공.
ex) Gmail의 스와이프로 보관후 실행취소 기능
이때 환경 요소 고려와 유연성은 직접 Gmail에 들어가 확인을 해보았다.
아래처럼 Gmail은 보관기능을 스와이프로 할수있는데 오른쪽 왼쪽 둘다 스와이프로 보관이 가능한것을 볼 수가있었다.
다음으로 Gmail의 스와이프로 보관후 실행취소 기능도 있는것을 볼 수가 있었다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 퍼블리싱 강의 마지막날이었다.
HTML CSS를 배우면서 아직까지도 쉽지가 않다.
결국 이것도 여러 요소를 사용해보면서 반복연습을 하는것이 중요한것같다.
시간이 날때 웹사이트의 소스코드를 개발자모드로 봐 어떻게 구현되었는지 분석을 하면서 연습을 해야할것같다.