예상 읽기 시간: 약 5분
레퍼런스 이미지는 늘 여러 곳에 흩어져 있습니다. 로컬 폴더, PureRef, 피그마, 핀터레스트, 노션. 각각 쓸모가 있지만 한 번에 비교하려고 하면 생각보다 투박합니다.
노션에 이미지를 넣으면 정리는 됩니다. 그런데 여러 이미지를 한꺼번에 보면서 “왜 이 이미지들이 비슷하게 느껴지는지”를 비교하기에는 조금 애매했습니다.
그러다 예전에 이미지마다 키워드를 붙이고, 겹치는 키워드를 선으로 연결해서 보여주는 무드보드 구조를 봤던 기억이 났습니다. 제가 처음 발명한 방식은 아니고요. 그 구조를 오늘 제 작업에 맞게 써보고 싶었습니다.
문제는 이미지가 아니라 이미지 사이의 관계였습니다
레퍼런스를 모아두는 것 자체는 어렵지 않습니다. 문제는 시간이 지나고 다시 봤을 때, 내가 왜 이 이미지들을 같이 묶었는지 기억이 흐려진다는 점이었습니다.
예를 들어 어떤 이미지는 색감 때문에 좋고, 어떤 이미지는 여백 때문에 좋고, 어떤 이미지는 재질 때문에 좋습니다. 그런데 한 폴더에 같이 들어가 있으면 전부 “좋은 레퍼런스”로만 남습니다.
그래서 이미지마다 대표 키워드를 붙이고, 같은 키워드를 가진 이미지끼리 연결해보면 관계가 보이지 않을까 싶었습니다.
노션AI에게 오늘 작업에 맞는 HTML 도구로 만들어달라고 했습니다
복잡한 앱을 만들 생각은 아니었습니다. 설치 없이 브라우저에서 열고, 이미지를 넣고, 키워드를 적고, 카드 위치를 옮길 수 있으면 충분했습니다.
그래서 노션AI에게 현재 작업에 맞는 작은 HTML 도구로 만들어달라고 했습니다. 결과는 생각보다 바로 쓸 만했습니다.
현재 버전에서 되는 것
- 이미지 파일 여러 장 추가
- 이미지 드래그 앤드 드롭
- 복사한 이미지 붙여넣기
- 이미지마다 대표 키워드 최대 3개 입력
- 같은 키워드를 가진 이미지끼리 선으로 연결
- 키워드를 누르면 해당 이미지만 강조
- 카드 위치 자유롭게 이동
- 키워드 수정 및 카드 삭제
- 현재 브라우저에 작업 내용 저장
각 이미지를 예쁘게 배열하는 데서 끝나는 게 아니라, 제가 어떤 이미지를 비슷하다고 느꼈는지를 키워드 관계로 볼 수 있다는 점이 좋았습니다.
예를 들어 이미지마다 키비주얼, 원료, 신선함, 공간, 프리미엄, 편리함 같은 단어를 넣으면 겹치는 키워드를 가진 이미지 사이에 연결선이 생깁니다.
사용법
- HTML 파일을 내려받습니다.
- 압축 프로그램이나 별도 설치 없이 파일을 브라우저로 엽니다.
- 이미지를 화면에 드래그하거나
Ctrl+V로 붙여넣습니다. - 이미지마다 대표 키워드를 1~3개 입력합니다.
- 카드 위치를 이동하며 전체 관계를 확인합니다.
- 상단의 키워드를 누르면 같은 키워드를 가진 이미지만 강조됩니다.
제가 오늘 작업에 사용한 키워드 무드보드 HTML도 함께 올려둡니다. 설치 없이 브라우저로 열어 이미지를 드래그하거나 붙여넣으면 됩니다.
노션에 임베드 후 사용 가능 or 주소창에 입력 후 사용 가능~!
현재 버전의 한계
- 무드보드 전체를 이미지로 내보내기 없음
- AI가 이미지를 분석해 키워드를 자동 추천하는 기능 없음
- 작성한 보드를 다른 사람과 실시간 공유하는 기능 없음
- 노션 데이터베이스와 자동 동기화 없음
또한 작업 내용은 HTML 파일 자체에 기록되는 것이 아니라, 현재 파일을 연 브라우저의 로컬 저장 공간에 저장됩니다. 채워진 보드를 다른 사람에게 보내고 싶다면 화면을 캡처하거나, 추후 내보내기 기능을 따로 추가해야 합니다.
파일을 노션에 업로드하면 다운로드용 첨부파일로 공유할 수는 있지만, 노션 페이지 안에서 HTML 앱이 그대로 실행되는 것은 아닙니다. 노션 안에서 직접 작동하게 보이려면 HTML을 별도 웹 주소에 배포한 뒤 임베드하는 방식이 필요합니다.
써보니 좋았던 점
막연하게 “이런 무드”라고 생각했던 이미지들이 실제로는 공간 때문에 묶였는지, 신선함 때문에 묶였는지 비교할 수 있었습니다.
레퍼런스가 많아질수록 중요한 건 이미지를 많이 모으는 것보다, 내가 어떤 기준으로 보고 있는지 남기는 쪽이라는 생각이 들었습니다.
다음 글에서는 노션 안에서 AI 에이전트로 페이지 구조를 만드는 방법을 정리해볼게요.