(DAY50) 웹 구조 기초 마무리

 

안녕하세요 :)

오늘은 저번주와 이어서 HTML, CSS기초를 공부했습니다.

---

 

 

✏️오늘의 학습

CSS 선택자에 따른 스타일 넣기

실습) Contact Page UI 그려보기 

 

 

📖오늘의 핵심

CSS 선택자 이해하기

 

 

 

🧠오늘의 마인드셋

당신은 뒤쳐지지 않았다.

20대는 가능성의 10년이라고 생각하며 잔뜩 경험하며 혼란스러워하기 (그래도 괜찮음)

나를 사회적 시계의 개념에 끼워맞추지 말기.

 

 

 

 

📝수업 내용 메모장👇🏻

📝수업 내용 메모장

 

 

 position 설정 알아보기

 

 

선택자 차이 알아보기

 

 

 틱스트, 배경 스크롤 스타일

 

 

font-size 단위 알아보기

px, rem, em

 

 

 

 

 

실습 ) Contact Page UI 그려보기 

 

- 여러분이 평소 사용하는 서비스의 고객지원은 어떻게 이루어지고있나요?
- 고객 지원? 구매 문의? (애플서비스의) 예약 일정 조율?
- 전체 페이지 형태인가요, 아니면 단순한 폼(Form)만 있는 구성인가요?
- 하나의 구체적인 상황을 떠올리고, 그 상황에서 가장 필요한 핵심 기능이 무엇일지 생각해보세요.
- 콘택트 페이지는 웹사이트에서 가장 많이 방문되는 페이지 중 하나이기 때문에, 가장 중요한 정보는 반드시 포함하되, 사용자가 길을 잃지 않도록 과도한 정보는 피하는 것이 중요합니다.

 

 

 

01) 고객센터 살펴보기

리서치한 내용

네이버 고객센터 특징

- 자주 찾는 도움말을 카드UI로 상단에 배치

- '스마트봇 문의하기' 플로팅 버튼 존재

- 스마트봇 문의 : 궁금한 서비스 아이콘 클릭 → naver톡톡(채팅)으로 넘어감

 

 

리서치 2

 

카카오 고객센터 특징

-상단에 서비스별 고객센터 아이콘을 크게 노출

-자주 묻는 질문을 기능별 질문카드 UI로 제공

-서비스(ex 카카오톡)를 상단질문에서 페이지 이동 없이 드롭다운으로 변경 가능

 

 

 

 

실습 결과물

 

 

 

💡 어도비 고객센터가 늘 불편했던 경험이 있었는데 오늘 과제를 보자마자 어도비가 딱 떠올랐다. 상담원 문의를 하고 싶은데 어도비 상담원 연결은 꽁꽁 숨겨져 있다ㅋㅋㅋㅋㅋ 그래서 레퍼런스로 본 네이버, 카카오 고객센터 web을 보고 참고해서 어도비 고객센터 리디자인을 진행해봤다. 매번 앱 UI 그리기 미션으로 진행하다가, 오늘 거의 처음으로 web을 그려봤는데 화면 비율만 바뀌었을 뿐인데 작업이 낯설었다...😣