사용 기록을 활용해 추천 도구를 만들어봤습니다 – 내가 자주 쓰는 기능을 먼저 보여주는 방법

이미지
사용 기록을 보니 또 하나의 생각이 떠올랐습니다 지난 글에서는 도구 사용 기록을 확인하고 자주 사용하는 도구를 화면 위쪽에 배치하는 작은 개선을 해보았습니다 . 생각보다 효과가 있었습니다. 자주 사용하는 도구가 바로 눈에 들어오니 페이지를 찾는 시간이 줄어들었기 때문입니다. 그런데 며칠 더 사용하다 보니 또 하나의 생각이 떠올랐습니다. “도구가 스스로 추천을 해주면 어떨까?” 예를 들어 최근에 자주 사용한 도구를 자동으로 위에 보여주는 방식입니다. 이 아이디어는 복잡한 기술처럼 보일 수 있습니다. 하지만 실제로는 생각보다 단순한 구조로 만들 수 있었습니다. 최근 사용한 도구를 먼저 보여주기 가장 간단한 방법은 최근에 실행한 도구를 기억해 두는 것입니다. 예를 들어 이런 방식입니다. 지출 계산기를 실행하면 “최근 사용 도구” 목록에 추가됩니다. 뉴스 요약 도구를 실행하면 그 도구 역시 목록에 기록됩니다. 이렇게 하면 페이지를 다시 열었을 때 최근 사용한 도구가 먼저 보이게 됩니다. 마치 스마트폰에서 최근 사용 앱을 보여주는 것과 비슷한 방식입니다. 초보자도 따라 할 수 있는 간단한 예시 이 기능은 아주 간단한 코드로 시작할 수 있습니다. 예를 들어 버튼을 클릭할 때 최근 사용 도구를 저장하는 방식입니다. "지출 계산기 실행" 버튼 그리고 간단한 함수 하나를 만들면 됩니다. function saveRecent(tool){   localStorage.setItem("recentTool", tool); } 이렇게 하면 최근 사용한 도구가 저장됩니다. 페이지를 다시 열었을 때 이 값을 불러와서 보여주면 간단한 추천 기능이 완성됩니다. 도구가 조금 더 똑똑해지는 순간 이 기능을 추가한 뒤 도구 사용 경험이 조금 달라졌습니다. 페이지를 열면 최근 사용 도구가 먼저 보이기 때문입니다. 이 덕분에 도...

사용 기록을 보고 도구 배치를 바꿨습니다 – 데이터가 알려준 작은 개선

이미지
사용 기록을 남겨보니 예상과 다른 결과가 보였습니다 지난 글에서는 도구를 사용할 때마다 간단한 기록을 남겨 어떤 도구를 얼마나 사용하는지 확인해 보았습니다. 처음에는 단순한 실험이라고 생각했습니다. 그저 “어떤 도구를 많이 사용할까?” 정도의 궁금증이었기 때문입니다. 하지만 며칠 동안 기록을 쌓아 보니 생각보다 흥미로운 결과가 나타났습니다. 제가 가장 많이 사용할 것이라고 생각했던 도구와 실제로 가장 자주 사용한 도구가 조금 달랐기 때문입니다. 예를 들어 뉴스 요약 도구는 자주 사용할 것 같았지만 실제 기록을 보니 지출 계산기를 훨씬 더 많이 사용하고 있었습니다. 또 하나 흥미로웠던 점은 체크리스트 도구도 생각보다 자주 사용되고 있다는 사실이었습니다. 이 결과를 보면서 하나의 생각이 떠올랐습니다. “그렇다면 도구 배치도 바꾸는 것이 좋지 않을까?” 자주 사용하는 도구를 화면 위로 올렸습니다 기존의 빠른 실행 페이지는 단순히 도구를 몇 개 나열한 구조였습니다. 하지만 사용 기록을 확인한 뒤 도구 배치를 조금 바꿔 보기로 했습니다. 가장 많이 사용하는 도구는 화면의 가장 위에 배치했습니다. 그리고 사용 빈도가 낮은 도구는 아래쪽으로 이동시켰습니다. 이 방법은 특별한 기술이 필요한 작업이 아니었습니다. 단순히 버튼의 순서를 바꾸는 것만으로도 충분했습니다. 하지만 실제로 사용해 보니 생각보다 체감 차이가 컸습니다. 자주 사용하는 도구가 바로 보이기 때문에 페이지를 살펴보는 시간이 거의 필요 없어졌기 때문입니다. 초보자도 쉽게 할 수 있는 간단한 정리 방법 이 작업은 매우 단순합니다. 예를 들어 아래처럼 버튼 순서를 정리할 수 있습니다. 지출 계산기 실행 체크리스트 열기 뉴스 요약 실행 이렇게 자주 사용하는 도구를 위에 배치하면 사용 흐름이 훨씬 자연스러워집니다. 스마트폰에서도 자주 사용하는 앱을 첫 화면에 두는 것과 같은 원리라고 볼 수 있...

어떤 도구를 가장 많이 사용할까 – 나만의 사용 기록을 남겨봤습니다

이미지
빠른 실행 페이지를 만들고 나서 생긴 궁금증 지난 글에서 자주 사용하는 도구를 빠르게 실행할 수 있는 ‘빠른 실행 페이지’를 만들었습니다. 실제로 며칠 사용해 보니 확실히 편해졌습니다. 필요한 도구를 찾는 시간이 거의 사라졌기 때문입니다. 그런데 사용하다 보니 또 하나의 궁금증이 생겼습니다. “나는 어떤 도구를 가장 많이 사용할까?” 막연하게는 알고 있었습니다. 지출 계산기나 체크리스트 같은 도구를 자주 사용한다는 느낌은 있었습니다. 하지만 실제로 얼마나 사용하는지는 정확히 알 수 없었습니다. 그래서 이번에는 아주 간단한 실험을 해 보기로 했습니다. 도구를 사용할 때마다 작은 기록을 남겨 보는 것이었습니다. 아주 단순한 사용 기록 기능 처음에는 복잡한 시스템을 만들 생각이 없었습니다. 단순히 버튼을 누를 때마다 “이 도구가 사용되었다”는 기록만 남기면 충분했습니다. 예를 들어 아래처럼 아주 간단한 방식입니다. 도구 실행 버튼을 누르면 사용 시간이 하나 기록됩니다. 이런 식입니다. 2026-03-08 지출 계산기 실행 2026-03-08 뉴스 요약 실행 2026-03-08 지출 계산기 실행 처음에는 별것 아닌 기록처럼 보였습니다. 하지만 하루 이틀 지나면서 데이터가 조금씩 쌓이기 시작했습니다. 기록이 쌓이자 보이기 시작한 것 며칠이 지나자 흥미로운 사실이 보였습니다. 제가 가장 자주 사용할 것이라고 생각했던 도구와 실제로 가장 많이 사용한 도구가 조금 달랐습니다. 예를 들어 저는 뉴스 요약 도구를 많이 쓸 것이라고 생각했습니다. 하지만 실제 기록을 보니 지출 계산기를 훨씬 자주 사용하고 있었습니다. 또 하나 흥미로웠던 점은 생각보다 체크리스트 도구를 자주 사용한다는 사실이었습니다. 이 기록을 보고 나서 도구를 바라보는 기준이 조금 달라졌습니다. ‘재미있는 도구’보다 ‘실제로 자주 사용하는 도구’가 더 중요하다는 생각이 들었습니다. 초보자도 바로 따라...

도구를 더 빨리 쓰는 방법 – 나만의 ‘빠른 실행 페이지’를 만들어봤습니다

이미지
도구 모음 페이지를 만들고 나서 생긴 작은 생각 지난 글에서 여러 개의 도구를 한 페이지에 모아 두는 ‘도구 모음 페이지’를 만들었습니다 . 처음에는 단순히 정리만 해도 충분히 편해졌습니다. 이전에 비해 도구를 찾는 시간이 훨씬 줄어들었기 때문입니다. 하지만 며칠 사용해 보니 또 하나의 생각이 들었습니다. “자주 쓰는 도구는 더 빨리 실행할 수 없을까?” 도구가 한 페이지에 모여 있어도 여전히 목록을 찾아 클릭해야 했습니다. 사소한 차이처럼 보였지만 하루에 여러 번 사용하다 보니 이 작은 과정도 조금씩 번거롭게 느껴졌습니다. 그래서 이번에는 자주 사용하는 도구를 바로 실행할 수 있는 ‘빠른 실행 페이지’를 만들어 보기로 했습니다. 가장 자주 쓰는 도구부터 먼저 정리했습니다 먼저 제가 실제로 어떤 도구를 자주 사용하는지 살펴봤습니다. 생각보다 단순했습니다. 가장 많이 사용하는 도구는 다음 세 가지였습니다. 지출 계산기 뉴스 요약 도구 체크리스트 도구 나머지 도구들은 가끔 사용하는 수준이었습니다. 그래서 모든 도구를 같은 위치에 두는 대신 자주 사용하는 도구만 따로 모아 화면 상단에 배치하기로 했습니다. 마치 책상 위에 자주 쓰는 물건만 꺼내 두는 것과 비슷한 방식입니다. 초보자도 바로 만들 수 있는 간단한 실행 버튼 이 작업은 생각보다 어렵지 않았습니다. 단순히 버튼을 만들어 해당 도구 페이지로 이동하도록 하면 됩니다. 예를 들어 아래와 같은 구조입니다. <button onclick="location.href='expense.html'">지출 계산기 실행</button> <button onclick="location.href='news.html'">뉴스 요약 실행</button> <button onclick="location.href=...

작은 도구를 하나로 묶어보니 보이기 시작한 것 – 나만의 도구 모음 페이지 만들기

이미지
도구가 늘어나자 생긴 새로운 문제 바이브코딩을 시작한 뒤 작은 도구들을 하나씩 만들기 시작했습니다. 지출 계산기, 간단한 분석 도구, 생활에 필요한 계산기 등 생각보다 다양한 도구가 만들어졌습니다. 처음에는 단순히 파일을 하나씩 열어서 사용했습니다. 필요할 때 해당 페이지를 찾아 실행하면 그만이었기 때문입니다. 하지만 시간이 지나면서 작은 불편함이 생기기 시작했습니다. 도구의 개수가 늘어나자 “어디에 어떤 도구가 있었지?” 라는 생각이 자주 들었습니다. 분명히 만들어 둔 도구인데도 찾는 데 시간이 걸리는 경우가 생겼습니다. 그때 한 가지 간단한 해결 방법이 떠올랐습니다. 도구들을 한 페이지에 모아보면 어떨까 하는 생각이었습니다. 아주 단순한 도구 모음 페이지 만들기 처음에는 복잡한 기능을 생각하지 않았습니다. 그저 내가 만든 도구들을 한 곳에서 볼 수 있으면 충분하다고 생각했습니다. 그래서 가장 단순한 방식으로 시작했습니다. 각 도구로 이동할 수 있는 링크를 한 페이지에 정리하는 것이었습니다. 예를 들어 아래와 같은 구조입니다. 지출 계산기 은퇴 자산 계산기 뉴스 요약 도구 생활 체크리스트 각 항목을 클릭하면 해당 도구 페이지로 이동하도록 만드는 방식입니다. 이 작업은 생각보다 간단했습니다. 기존에 만들어 둔 페이지 링크만 정리하면 되었기 때문입니다. 초보자도 바로 만들 수 있는 간단한 예제 예를 들어 아래와 같은 형태로도 충분합니다. <h2>나의 도구 모음</h2> <ul> <li><a href="tool1.html">지출 계산기</a></li> <li><a href="tool2.html">자산 시뮬레이터</a></li> <li><a href="tool3.html">뉴스 브리핑 도구...