맥 키보드 적응 서비스 'MacKeys' 바이브코딩 제작 스토리

 

안녕하세요. 데이브스톤입니다.

 

지난 3월에 맥 키보드 적응 서비스 'MacKeys'를 기획하고 만들었습니다. 윈도우에서 맥으로 넘어온 사람, 그리고 맥북이 첫 컴퓨터인 사람이 macOS 키보드에 빠르게 적응하도록 돕는 웹 서비스입니다.

https://mackeys.site/ (클릭시 연결)

 

이 글은 하나의 서비스가 아이디어에서 바이브코딩을 통해 실제 작동하는 사이트가 되기까지의 기록입니다. 비슷한 고민을 하는 분들(특히 비개발자 분들)께 도움을 드리기 위해 정리합니다.

---

왜 맥 키보드 적응 서비스를 만들었나?

@unsplash

 

요즘 주변에서 윈도우에서 맥북(macOS)으로 넘어오는 분들이 많습니다. 그런데 맥을 처음 산 사람들이 하나같이 ⌘(커맨드) 키 앞에서 멈칫하는 모습을 봤습니다. 윈도우를 10년 넘게 쓰던 손이 자꾸 Ctrl로 가고, 복사가 안 돼서 당황하고, X 버튼을 눌렀는데 프로그램이 안 꺼져서 어리둥절해하는 식입니다.

 

그래서 맥을 오래 사용해왔고 주변에 추천도 하던 저는 "맥OS용 타자연습 사이트를 추천해주면 되겠지" 하고 찾아봤는데 기존 한글 타자연습 서비스는 전부 윈도우 키보드 기준이었습니다. 한컴타자연습을 비롯한 익숙한 서비스들은 맥 키보드에만 있는 ⌘, ⌥(옵션), ⌃(컨트롤), fn 키나, 윈도우와 다른 키 배열을 전혀 다뤄주지 않았습니다.

 

정리하면 이런 결론이었습니다.

• 맥 키보드 적응이 필요한 사람은 분명히 있다(점점 늘어난다).
• 그런데 macOS 키보드 레이아웃에 특화된 한국어 타이핑 연습 서비스는 없다.

비어 있는 자리가 보이면 한번 만들어보고 싶어지는 게 마케터의 본능인 것 같습니다. 또 그걸 가능하게 한 것이 바이브코딩입니다. 그렇게 MacKeys를 시작했습니다.

---

1단계 | 기획 : 스펙 문서부터 썼습니다.

저는 개발자가 아닙니다. 코드를 직접 짤 줄 모릅니다. 그래서 더더욱, 손이 아니라 머리로 할 수 있는 것부터 단단히 해야 합니다(고 배웠습니다^^). 바로 스펙 문서입니다.

 

바이브코딩의 핵심은 "AI에게 무엇을 만들지 정확히 설명하는 것"이라고 생각합니다. 그래서 코드를 짜기 전에, 만들고 싶은 서비스를 기획문서(하다보니 최종 27페이지!)로 먼저 정리했습니다. 화면 구성, 사용자 흐름, 커리큘럼, 통과 기준까지 글로 다 풀어놓은 거죠. 이 문서가 결국 AI와 대화하는 동안 길을 잃지 않게 해준 지도가 됐습니다.

 

가장 중요하게 정한 건 타겟이었습니다.

• 윈도우 전환자(코어) : 타이핑은 능숙하지만 맥 고유 키가 낯설다
• 컴퓨터 초보자(서브) : 맥북이 첫 컴퓨터라 자판 자체가 낯설다

 

이 두 그룹의 니즈가 다르기 때문에, 처음 들어오면 "타이핑 초보"인지 "윈도우에서 전환"인지 선택하게 했습니다. 윈도우 전환자에게는 기초 자리연습 코스를 통째로 숨기고, 맥 고유 키부터 바로 시작하게 만들었죠. 사용자에게 불필요한 단계를 강요하면 떠나기 때문입니다.

맥북 키보드 연습 사이트 mackeys

 

그다음 커리큘럼을 설계했습니다. 막연히 "연습시키기"가 아니라, 3개 코스와 28개 스테이지로 잘게 쪼갰습니다.

• 코스 1: 기초 자리연습 (홈 포지션 → 윗줄 → 아랫줄 → 숫자 → 종합)
• 코스 2: macOS 키보드 적응 (⌘ ⌥ ⌃ fn, 기능키, 한영 전환)
• 코스 3: 실전 타이핑 (단어 → 문장 → 한영 혼합 → 속도 챌린지)

 

한 스테이지를 2~3분 분량으로 맞춘 건 의도된 설계입니다. 짧게 끊어야 "한 단계만 더" 하고 싶은 마음이 생기고, 완주율이 올라가니까요. 이런 기획 판단은 코딩 실력이 아니라, 사람을 관찰하는 일에서 나옵니다. 비개발자에게도 충분히 강점이 있는 영역입니다.

 

mackeys 커리큘럼 일부

 

2단계 | 제작 : 바이브코딩으로 만들고, 가장 어려웠던 건 '한글'

여기서부터가 진짜 바이브코딩입니다. 저는 코드를 직접 타이핑한 게 거의 없습니다. 대신 AI에게 기획 문서를 바탕으로 "이런 화면을 만들어줘", "이 버튼을 누르면 이렇게 동작하게 해줘" 하고 대화하듯 지시하고, 나온 결과를 직접 눌러보며 고쳐나가는 방식으로 만들었습니다.

 

기술 스택은 간단히만 적겠습니다. Next.js, React, Tailwind CSS 기반으로 만들고 Vercel에 올렸습니다. 솔직히 이 기술들을 저도 거의 알지 못합니다. 다만 "무엇을 원하는지"만 분명하면, 그 구현은 AI와 함께 충분히 끝까지 갈 수 있다는 걸 배웠습니다. 화면 속 가상 키보드는 이미지가 아니라 코드로 직접 그려서, 실제 키 비율과 손가락별 색상까지 표현했습니다.

 

물론 한 번에 매끄럽게 된 건 아닙니다. 가장 애를 먹은 건 '한글'이었습니다.

브라우저에서 한글을 입력하면 조합형 문자라는 특성 때문에, 어떤 키를 눌렀는지 시스템이 제대로 못 잡는 문제가 있었습니다. 처음엔 글자가 엉뚱하게 입력되거나 아예 인식이 안 됐죠. 비개발자인 저로서는 원인조차 알기 어려운 영역이었습니다.

 

이 부분은 AI에게 증상을 최대한 구체적으로 설명하고("ㅎ을 눌렀는데 인식이 안 돼", "영어로 바뀌는 순간 입력이 꼬여") 함께 원인을 좁혀가며 풀었습니다. 이런 문제를 마주하고 넘어서는 과정 자체가 바이브코딩의 진짜 모습이라고 생각합니다. 막히면 멈추는 게 아니라, 막힌 지점을 설명할 수 있으면 길이 열립니다.

 

mackeys 한글 타이핑 연습 모드

 

동기부여 장치도 빼놓을 수 없었습니다. 사람은 늘 게을러지기 마련이라, 연속 출석 스트릭, 레벨 배지, 스테이지 별점, 타수 성장 그래프를 넣어서 다시 오고 싶게 만들었습니다. 진도는 별도 로그인 없이 저장되도록 해서, 가입 없이 바로 연습할 수 있게 했습니다.

 

3단계 | SEO와 마케팅

서비스를 다 만들어도 검색에 안 걸리면 없는 것과 같습니다. 그래서 SEO(검색 로봇이 페이지를 잘 읽도록 만드는 작업)도 바이브코딩으로 해결했습니다. 28개 스테이지 페이지가 각각 고유한 주소와 제목, 설명을 갖도록 만들고, 검색에 잘 노출되는 구조로 잡았습니다.

 

타겟 키워드는 이렇게 잡았습니다.

• 맥북 타자 연습
• 맥북 키보드 연습
• 맥 키보드 적응
• 윈도우에서 맥 전환
• macOS 키보드 단축키
   

  

  맥북 키보드 연습 사이트 SEO

   

   

 

여기에 콘텐츠 마케팅을 붙였습니다. "윈도우에서 맥으로 전환할 때 알아야 할 것들", "맥북 단축키 정리" 같은 글로 검색 유입을 만들고, 그 글 끝에서 자연스럽게 연습 페이지로 이어지게 설계했습니다. 무리한 광고 글보다, 진짜 도움이 되는 콘텐츠가 결국 오래 갑니다.

mackeys 가이드 블로그

더불어 이런 웹서비스 런칭 홍보에 효과적인 데모 영상까지 AI로 제작, 유튜브에 업로드해 서비스를 알렸습니다.

mackeys 홍보 영상 스크린샷

 

비개발자도 저처럼 기획부터 런칭까지 할 수 있습니다.

그렇게 MacKeys는 기획 → 제작 → SEO·마케팅 세팅까지 한 바퀴를 돌아 실제로 작동하는 서비스가 됐습니다. 코드 한 줄 직접 못 쓰던 제가, 바이브코딩으로 머릿속 아이디어를 런칭까지 끌고 온 겁니다. 맥북이 낯선 분이라면 mackeys.site에서 직접 한번 쳐보셔도 좋습니다. 무료고, 가입도 필요 없습니다.

 

이번 프로젝트에서 다시 확인한 건 세 가지입니다.

첫째, 문제는 늘 작은 불편함에서 시작된다는 것.

큰 시장조사보다 "내 주변 사람이 멈칫하는 순간"이 더 정확한 신호였습니다.

 

둘째, 비개발자의 무기는 '코딩 실력'이 아니라 '무엇을 왜 만드는지 설명하는 힘'이라는 것.

기획과 관찰, 명확한 지시가 받쳐주면 구현은 AI와 함께 따라옵니다.

 

셋째, 만드는 것과 알리는 것은 한 세트라는 것.

SEO와 콘텐츠를 제작 단계부터 같이 설계하지 않으면, 좋은 서비스도 묻혀버립니다.

 

저는 이렇게 아이디어 검증 → 기획 문서 → 바이브코딩 개발 → 검색 최적화·마케팅까지 하나의 흐름으로 다루는 작업을 좋아합니다. 작은 웹 서비스든, 사내 도구든, 비어 있는 자리를 채우는 프로젝트라면 비개발자라도 충분히 시작할 수 있습니다.

 

혹시 만들고 싶은 게 있는데 어디서부터 시작할지 막막하시다면, 이 글이 작은 참고가 됐기를 바랍니다. 끝까지 읽어주셔서 감사합니다.