Making of LOADING
by injeong
01Why
대 AI 시대에 AI 딸깍으로 찾아보고 그 지식을 안다고 착각하게 되는 것 같았다. AI 도움은 받되, 내 눈으로 제대로 보고 고쳐 쓰면서 내 것으로 만들고 싶었다. 내가 기획하고 정리한 글들을 남들에게 예쁘게 보여 주고도 싶었다.
알아야 할 것이 너무 많아졌다. 한 놈만 알아서는 안 된다. 일례로, 2026년 호르무즈 해협이 막히자 오른 건 기름값만이 아니었다. 정유와 석유화학, 해운은 물론 반도체와 자동차까지 흔들렸다. 바닷길 하나 막혔다고 세상이 시끌시끌, 우리나라 산업이 흔들흔들했다.
대 AI 시대에 걸맞게 네이버 블로그, 티스토리 같은 곳에 올리지 않고, 내 의도를 100% 반영할 수 있는 사이트를 만들기로 결심했다. AI 99% 사용, 손맛 1%. 트러플이 0.03%만 들어가도 트러플맛 감자칩이니까, 이 웹사이트도 손맛 웹사이트라고 할 수 있을까?
AI를 얼마나 잘 쓰는지가 중요한 세상이다. AI를 써서 자료를 찾고 정리하고, 웹사이트로 만드는 건 누구나 할 수 있다. 근데 그 방향을 "잘" 잡고, 다른 사람에게 "잘 읽힐 수 있게" 만드는 건 아직까진 사람이 해야 하지 않을까? 그래서 만들어 봤다. 일단 간단한 웹사이트는 확실히 너무 잘 만들더라. 프론트엔드 하시던 개발자분들 RIP....
02What
블로그 + 뉴스 + 검색엔진?
출발은 '내 블로그를 대체하는 것'이었다.
근데 관심 있고 공부한 내용이 많다 보니 '잘 정리'하고 싶었고, 기왕 정리하는 거 최근 이슈들도 계속 흘러가게 하고 싶었다. 그러다 보니 뉴스처럼 만들고 싶어졌다. 또 기왕 정리된 거 남들에게 공유해도 좋겠다 싶어서 검색 창을 만들었고, 공부하는 방향을 제시하는 기능까지 만들었다. 그 방향은 내가 써 둔 글로 이어진다.
03How
기존에 쓰던 글들이 있어서 콘셉트까지만 잡고, 바로 웹사이트를 만들었다. 글을 심어 넣는 건 쉬웠다. 여기서도 AI를 본격적으로 썼다. 아직 글은 안 썼지만 관심 있던 것, 공부가 필요한 분야들은 내 사고방식과 내가 주제에 접근하는 방식대로 주제 가닥을 먼저 잡으라고 했고, 글까지 쓰라고 했다.
정보의 정확도를 구분하려고, 내가 확인한 글(Injeong.)과 AI가 쓴 날것 그대로 올라간 글(AI checked)을 나눠 두기도 했다.
기획 순서
- 01콘셉트로딩 스피너 = 공부 중. 막대 하나 = 분야 하나
- 02분야 11칸도서분류법에서 출발 → 관심 분야 중심으로 다시 짬
- 03검색주제 하나에 여러 막대 동시 점등 · 학습 지도
- 04디자인먹색 바탕 + 레몬 한 색 · 스프링으로 움직이는 막대
- 05분야 페이지신문처럼. 글 목록 대신 읽을 순서 제안
- 06Weekly속보 · 데일리 · 주간 정리. 이슈마다 관련 막대
- 07모바일밀어서 구경, 바깥으로 당겨서 입장
- 08마무리처음 안내 · 검수 표시(AI checked / Injeong.)
실제로 보낸 말 · Claude에게
메인화면에서 스피너의 바들이 있을 거아니야? 그게 내가 마우스 올리는 대로 그 바가 강조가 됨. 도는 방향은 계속 시계방향으로 유지.
도는것도 막대가 회전하는게 아니라 색이 바뀌는형식으로
반도체 수입 관세에 관련된 이슈다. 그런 경우에는 … 막대가 동시에 색깔이 바뀌면서 그 글로 로딩되면서 들어가지는 그런 이펙트
배경 black에 저 스피닝 바 자체의 애니메이션을 더 고급지게 … 세련된 느낌 필수.
놓을 때 더 튕겨서 진동하는 느낌이 추가되면 좋겠다. 중심쪽으로도 좀 튀어나가는 느낌도...과하게는 말고
사람들이 AI스러움을 싫어하기 시작하는데, 그걸 느끼게하는 큰 요인 중에 하나가 ~~해요. 이런 말투인 것 같음.
숫자
- 11.05
- 오전 10시 시작
- 약 4.5시간
- 첫날 작업
- 60+
- 저장 (커밋)
- 40여 번
- 피드백 → 수정
- 5
- 동시에 돌린 작업
- 8단계
- 디자인 개편
버전 변화






Claude · Astro · Vercel · GitHub