최근 한 달간 Cursor를 사용해 보며 많은 생각을 했다. 처음에는 디자이너인 나 혼자 앱을 출시할 수 있다는 것이 신기했지만 너무 빠른 변화를 겪다 보니 앞으로의 미래를 예측하기 어려워 혼란스럽기도 했다. 또한 평소 디자인 핸드오프 이후의 구현은 어떻게 이루어지는지 궁금했었는데 아주 약간은 이해할 수 있게 되었고, 작업을 하면서 기초적인 기능들의 구현 과정을 경험해 볼 수 있었다. 앱 개발이라는 것은 내가 예상했던 것보다 훨씬 더 까다롭고 복잡한 구조였다. 그래도 깨달은 것이 많아 너무 즐거운 학습이었다. 이 모든 경험과 느낀점을 기록해 보았다.

Cursor 사용기

첫 인상은 크게 어려워보이지 않았다. 그래서 튜토리얼 없이 바로 조작해 보았다. Xcode처럼 프로젝트 경로를 열어서 파일들을 불러오고, 우측에서 프롬프트를 작성하니 AI가 파일 사이를 오가며 코드를 자동으로 작성해 줬다. 보는 내내 헛웃음이 났다. 또한 Claude의 영향일까? 이전에 실험한 Chat GPT와 똑같은 프롬프트를 입력해도 더 완성도 있게 UI를 그려냈고 에러가 발생하는 확률도 낮았다.

작업 방식은 이러했다. Cursor의 프롬프트를 입력해 코드가 수정되면 Xcode와 연결된 내 아이폰 화면에서 실시간 프리뷰를 확인한다. 그리고 다시 Cursor에게 수정사항 요청을 반복한다. 중간에 에러가 생기면 해당 부분을 캡쳐하여 커서에게 몇번 물어본다. 그래도 에러가 많으면 코드를 이전으로 되돌리지만 보통은 커서가 해결해준다. 코드 수정 뿐만 아니라 터미널 명령과 파일 삭제 및 이동 등 다양한 작업을 실행해준다.

그 중에서 특히 좋았던 부분은 Restore checkpoint 기능이었다. 프롬프트 히스토리 중 원하는 부분으로 되돌릴 수 있다. 예시로 작성중인 코드가 마음에 안들면 다시 되돌려달라는 명령을 하지 않고도 내가 원하는 이전의 프롬프트 입력 시점으로 되돌릴 수 있다. 그러나 이 기능이 완벽한 것은 아니었다. 코드는 정확하게 이전 상태로 복구시켜 주지만 삭제한 파일이나 프로젝트 세팅 값 등은 복구하지 못하는 경우가 있었다. 에러를 해결하기 위해 되돌렸더니 새로운 에러가 발생하는 경우가 종종 생겨 당황스러웠다. 커서가 해결해주지 못해 막히는 부분이 생기자 비개발자의 한계가 느껴졌다.

디자이너를 위한 미니게임 제작

먼저, 이전의 Chat GPT로 만든 앱 보다 조금 더 복잡한 구조를 실험해 보기 위해 4가지 미니게임(컬러, 조형, 타이포, 정렬) 앱을 기획했다. 2개 혹은 4개 중 정답을 탭 하는 간단한 규칙이지만 3초의 제한 시간과 3개의 목숨, 점진적으로 상승하는 난이도등 베이직한 게임 룰을 적용했다. 또한 가장 기대했던 기능인 게임센터를 연동시켜 랭킹 시스템도 구현했다. 이틀간 커서의 프롬프트를 250개가량 입력하고 수정하며 제작했다. (명확한 기획과 디자인, 개발 역량이 있다면 훨씬 더 적은 횟수의 프롬프트로도 충분하다.)

개인적으로 놀랐던 부분은 첫 번째 게임을 완성한 상태에서 두 번째 게임을 추가하기 위해 '두 번째 게임 버튼도 추가해 줘'를 요청했는데 이 게임의 로직까지 임의로 구현해 줬다. 마치 내가 구상하려고 했던 게임 내용을 알고있었다는 것 같았다. 덕분에 약간의 수정만 거쳐서 두 번째 게임을 완성했다.

💡 눈의 감각을 제작하며 처음 구현해본 부분들

1. 메인화면 View와 게임 화면 View를 분리시켰다. (처음 개발한 앱에서는 모든 코드를 1개의 View파일 안에 작성했다.)

2. 스플래시 화면을 추가했다.

3. 게임센터와 리더보드를 연동시켜 랭킹 시스템을 구현했다.

👉 눈의 감각은 이 링크를 통해 설치할 수 있다.

위치정보를 활용한 지하철역 안내 서비스 제작

다음 앱은 더 복잡한 기능을 실험해 보기로 했다. 1년 전부터 쭉 만들고 싶었던 다이나믹 아일랜드 지하철역 안내 서비스다. 기능 구현을 위해서 모든 지하철역의 번호와 위도, 경도를 CSV 파일로 정리하고 내 위치정보를 활용해 가까운 역을 보여주는 방법을 구상했다. 실제로 지하철 탑승 후 앱을 실행했는데 정상적으로 작동해서 감격스러웠다.

그러나 백그라운드에서 지속적으로 위치 정보를 받는 것은 좋은 방법이 아니었다. 민감한 개인정보이기 때문에 명확한 표기와 이유가 없다면 애플의 심사가 거절될 수 있고, GPS가 제대로 작동하지 않는 환경에서 현재 위치를 제대로 가져오지 못하는 문제가 발생했다. 우선은 현재 상태로 마무리 짓고 추후에 서울시가 제공하는 공공데이터 API 연동 방법을 연구하기로 했다.

💡 해당 앱을 제작하며 처음 구현해본 부분들

1. CSV 파일에 저장된 데이터를 파싱 하여 앱의 데이터 소스로 활용했다.

2. 앱 내에서 사용할 아이콘과 음성 파일을 에셋으로 관리하고 로드하여 UI 및 기능에 적용했다.

3. 다이나믹 아일랜드를 구현했다.

4. 작업 내용을 커밋하고 GitHub에 푸시하여 백업했다.

MCP 찍먹 해보기

커서가 조금씩 익숙해질 무렵, 최근 핫하다는 MCP(Model Context Protocol)도 사용해 봤다. 로그인 화면, 메인화면, 다크모드 변환 등의 간단한 프롬프트 몇개를 입력해보았다. 그리고 우측 화면은 실제로 커서가 그려낸 것이다. 피그마에서 살펴보니 오토레이아웃과 8배수 간격 등 기본적인 디자인 요소를 잘 구현했다. 아직은 완전한 실무 적용에 무리가 있어 보이지만 어느 정도 미래를 보았다. 잘 짜여진 디자인 시스템이 준비되었다면 이것을 AI가 적재적소에 사용하는 것이 앞으로의 피그마가 되지 않을까 생각해 본다. 또한 점점 더 디자인 시스템 관리 직무가 중요해지지 않을까 예측해 보았다.

마치며

이번 경험을 통해 앞으로의 변화를 예측해 본다면, 이제는 디자이너가 프로토타이핑 툴이 아닌 실제 코드로 프로토타입을 구현할 수도 있을 것 같다. 또한 비개발 직군도 아이디어만 있다면 간단한 앱을 쉽게 만들 수 있는 시대가 올 것 같다. 그러나 한 편으로는 너무 라이트하거나 완성도 낮은 앱들이 우후죽순 생기는 문제도 있을 것 같다. 어쩌면 지금이 디자이너에게 필요한 개발 지식이 더 빠르게 확장되는 시점인 것 같다.

AI의 발전은 그 어느 때보다 빠른 속도로 IT 산업의 변화를 가속화 시키고 있다. 하루가 다르게 생소한 용어와 개념들이 생기는 지금은 그 무엇도 다음을 예측하기가 어려운 것 같다. 이러한 물결 속에서 내가 헤엄쳐야할 방향을 잃지 않도록 집중해야겠다.