강의나 컨설팅을 하다 보면 화면 속 마우스 위치를 말로 짚어 드릴 일이 많은데요, 그래서 그동안 무료 마우스 효과 도구를 켜 두고 썼습니다. 커서 둘레에 동그라미를 띄우고 설명하는 부분을 비춰 주는 도구예요.
클로드 코드로 업무 도구를 만들다 보니 이런 작은 앱도 직접 만들 수 있겠다 싶어 제 강의 화면에 맞춘 마우스 효과 앱 NS Mouse를 만들었습니다. 이틀 동안 만들었고, 앱 크기는 약 850KB예요.
다만 쓰던 앱을 옆에 두고 만들면 결과물도 그 앱을 닮기 쉽잖아요. 이번에는 코드를 맡기기 전에 어떤 기능이 필요한지부터 기능 정의서(PRD)로 정했습니다.
만들기 전에 PRD에 무엇을 적었나요?
클로드 코드에게 처음부터 앱을 짜게 하지 않고, 프로젝트 폴더의 PLAN.md에 기능 정의서부터 적게 했어요. 참고 자료는 비슷한 앱들의 공식 사이트 기능 소개와 앱스토어 리뷰처럼 누구나 볼 수 있는 것만 썼습니다. 다른 앱의 프로그램 파일은 열지 않았고, 코드는 Swift로 처음부터 새로 짰어요.
PRD에는 이번 버전에 넣을 것, 다음 버전으로 미룰 것, 아예 뺄 것을 나눠 적었는데요. 커서 링과 클릭 표시, 스포트라이트, 돋보기, 그리기를 넣었고 모니터 여러 대와 로그인 시 실행도 챙겼어요. 키보드 입력을 화면에 띄우는 기능은 손쉬운 사용 권한이 따로 필요해서 다음 버전으로 미뤘고, 앱마다 단축키를 다르게 두는 기능은 강의에서 쓸 일이 없어 뺐습니다.
제일 도움이 된 칸은 리뷰 불만이었어요. 단축키가 시간이 지나면 안 먹힌다는 불만과 단축키 설정과 초기화가 어렵다는 불만을 그대로 설계로 바꿨습니다. NS Mouse는 키를 가로채지 않고 키보드와 마우스 상태를 1초에 120번 직접 읽어요. 그래서 돋보기 말고는 따로 허용할 권한이 없습니다.
단축키 규칙도 모든 기능에 하나로 맞췄어요. 키를 혼자 길게 누르고 있으면 그동안만 켜지고, 빠르게 두 번 누르면 계속 켜져 있다가 한 번 더 누르면 꺼집니다. 설정창에는 기본값으로 되돌리기 버튼을 넣었고요.
네버슬립 색과 강의 화면에 맞춰 고쳤어요!
첫 버전이 나오고 바로 색부터 바꿨습니다. 클로드 코드에 보낸 요청은 한 줄이었어요.
네버슬립 메인 컬러 시스템을 기본으로 해줘. 형광색과 파랑
클로드 코드는 AI네버슬립 사이트의 색 정의 파일에서 값을 가져와 커서 링은 형광(#C4FB2D), 왼쪽 클릭과 돋보기 테두리는 파랑(#167BFF), 스포트라이트가 주변을 덮는 색은 밤 남색(#0A0E1A)으로 바꿨어요. 형광 링이 흰 슬라이드 위에서 잘 안 보여 남색 윤곽을 얇게 둘렀고, 발표 화면은 대부분 흰 배경이라 그리기 선은 파랑으로 정했습니다.
직접 켜 보니 다른 문제가 있었어요. 그리기를 켜면 빠져나오기가 힘들었거든요. 그리기 중에는 투명한 그림판이 메뉴바까지 덮어서 메뉴바 클릭이 막혀 있었습니다. 지금은 우클릭, Esc, ⌥ 한 번 누르기, 메뉴바 클릭 중 아무거나로 그리기를 끝낼 수 있어요. 그리기를 고정해 두면 화면 위쪽에 툴바가 떠서 도구와 색, 굵기를 마우스로 고릅니다.
메뉴 디자인은 세 번 만에 정했어요!
단축키만으로는 처음 쓰는 분이 헷갈릴 것 같아 마우스로도 쓸 수 있게 하고 싶었어요. 클로드 코드에 이렇게 물었습니다.
레퍼런스한 프로그램처럼 UI/UX를 마우스 클릭해서 쓸 수 있게 하고 싶은데 어떻게 하는게 좋을까?
첫 답은 메뉴바 아이콘을 누르면 뜨는 패널에 큰 타일 네 개를 놓는 방식이었어요. 다음에는 평소 쓰는 Tailscale 메뉴 캡처를 보여 주며 이런 식으로 아이콘 바로 아래로 펼쳐지게 해 달라고 했고, 스위치가 한 줄씩 놓인 메뉴가 나왔습니다. 막상 써 보니 타일이 더 알아보기 쉬워서 "디자인은 아까 버전이 더 직관적이야"라고 했고, 결국 타일 패널을 메뉴 맨 위에 넣는 쪽으로 합쳤어요.
말로 설명하기 어려운 화면은 비슷한 메뉴 캡처 한 장을 보여 주는 편이 빨랐습니다. 두 버전을 직접 눌러 본 뒤에 고르니 결정도 쉬웠고요.
마지막으로 클로드 코드에게 지금 디자인이 참고한 앱과 얼마나 비슷한지, 저작권 문제가 될 정도인지 물었는데요. 기능과 아이디어는 저작권으로 보호되지 않고 코드도 공유한 게 없다는 답이었어요. 가장 눈에 띄는 공통점으로는 기본 단축키 조합을 짚었고, 외부에 배포한다면 앱 이름 상표 검색도 해 보라고 하더라고요. 법률 자문은 아니라는 단서도 같이 달았습니다. 단축키는 설정창에서 기능마다 바꿀 수 있어요.
이번 앱은 처음 목표로 잡은 1MB 안에 들어왔고, 인텔 맥과 애플실리콘 맥 겸용으로 빌드했습니다. 무료 도구를 쓸 때는 도구가 정해 둔 색과 단축키에 제가 맞췄는데, 이제는 제 강의 화면에 맞춰 바로 고칠 수 있어요. 다음 강의부터 쓰면서 불편한 점을 모아 다음 버전에 넣을 생각입니다.
자주 쓰는 도구를 직접 만들어 보고 싶다면 코드를 맡기기 전에 PRD부터 적어 보세요. 넣을 기능과 미룰 기능, 뺄 기능을 나누고, 비슷한 앱 리뷰에서 불만 두세 개를 골라 설계 한 줄로 바꿔 두는 겁니다!
함께 읽으면 좋은 글
클로드 코드로 직접 만든 도구
① 클로드 코드로 공간 대관 관리 자동화 대시보드를 만든 순서
② 노션으로 관리하다 업무 자동화 대시보드를 직접 만들었습니다
일상과 업무에 AI를 맡긴 사례
③ AI와 함께 일본 후쿠오카 여행짜고 부모님께 공유하기
④ 네이버 예약 알람 자동화, 클로드 코드로 매일 아침 보고 받습니다!
강의·컨설팅 사례
⑤ 클로드 코드 원데이클래스 6기, 랜딩페이지 배포부터 업무 자동화까지
⑥ 클로드 코드로 어떤 업무 자동화, 대시보드를 만들었을까? 네버슬립 원데이클래스 사례
