One Button 프로그램 개발기 - 7

이번에는 버튼이름 수정 기능을 추가해볼 것이다.
Cursor의 claude-3.5-sonnet을 사용할 것이다.
 
프롬프트는 다음과 같다.

이번에는 버튼 수정을 누르고 버튼을 선택 할 시, 버튼 이름도 수정 가능하게 하고싶어.
저장된 버튼 이름부터 불러오게 하게 바꿔줘.

 
Cursor를 이용해서 그런 것인지 모르겠지만, 한번에 수정되었다.
군더더기 없이 해결되었다. 너무 뛰어나다 보니 티스토리 운영에 차질이 생길 것만 같다.
(그래도 계속 잘 해줬으면 좋겠다)

 
해결되었으니 다음 기능을 추가해보자.
원하는 것은 드래그 하여 버튼의 위치를 변경하는 것이다.

이번에는 버튼의 위치를 수정 할 수 있게 하고싶어. 생성된 버튼을 꾹 누른상태로 드래그 해서
원하는 위치에 놓으면 그 위치에 놓이게 하고싶어. 완전히 자유로운 위치에 놓이게 하는건 아니고,
버튼들이 정렬된 상태에서 순서만 바뀐다고 보면 될 것 같아. 코드를 수정해줄래?

 
기능은 정상적으로 작동되지만 프롬프트가 잘못 된 것 같다. 
아이콘을 클릭 시 버튼의 위치가 변경되었다.
 

드래그 앤 드롭 첫 적용

 
단순 클릭하는 것 또한 위치 수정을 위한 클릭으로 인식하는게 원인으로 보였다.
이 해결법에 대해서는 좀 더 직관적인 프롬프트를 요청하기 위해
ChatGPT(ChatGPT 4o)에게 질문했다.

ai를 이용해서 프로그램을 만들었는데, 버튼 위치를 변경하려면 클릭하고 드래그 앤 드롭 형식으로 만들었어.
그런데 프로그램이 클릭하면 그것을 버튼의 위치를 바꾸는 것으로 인식하는데,
어떻게 해야 단순 클릭과 이동을 위한 클릭을 구분시킬 수 있게
프롬프트를 명령할 수 있을지3가지 정도 제안해줘.

 
GPT가 제안한 해결법은 다음 세 가지였고, 두 번째 방법을 채택했다.
1. 클릭 지속 시간 이용
2. 클릭 후 이동 거리 확인
3. 클릭과 드래그 모드 분리
 
클릭 후 이동 거리 확인 기능은 생각치도 못 했었는데
직관적인 방법이여서 고민 할 것도 없었다.
 
결과는 다음과 같다.

수정된 드래그 앤 드롭

 
클릭 시 버튼이 이동되는 이슈는 해결되었다!
하지만 이번에는 좀 더 직관적으로 버튼이 움직이는 것을 보여 줄 시각적 장치가 필요했다.
 


 계속...

One Button 프로그램 개발기 - 8

처음 이야기

One Button 프로그램 개발기 - 1