오늘 한일
-코딩 4일차 실시간 강의
-코딩 4일차 강의 정리, 실습 진행
-코딩 3일차 강의 복습
내일 할일
-코딩 5일차 실시간 강의
-코딩 5일차 강의 복습 및 정리, 실습 진행[코딩 4일차] ⭐기본 코딩 Next Level Challenge
Top Button
Top button(탑 버튼)은 주로 웹사이트에서 사용자가 페이지의 하단에 있거나 긴 페이지를 스크롤하여 내려갔을 때, 클릭하면 페이지의 최상단으로 빠르게 이동할 수 있도록 만들어 놓은 버튼
장점
- 편의성 증대: 긴 페이지를 한 번에 최상단으로 이동하여 사용자에게 편의를 제공
- 사용자 경험(UX) 향상: 사용자의 페이지 탐색 효율성 증가
- 시간 절약: 긴 스크롤을 하지 않아도 되어 빠르게 원하는 지점으로 이동 가능
Mouse Cursor
: 화면 위에서 마우스의 위치를 시각적으로 나타내는 아이콘이나 포인터
- 사용자가 마우스를 움직이면 이 커서가 함께 이동하며 현재 위치를 표시하고 사용 가능한 동작을 안내
장점
- 위치 안내 : 사용자의 마우스 위치를 화면에서 보여줌
- 인터랙션 안내 : 클릭 가능한 요소 위에서 손가락 모양이나 링크 모양으로 변하여 클릭할 수 있음을 나타냄
- 상태 피드백 제공 : 작업 처리 중일 때는 로딩 상태(스피너나 모래시계)로 변경되어 시스템 상태를 사용자에게 알려줌
Lottie(로띠)
:JSON 기반의 벡터 애니메이션 파일 형식으로 After Effects에서 만든 애니메이션을 Bodymovin 플러그인을 통해 JSON으로 내보내고, 이걸 웹, iOS, Android, React Native, Windows 등 다양한 플랫폼에서 실시간 렌더링할 수 있게 해 주는 기술
장점
- 초경량 : GIF, MP4에 비해 훨씬 작은 파일 크기. 예를 들어 GIF 128 KB라면 Lottie JSON은 약 31 KB, dotLottie였으면 8 KB 정도로 압축 가능
- 무한 확장성 : 벡터 기반이라 해상도에 상관없이 선명하게 확대/축소 가능
- 크로스 플랫폼 지원 : 하나의 JSON 파일로 iOS, Android, 웹, React Native 같은 다양한 플랫폼에서 똑같이 작동
- 상호작용 가능 :벡터기반의 코드베이스로 클릭, 스크롤 등 사용자 입력에 반응하도록 애니메이션을 제어 가능
- 디자이너 → 개발자 핸드오프 용이 : JSON 파일로 바로 Export가 가능하며, 개발자는 Lottie 라이브러리로 바로 렌더링만 하면 사용 가능
- 무료 에셋 : 다양한 무료 에셋이 많아서 MVP에 사용하기 용이
Spline(스플라인)이란?
:웹 기반 3D 디자인 툴로, 디자이너가 코드 없이 인터랙티브한 3D 콘텐츠를 만들 수 있게 해주는 도구
- 피그마, 프레이머, 비전 프로, 앱 빌드 등 다양한 플랫폼에 연동이 가능
특징
- 실시간 협업 지원 (Figma처럼)
- 3D 모델링, 머티리얼 설정, 애니메이션, 인터랙션 설정 가능
- 웹, 앱, 프레이머(Framer) 등에 내장 가능 (embed 형태 또는 export)
- React/Three.js 기반으로 코딩 없이도 프로토타입 수준의 3D 앱 구현 가능
사용 예시
- 3D 제품 뷰어 / 랜딩페이지 히어로 섹션 / 인터랙티브 버튼
- 포트폴리오, 광고, NFT 플랫폼 등에서 자주 활용됨
장점
- 간소화된 3D 툴 : 모델링, 머티리얼 설정 등 블렌더, 시포디보다 쉽고 편리
- 크로스 플랫폼 지원 : React/Three.js 기반으로 코딩 없이도 프로토타입 수준의 3D 앱 구현이 가능, Web, App, Figma, Framer, Vision Pro 등 다양한 매체에 연동이 가능
- 무료 에셋 : 다양한 무료 에셋이 많아서 MVP에 사용하기 좋음
- AI 기능 : 베타 수준이긴 하지만, AI를 통한 모델링도 가능
인터랙션 디자인(Interaction Design, IxD)이란?
:사용자가 제품을 쉽고 즐겁게 사용할 수 있게 만드는 인터페이스의 동작 설계를 의미
- 사용자가 클릭, 스크롤, 탭, 제스처, 마우스오버 등을 했을 때, 화면이나 시스템이 이에 반응하는 것
중요성
- 피드백 (Feedback) – 사용자 행동에 시스템이 반응 (버튼 누를 때 색 변화 등)
- 컨트롤 (Control) – 사용자가 조작할 수 있는 느낌 제공
- 가시성 (Visibility) – 어떤 동작이 가능한지 알려줌
- 일관성 (Consistency) – 이전 행동과 결과의 예측 가능성
- 내비게이션 (Navigation) – 쉽게 돌아가고, 어디에 있는지 알 수 있게 설계
CMS
CMS (Content Management System)는 전문적인 코딩 없이도 웹 콘텐츠를 생성, 수정, 배포, 관리할 수 있게 도와주는 시스템 또는 플랫폼
- 디자이너, 기획자, 마케터처럼 비개발자도 콘텐츠를 쉽게 다룰 수 있도록 해주는 도구
📌실습내용
하나씩 구현하는게 재밌기도 하면서 한편으론 이걸 언제 다 습득하지,,?라는 걱정이 드는,,
UXUI 도전!!!