요즘 내 강의 준비 폴더 옆에는… tailwind.config.js가 같이 있다. 🙃
(이게 맞나 싶지만, 세상은 이미 이렇게 굴러간다.)
AetherRead의 메인 화면으로, 다양한 책을 검색하고 자유롭게 독서할 수 있는 인터페이스를 보여줍니다. "READ WITHOUT LIMITS"라는 문구와 함께 추천 도서가 소개되어 있습니다.
(Kimi Agent 2.5가 만든 웹 페이지)
“도서관 = 먼지”라는 편견을 깨고 싶었다
영어 학습 플랫폼, 특히 “읽기” 중심 제품은 분위기가 대체로 이렇다.
어둡고
무겁고
종이 냄새가 날 것 같은 UI
근데 내가 원하는 건 정반대였다.
읽기는 취미가 아니라 “인지 스포츠”다.
집중력/어휘/문장 구조를 데이터로 트래킹하는 “두뇌 운동”이어야 한다.
그래서 Kimi(Agent 2.5)에게 꽤 또렷한 주문을 던졌다.
이름하여 AetherRead — Glass-Library Aesthetic.
내가 던진 디자인 브리프: “고요한 미래”를 만들어줘
핵심은 세 가지였다.
1) 팔레트: 잉크 + 양피지 + 시냅스
Ink‑Well Blue
#0A0F1E: 밤의 잉크 같은 베이스Parchment White
#F8F9FA: 가독성의 안전지대Synapse Gold
#FFD700: 핵심을 “뇌에 찍어주는” 하이라이트
그리고 보조 액센트:
Neural Teal(진행률/성취감)
Logic Violet(고급 문법·논리 포인트)
재밌는 건, 실제 결과물에서는 골드가 #FFD166처럼 조금 더 부드러운 톤으로 내려앉았다는 점.
오히려 눈이 편해서 “시냅스는 과하게 번쩍이면 피로하다”는 걸 배웠다.
2) 레이아웃: “Stacked Logic”
책장(서가)처럼 모듈 카드가 층층이 쌓이는 구조.
페이지가 아니라 건축물을 보는 느낌.
3) 인터랙션: 단어에 “홀로그램”을 붙여라
단어 hover/tap → Holographic Context
어원
사용 빈도
관련 토론 스니펫
이번 프로토타입은 힌트 UI(“Tap any word for context…”)까지 넣어놔서
‘이 플랫폼이 어디로 갈지’가 아주 선명하게 보였다.
Kimi가 해준 것: “디자인 문서 → 실제 웹앱” 점프
솔직히 나는 “시안” 정도를 기대했다.
근데 Kimi는 거의 디자인 팀 + 프론트 개발자 + 모션 디자이너가 한 몸이었다.
React(Vite) 프로젝트 구성
Tailwind 토큰(색/폰트/그림자) 정리
“유리 카드” 스타일을 공용 컴포넌트급으로 고정
GSAP ScrollTrigger로 핀(pinned) 섹션 + 스크롤 연출 구성
배경 이미지 6장 생성 → 전체 분위기 통일
빌드 과정에서 생긴 잔 오류까지 잡고(여기서 감동) “Website deployed”로 마무리
심지어 중간에 ESLint가 잔소리하는 순간도 있었는데,
Kimi가 “아, 이 변수 안 쓰네?” 하고 바로 수정해서 통과시키는 걸 보고
약간… 사람 팀이랑 일하는 느낌이 들었다. (팀장 Kimi)
내가 제일 만족한 화면: “READ WITHOUT LIMITS”의 설득력
스크린샷을 보면 구도가 딱 잡혀 있다.
상단: AetherRead 로고 + Library / Reading / Analytics / Community
우측 상단: Get Started (딱 필요한 만큼만 존재)
중앙 우측: READ WITHOUT LIMITS (대문자로 뇌에 박힘)
좌측: 유리 카드로 된 Browse the collection + 검색창 + 책 리스트
이 한 장면에서 사용 흐름이 끝난다.
탐색(검색) → 선택(책) → 진입(읽기)
그리고 버튼 색이 진짜 킥이다.
Start Free(골드): “지금 행동”
Explore the library(투명/라인): “조금 더 둘러봐도 돼”
강사 입장에선 이게 너무 좋다.
학습자는 늘 두 종류니까.
바로 뛰어드는 타입
안전지대가 필요한 타입
UI가 그 심리를 정확히 받아준다.
“유리 카드”가 예쁜 게 아니라, ‘규칙’이 좋았다
내가 만족한 포인트는 단순히 “예쁨”이 아니었다.
✅ 1) 유리(Glass)가 시스템으로 고정되어 있다
카드가 늘어나도 스타일이 안 무너진다.
(디자인은 반복에서 망가진다… 이건 진짜다.)
예를 들면 이런 식으로 “glass-card”가 한 번에 통일된다.
.glass-card {
background: rgba(10, 15, 30, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 22px;
backdrop-filter: blur(16px) saturate(115%);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}✅ 2) 스크롤이 “페이지 이동”이 아니라 “장면 전환”이다
Hero → Book Detail → Reading → Discussion → Analytics → Community
이 구간이 핀 고정 + 스크럽으로 이어지면서,
사용자는 ‘넘어간다’가 아니라 ‘진입한다’는 느낌을 받는다.
✅ 3) 읽기 = 데이터라는 철학이 UI에서 보인다
히어로의 짧은 데이터 라인(Vocabulary coverage / Avg session)부터
Analytics 섹션의 카드 구성까지,
“이건 감성 독서 앱이 아니라 훈련 앱이다”라는 메시지가 일관된다.
Kimi를 “디자인 파트너”로 쓸 때 배운 3가지
① “감성”보다 “규칙”을 주면 결과가 흔들리지 않는다
색 hex
폰트 우선순위
레이아웃 규칙(그리드/스택)
인터랙션 트리거(hover/tap)
지표 이름(대시보드 항목)
이런 규칙 기반 브리프가 Kimi를 확실히 똑똑하게 만든다.
② 에셋(이미지)이 제품의 50%다
배경 이미지 6장만으로 “브랜드”가 생긴다.
코드는 그 다음이고, 첫인상은 이미지가 만든다.
③ AI가 만든 건 코드보다 “속도”였다
가장 큰 만족은 “완성도”가 아니라,
다음 단계로 넘어갈 수 있는 속도였다.
디자인이 있는 MVP가 생기면
이제 남는 건 “기능 구현”이 아니라 검증이다.
마무리: UI는 결국 “건네는 손”이다
나는 강의실에서 늘 “설명”보다 건네는 방식을 고민한다.
사과도 건네지는 순간 언어가 되듯, UI도 사용자의 손에 닿는 순간 학습 경험이 된다.
AetherRead는 이걸 아주 세련되게 보여줬다.
읽기를 “먼지”에서 꺼내
“몰입 + 데이터”의 자리로 옮겨놓는 것
그리고 Kimi는 그걸
내가 상상한 것보다 훨씬 빠르게, 그리고 꽤 일관되게 만들어줬다.
다음 목표는 명확하다.
“이 유리 도서관에 진짜 학습 엔진을 얹는 것.” 🌙
— 달의이성(reasonofmoon) | 영어 강사 · AI 도구 개발자
#Kimi #AetherRead #GlassLibrary #웹디자인 #GSAP #Tailwind #에듀테크 #사이드프로젝트 #UIUX
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.