TIL (Today I learned)
오늘 나는 무엇을 했나요
-퍼블리싱 실시간 강의
-디자인 카타 OS별 UI차이 리서치
-UX개인과제 디벨롭
오늘은 어떤 것을 배웠나요
1. 퍼블리싱 실시간 강의
오늘은 CSS에 대해 배웠다. 그전에 어제 배운 HTML에 대한 간략하게 설명을 하고 넘어가겠다.
먼저 HTML은 웹페이지의 뼈대이다. 예시로는 제목, 문단, 이미지, 링크 등 배치를 구성할수있다,
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 마크업 언어이다.
쉽게말해 우리는 이해하는 글과 그림을 컴퓨터는 이해하지못하므로 그것을 알려주는 글쓰기 방식이다.
HTML의 역할은 블록을 쌓는것처럼 웹 페이지를 구조화하고 브라우저에게 그 구조를 알려준다.
기본 구조
HTML의 기본 태그
1.항상 < > 로 감싸져 있어야 함.
예시 ) <h1>이건 큰 제목이에요!</h1>
2.이미지 태그는 종료 태그가 없다.
이미지는 내용 대신 속성으로 정보를 넣기 때문
예시 ) <img src="puppy.jpg" alt="강아지 사진">
3.태그에 속성을 넣을수있다.
<a href="https://example.com">여기를 눌러 보세요!</a>
4.태그는 다른 태그안에 들어가거나 밖에 존재할수있다.
<더바깥태그>
<바깥태그>
<안쪽태그>내용</안쪽태그>
</바깥태그>
</더바깥태그>
주로 쓰는 태그들
1.제목 태그 <h1> ~ <h6>
2.문단 태그 <p>
3.이미지 태그<img>
4.링크 태그<a>
5.리스트 태그 <uI>,<oI>,<Ii>
oI은 순서로 나오는 리스트
lI는 순서없이 나오는 리스트
6.테이블 태그 <table>,<tr>,<td>,<th>
tr에서 r은 row이다
7.폼태그 <form>, <input>, <textarea>, <button>
form은 틀, input은 간단한 입력, textarea은 여러줄, button은 버튼을 만들수있다.
2.CSS
CSS은 간단하게 말하면 HTML에서 만든 뼈대에 디자인을 입히는것이다.
그방식은 3가지정도가 있다
1.각 태그안에 직접 스타일을 쓰기
2.<style>태그를 이용해서 HTML파일의 <head>태그안에 스타일을 쓰기
3.별도의 .css 파일을 만들어서 링크로 연결하기
이중 첫번째는 후에 수정도 어렵기 때문에 잘 사용하지않고 현업에서는 3번째를 많이사용하지만
이번에는 그렇게 많은 작업이 아니기때문에 2번방식으로 진행이 되었다.
CSS의 전체구조는 rule set이라고 부른다.
여기서 P는 선택자로 누굴 꾸밀지 선택하는 이름표이다.
그다음 그안에 바꿀 속성과 그 속성값을 정한다.
여기서는 <p>의 속성중 color를 red로 스타일을 준 모습이다.
css도 HTML와 같이 규칙이있다.
HTML은 <>로 감싸지만 CSS는 { }로 감싸야한다.
선택자의 종류
1.요소 선택자
앞에서 배운 HTML태그중에서 선택한다
2.클래스 선택자
주로 <div>로 묶은 것들에 클래스를 걸어 한꺼번에 꾸밀때 사용한다.
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레이아웃도 박스 모델을 기반으로 하고있다.
디자인에서 자주 만나는 개념들이다.
1.padding
내용과 테두리 사이의 간격
2.border
테두리
3.margin
박스와 박스 사이의 간격
이때 마진이 겹치는 상황이있는데 이것은 대부분 상하마진이 서로 만나게 되는 경우로 이때는 더 큰 마진값이 적용이 되는데 이것을 마진 상쇄라고 함
4.width
한 요소의 너비
5.backbgroung-color
요소의 콘텐츠와 padding의 배경색
6.color
한 요소의 콘텐츠 색
7.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일경우 문서의 처음부터 배치가 되지만
그외 바깥태그의 포지션이 위에 포지션중 하나라면 그것을 기준으로 위치가 잡힘
4.fixed
글쓰기UI와 같이 정해놓은 위치에 고정이 됨
CSS의 속성들을 사용하여 제작해본 웹페이지
2. 디자인 카타 OS별 UI차이 리서치
카타에서 제스처를 리서치하고
그중에 스와이프에대한 os별 차이에 대한 주의점을 배웠다.
IOS 와 안드로이드별 제스처의 명칭및 동작차이를 조사하는중
스와이프라는 제스처에 대한 두 OS별 동작이 다른것을 알았다.
둘다 스와이프는 왼쪽에서 오른쪽으로 동작하지만
IOS는 뒤로 돌아가기 기능이 되고 안드로이드는 탭 간 전환 기능이 된다.
이처럼 제스처의 이름이 같지만 동작이 다른 경우가 있기 때문에 OS별 제스처를 고려를 하면서 작업을 해야한다.
그리고 제스처는 IOS와 안드로이드 둘다 종류가 많지만
공통점으로는 Tap, Swipe, Drag와 같은 기본적인 제스처는 두 플랫폼 모두에서 제공되며,
이것은 터치스크린 기반 기기에서 보편적인 상호작용 방식으로 사용자가 직관적으로
이해하고 사용할 수 있다.
차이점으로는
안드로이드의 Compound Gestures 를 IOS는 zoom과 Rotate로 구분하고,
안드로이드의 Scroll and Pan 와 Swipe 를 구분하였지만 IOS에서는 두 제스처를 Swipe로 처리한 모습을 알수있었다.
이러한 제스처들의 차이는 각 플랫폼의 사용자 경험과 인터페이스 설계에 있어
중요한 차이를 만들어내고
iOS는 회전과 줌을 세분화하여 정밀한 조작을 지원하며,
안드로이드는 더 유연한 탐색 및 이동 기능을 제공하는것 같다.
3. UX개인과제 디벨롭
내가 개선해야 할점
1. 랜딩페이지 정의 및 랜딩페이지가 하는 궁극적인 역할 분석을 정확하게 하기
2. 테스크를 넓은 관점으로 구성하고 각각의 후속질문으로 파고들어 깊은 인사이트를 발견하기
일단 부트캠프의 랜딩페이지의 역할을 다시 생각했다.
1. 첫인상 전달
랜딩페이지는 부트캠프의 목표, 가치를 명확히 전달하며, 잠재 고객에게 긍정적인 첫인상을 줍니다.
브랜드 이미지와 신뢰를 형성하는 역할을 합니다.
2. 정보 제공
부트캠프의 커리큘럼, 강사, 일정, 장소, 가격 및 혜택 등 참가자가 알아야 할 핵심 정보를 간결하게 제공합니다.
질문이나 궁금증을 최소화해 결정 과정을 빠르게 돕습니다.
3. 참여 유도
명확하고 설득력 있는 Call to Action(CTA)을 통해 참가자 등록, 상담 신청, 이메일 구독 등 특정 행동을 유도합니다.
예: "지금 등록하기", "무료 상담 예약", "커리큘럼 다운로드".
4. 신뢰 형성
졸업생 후기, 성공 사례, 인증 로고, 미디어 언급 등을 통해 프로그램의 신뢰도를 강화합니다.
부트캠프를 통해 얻을 수 있는 실질적인 이점을 강조합니다.
6. 의사결정 지원
심플한 디자인, 명확한 메시지, 사용자 친화적인 경험(UX)을 제공하여 방문자가 페이지를 빠르게 이해하고 행동으로 옮기도록 돕습니다.
이 역할을 기반으로 테스크를 만들어내보았다.
이런식으로 목적, 배경, 테스크내용, 후속질문으로 시나리오를 작성중이고,
총 5가지의 테스크로 작성을 하였다.
솔루션 전에 테스크에서는 너무 내용이 세분화되어있어 그외에 랜딩페이지 내에 인사이트를 얻지 못했었다
그래서 이번에는 좀더 랜딩페이지의 역할을 생각하고 그 역할에 대한 인사이트를 얻기 위해 좀더 넓게 테스크를 작성했다.
이때 튜터님의 피드백으로 테스크를 넓게 잡은후 후속질문으로 깊이있는 인사이트를 얻으라는 말씀으로 후속질문이 첫번째 테스크 기준 2가지가 있지만 그안에 계속 꼬리에 꼬리를 무는 식으로 사용자의 마음속깊은곳에 있는 인사이트를 얻는 방식으로 개선하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘도 UX개인과제 디벨롭을 하는데 테스크를 작성중에 문제를 겪었다.
만약
신뢰성에 대한 테스크와
사용자에게 중요한 정보에 대한 테스크를 나누어 했을때
첫번째 테스크는 " 정말 이 부트캠프가 믿을 만한지 판단할 근거를 찾아보세요. ." 이고
두번째 테스크가 " 결정에 필요한 정보를 찾아보면서 페이지를 탐색해 주세요.”일때
결국 두번째 테스크안에 첫번째 테스크의 인사이트가 포함이 되있는 경우도 있을텐데 이럴땐 어떻게 해야할지 고민이됬다.
일단 혼자 생각해본결과
합쳤을때 장단점
장점은 두 테스크를 합친다면 사용자의 탐색 과정을 더 자연스럽게 관찰할 수있고 시간도 절약을 할수 있을것이다.
단점은 그만큼 사용자가 한번에 많은 과정을 봐야하고 그만큼 후속질문을 받을때 잊어버리는 정보가 있을수도있다.
분리했을때 장단점
장점은 각각 독립적으로 문제를 파악할수있기 때문에 더 정확한 문제파악을 할수있다.
단점은 그만큼 인사이트가 중복되고 시간이 많이 걸릴수가있다.
했을때
나는 일단 분리하는쪽으로 하였다
그 이유는 일단 테스크를 나눠 주어 사용자가 테스크마다 몰입할 수 있게 할수있고, 신뢰성이 결정에 필요하지 않는 사용자도 있을수도있기때문에 분리하는쪽으로 하였다.