비개발자가 CURSOR로 웹앱만들기-의약품 식별앱2

소개

지난번 글에 이어서 의약품 식별시스템을 좀더 진행해보았습니다.

진행 방법

저번엔 json으로 데이터를 일부 주고 진행하였지만, 이번엔 식약처의 API를 사용하여 전체 데이터를 이용해보기로 하였습니다.

그래서 지난번에 만든 파일은 무시하고 새 폴더를 만들고 시작하였어요.

깊은 빡침을 느껴가며 한지라 사진이 별로 없습니다... 이해해주세요.

<첫번째 시도: 식약처 API로 검색하기>

PRD를 md 파일로 넣어놓고, 지난주 스터디시간에 배운대로 식약처API 페이지를 docs까지 집어넣어서 '자 만들어봐'라고 하였습니다.

일단 PRD를 넣어두고,

compser에 '@'를 치면 뜨는 드롭다운 중 Docs를 누르고 맨 밑의 'Add new doc'을 누릅니다.

휴대폰과 태블릿의 설정 메뉴 스크린샷

그리고 식약처의 API설명 페이지의 주소를 넣습니다.

같은방법으로 GPT VISION의 API 문서도 등록한 다음 'PRD'에 기초하여 만들어봐'라고 합니다.

유튜브 한국어 자막 유튜브 한국어 자막 유튜브 한국어 자막 한국어

파일들을 생성해주고, 앞으로 해야할 일을 알려줍니다.

Mac OS X의 코드 편집기 스크린샷

아직 실행이 되지는 않았어요. 폴더 구조도 바꾸고, 무슨 패키지도 설치하고, API키도 받아오라하고 몇 단계를 거쳤습니다. 중간에 '폴더 구조는 어떻게 바꿔?' 라고 물어보니 터미널을 열고 '이거 이거 쓰세요' 해서 그냥 그대로 했습니다.

하지만 검색이 되지 않았습니다. ㅠㅠ

다양한 색상의 웹사이트 스크린샷

@식별docs를 다시 읽고 왜 안되는지 확인해봐 라고 했더니 '아하! 색상이나 모양은 검색조건이 아니라 출력조건으로만 나옵니다. '라고 합니다. 그말인 즉, 의약품 식별 API는 '초록색, 경질캡슐' ->의약품 이름 찾아주기가 아니라, 의약품 이름으로 찾으면 '초록색, 경질캡슐' 등등이 나오는 놀라운 API였습니다.

한국어 한국어 한국어 한국어 한국어 한국어 한국어 한국어

그렇지만 기특하게도 CURSOR가 '다른 방향으로 우회하겠습니다'라며 방법을 알려주었어요.

방법은 일단 공란으로 검색해서 25500개의 검색결과를 모두 불러온다음 프론트에서 필터를 거는 방식이었습니다. 다만 한번 검색하는데 3분씩 걸린다는...^^

그래도 AI의 도움을 받아 이런 방법까지 시도해 볼 수 있었네요~ 만드는데 시간도 얼마 들지 않았어요.

API를 불러오기 위한 API 셋팅, 필요한 패키지 설치, 폴더구조 정리 등 초보자는 어려운 모든 내용을 알아서 만들고, 제가 해야하는 경우 '어떻게 해야해?' 하면 친절하게 알려주니 편했습니다.

<두번째 시도: csv 기반으로 변경>

어쨌든 구현은 해야하니, 공공데이터에서 csv로 제공되는 식별 파일을 이용하기로 하였습니다.

일단 만들어진 페이지 모양이 그럭저럭 마음에 들어서 유지하기로하였습니다. 그래서 현재 폴더에 csv파일을 추가하고 '지금 API로 불러오는데 csv 기반으로 바꿔줘' 라고 명령하였습니다.

그랬더니 코드를 이것저것 바꾸고 다시 저보고 폴더구조를 변경하라고 하네요.. 어떻게해?라고 물었더니 또 terminal에 입력할 코드드를 알려줬습니다.

컴퓨터의 파일 관리자 스크린샷

그래서 이런 폴더구조로 변경이 되었습니다.

그리고 몇가지 UI를 바꿔달라고 요청하였습니다. 현재는 이런 드롭다운 방식으로 되어있었는데,

  1. 제형/모양을 드롭다운으로 만들어줬는데 버튼형으로 변경해줘

  2. 식별문자도 검색할 수 있게 해줘

  3. 모양선택버튼 중 기타를 누르면 몇가지 더 나타나게해줘(눈사람모양, 강낭콩형, 과일모양 등)

일단 제형/모양 등을 한번에 선택할 수 있게끔 버튼형으로 작동하고, 식별문자 입력칸도 있습니다.

한국어 색상 선택기의 스크린샷

이렇게 모양에서 기타를 누르면 특이한 모양들도 뜹니다(약 모양엔 아주 귀여운 모양이 많답니다). 다만 csv 파일에 기타 모양들이 적용이 안되어있어서 검색은 할 수 없습니다ㅠㅠ

한국어 페이지 스크린샷

한번 검색해볼까요?

한국사이트 스크린샷

다양한 색상의 웹사이트 스크린샷

아주 좋습니다~ 시원시원한 카드형 디자인도 알아서 만들어주고, 필요한 정보도 알아서 잘 배치합니다.

제가 혼자했다면 얼마나 걸렸을까요?ㅎㅎ CURSOR라는 프로그램이 개발하고싶은 비개발자에게 신세계를 열어줍니다.

다만 중간에 sonnet 할당량이 끝났는지 어느새 gpt4o로 변경이 되어있더군요... 그리고 그사이 코드가 어그러지면서 됐던것도 안되던 현상이... '똑바로좀 해', '진짜 제대로 안할래?' 라고 갖은 핍박을 하며 했지만 나아지지 않았어요ㅠㅠㅠ 후.. 아직도 화가 안풀리네요.

대격노의 과정을 거쳤지만 어찌됐든 완성하였습니다. CURSOR를 너무 믿지 말자.. 이번 실습의 교훈이었습니다.

결과와 배운 점

  1. API 불러오는것까진 좋았습니다. 잘 안되서 문서를 다시 읽어봐 라고 하니까 아주 똑똑하게 찾아내고 저는 생각해내지 못했을 대안까지 제안하는 것이 아주 기깔나게 일 잘하는 부하같았습니다.

  2. 하지만.. AI 모델이 쥐도새도모르게 변경되면서(알려주던가좀!) 되던 코드가 안되기시작하자.. 최근에 이렇게 화가난적은 처음이었습니다.. 아무리 커맨드z를 눌러도 되돌아가지 않아서 시키는 수밖에 없엇어요. '모양 검색이 안돼'->'모양에 검색 조건을 넣으면 검색이 안돼는데?'->'그래도 안 돼는데?'->'지금 모양으로 검색이 안되잖아!!!'->'하.. 정말 이럴래??'->'너 진짜 짜증난다...'라며 못되게 굴었지만 더 악화될 뿐이었어요..

  3. 그래서 이런 상황을 대비하기 위한 방법도 CURSOR의 chat기능을 통해 물어봤어요. '너랑 코드를 짜다가 되돌아가지를 않을때가있어. 어떻게해야할까?' -> 'git'설정을 하라더군요. 전 아직 git을 몰라 못하지만,, CURSOR를 쓰시는 여러분은 꼭 잘 설정해두세요..

    한국어 프로그램 스크린샷

7
4개의 답글

👉 이 게시글도 읽어보세요