Color Orbit
조화 팔레트를 궤도로 탐색하는 인터랙티브 색상 탐색기
프로젝트 정보
진행 날짜2026.07.09
역할기획 · UI 구조 설계 · Three.js 구현
핵심 키워드
소개
프론트엔드 디자인을 공부하며 색상 조합을 찾는 과정을 더 쉽고 재미있게 만들고 싶었습니다. 중심 색을 선택하면 행성처럼 주변 색상이 생성되고, 궤도를 탐색하며 팔레트를 발견할 수 있는 인터랙티브 색상 도구로 기획했습니다.
결과 미리보기
핵심 기능
- 중심 색 기반 팔레트 생성
- 실시간 인터랙티브 우주
- 팔레트 저장
- CSS 코드 복사
구현 방식
colord 기반 조화 색상 생성과 Three.js WebGL 장면을 연결하고, 색상 선택·카메라 회전·줌·저장·CSS 내보내기 기능을 한 화면에 배치
구현 결과
5가지 조화 규칙·실시간 3D 궤도·팔레트 저장·CSS 변수 복사·행성 색상 복사 연결
배운 점
우주라는 표현을 단순한 장식으로 사용하지 않고, 중심 색과 주변 색의 관계를 행성과 궤도로 보여주면서 색상 탐색 과정 자체가 하나의 인터랙션이 되도록 설계했습니다.