[ChatGPT 활용법] 기존 위젯에 추가 기능 추가하기

ChatGPT 로고

 

안녕하세요 앱개발지식나눔입니다. 오늘까지 제가 개발에서 ChatGPT를 사용하면서 효율적으로 사용하는 팁들을 모두 공유했습니다. 추후에도 ChatGPT와 관련된 글을 작성할 예정입니다.

 

이전 시간에 O,X 위젯, 입력폼 위젯을 프롬프트를 통해 만들었습니다.

 

[GPT 활용법] - ChatGPT로 조건에 맞는 위젯 생성하기

ChatGPT로 조건에 맞는 위젯 생성하기

 

오늘은 더욱 조건이 까다로운 위젯을 생성해 보겠습니다. 이전 시간에 심화 버전이라고 생각하면 될 거 같습니다.

 

---

 

 

ChatGPT를 통해 알림 동의 화면 만들기

앱을 다운 받자마자 알림을 동의하는지 여부를 묻는 경험을 해본 적 있나요? 아마 대부분 스마트폰을 사용하는 유저는 경험해 봤을 거라고 생각합니다. 코틀린, 스위프트, 플러터든 모든 프레임워크에는 이 동의를 묻는 기능을 가지고 있습니다. 오늘은 GPT를 사용해서 스위프트 알림 동의 다이얼로그를 만들어보도록 하겠습니다.

 

위젯 생선 전 고려해야할 사항

 

왼쪽을 보면 이전 글에서 보았던 프로세스입니다. 크게 디자인 설정, 기능 설정 두 가지로 나누었습니다. 하지만 GPT를 입력하다보면 디자인 속성, 기능 중 일부를 빼먹는 경험을 했을 겁니다. 그만큼 한 번에 원하는 것을 만드는 것은 쉽지 않습니다. 오늘은 기존 프로세스를 유지하되 추가 기능을 GPT에 입력하는 법을 알아보겠습니다.

 

 

ChatGPT를 통해 만들 페이지입니다. 자주 보는 어플 알람 동의 페이지입니다. 앱을 처음 받으면 나오는 화면이고 확인하기를 누르면 ‘알람을 동의하시겠습니까?’라는 Alert Dialog가 나옵니다. 참! 안드로이드 핸드폰은 기본적으로 알람 동의가 되어있기 때문에 아이폰만 나오는 화면입니다.

 

제작해야할 페이지

 

왼쪽에 있는 alarmTitle부터 pushAlarmDescription은 해당 디자인 요소를 지정한 변수입니다. Xcode에 있는 스토리보드에서 UI로 직접 구성하는 방법과 ViewController에서 직접 코드로 구성하는 방법이 있습니다. 저는 스토리보드에서 직접 위젯 UI들을 만져 설정하기 때문에 GPT에 따로 명령할 것이 없었습니다. 그래서 정적인 UI는 스토리보드로 그리고 기능이 추가된 ‘확인하기' UI는 코드로 구현할 예정입니다.

 

 

제작해야할 속성 정리

 

확인하기 버튼의 기본적인 배경색, 글자 폰트는 UI를 스토리 보드에서 지정하고 코드로는 border radius와 버튼에 있는 글자 ‘확인하기'를 지정할 예정입니다. 또한 경계선이 투명해야합니다. 마지막으로 클릭 이벤트 시 이벤트가 실행되는 코드를 작성해 달라고 했습니다. 여기서 클릭 이벤트를 받는 IBAction 함수를 만들되 함수 안에 아무 기능을 넣지 말라는 의미를 담고 프롬프트에 작성했습니다.

 

GPT가 생성한 코드(Swift)

 

IBAction 함수는 빈 공간인 상태로 다른 조건들을 충족하여 코드를 잘 작성하였습니다. 그럼 버튼 폰트를 바꿔보겠습니다.

 

 

<질문>

위 코드에서 추가적으로 button 폰트가 bold로 설정해줘.

 

여기서 ‘위 코드에서 추가적으로'라고 명시하여 기존 GPT가 작성한 코드 혹은 자신이 작성한 코드에 추가적으로 코드를 작성할 것이라고 명시했습니다. 이 말을 통해 GPT는 가장 최근 코드를 바탕으로 답을 내릴 것입니다. 더 좋은 표현으로는 ‘방금 작성한 AlarmPermissionController 클래스에서'처럼 직접 추가할 클래스를 지정하는 방법도 있습니다.

 

해당 폰트 코드가 추가된 코드

 

그럼 GPT가 잘 작성했나요? 네 그림에 보듯이 폰트를 bold로 지정하라는 코드를 추가했습니다. 그러면 이제 버튼에 기능을 추가해 보겠습니다.

 

<질문>

이 코드에서 button을 클릭 시 알림 권한 설정을 할 수 있는 코드 작성해 줘.

 

여기서도 명령어에 ‘button 클릭 시'라고 말하며 IBAction 함수를 제작할 것을 명령했습니다. 이를 통해 버튼 이벤트가 일어나면 특정 기능이 작동하게 만들었습니다. 다음 ‘알림 권한 설정' 기능을 추가하라고 했습니다. 여기서 중요한 점은 어떤 부가적인 설명 없이 ‘알림 권한 설정'을 요청했습니다. 그 이유는 뭘까요? 그 이유는 코틀린, 스위프트부터 크로스 플랫폼까지 앱 제작에는 알림 설정 기능을 설정하는 메서드가 모두 있기 때문입니다. 따라서 인터넷에는 이것과 관련된 데이터가 매우 많습니다. 지금까지 스위프트로 작성되었기 때문에 GPT는 자동으로 알림 설정할 수 있는 메서드를 제공할 것입니다.

 

조건을 추가한 코드 생성(Swift)

 

네. 깔끔하게 buttonClicked 함수 안에 동의 메소드를 잘 지정했습니다. 

 

패스워드, 패스워드 재입력 조건 생성하기

비밀번호 입력 폼

 

이번에는 조금 복잡한 기능입니다. 처음 비밀번호를 입력하면 border 색을 녹색으로 변경하여 focus가 되어야 합니다. 또한 입력한 비밀번호가 동일해야 확인하기 버튼이 활성화되고 다르면 에러 메시지를 입력 border 색과 에러 메세지를 통해 사용자에게 전달해야 합니다. 또한 입력한 두 가지 비밀번호가 숫자, 문자 조합 이어야 하죠. 이 조건을 GPT에게 어떻게 전달해야 할까요? 일단 하나씩 진행해 보겠습니다. 두 개 입력이 다르면 border 색이 달라지는 기능과 처음 password를 입력하려고 textinput을 클릭하면 border가 녹색으로 변하는 기능을 GPT 명령어로 작성하겠습니다. 

 

비밀번호, 비밀번호 재입력

 

passwordTextInput과 repasswordTextInput은 지정한 위젯 이름입니다. ‘입력값이 다르면'이라는 조건을 제시하고 border색을 빨간색이 된다라고 조건과 대답을 제시했습니다. 동시에 비밀번호 재입력이 아닌 비밀번호 입력인 passwordTextInput가 클릭되면 border색을 녹색으로 변경하는 명령어를 제시했습니다. 해당 조건을 잘 만족했을까요?

 

패스워드 위젯 조건 명시

 

그림처럼 비밀번호 두 가지 입력이 일치하면 녹색으로 변경되었습니다. 하지만 한 가지 조건을 GPT가 빠뜨렸습니다. 비밀번호 입력인 passwordTextInput가 클릭되면 border색을 녹색으로 변경하는 명령어는 실행하지 않았습니다. 그래서 명령어를 다시 입력하려고 합니다.

 

두 가지 속성이 같으면 녹색으로 변경

 

해당 조건을 만족하기 위한 프롬프트 명령어

 

비밀번호 재입력을 입력할 때 두 가지 입력이 일치하는지 체크하고 border 색을 바꾸라고 명령했습니다. 잘 보면 두 번째 명령은 조건에 조건에 대답 형태입니다. 왼쪽을 보면 조건- 대답과 같은 형태이지만 오른쪽은 이중 조건인 것을 확인할 수 있습니다. 

저는 개인적으로 이중 조건일 경우 GPT에 어떻게 물어야 될지 고민하기보다는 직접 코드로 어떻게 작성해야 할지 고민하는 것이 시간적으로 효율적이라고 생각합니다. 간단한 조건-대답 형식은 쉽게 원하는 답을 주지만 조건이 많아질수록 더 GPT로부터 답을 찾기가 어렵습니다. 또한 GPT에게 질문하기 전 나의 명령어를 점검할 때도 글이다 보니 매우 헷갈리고요. 일단 GPT가 내린 답을 살펴보겠습니다.

 

 

ChatGPT가 생성한 다른 조건(Swift)

 

 

if문 안에 if문이 있습니다. GPT 명령어에 제시한 이중 조건을 잘 충족한 것 같습니다. 그럼 조금 디테일하게 보겠습니다. 초록색 박스는 비밀번호 입력을 클릭하면 border 색을 초록색으로 변경하라고 잘 명시했습니다. 그리고 비밀번호 재입력을 터치했을 때 두 입력이 맞는지 체크하라고 했습니다. 두 가지 조건을 잘 만족한 코드를 GPT가 작성했습니다.

 

비밀번호 위젯 조건 추가

 

이번에는 입력한 비밀번호가 다를 때 에러 메시지를 작성하려고 합니다. 여기는 글자 폰트 설정과 ‘비밀번호 재입력 클릭 시'와 ‘비밀번호 가 다르면 에러 메시지가 나타난다.’ 라는 조건 두 가지가 추가됩니다. 일단 명령어를 보면 ‘비밀번호 재입력 시’ 조건을 제시하고 ‘비밀번호 두 입력이 다르면' 조건을 제시하고 결과로 에러 메세지 폰트 설정과 함께 디자인을 제시했습니다. 그리고 ‘비밀번호 일치 시' 라는 조건과 그에 해당하는 결과인 숨김 혹은 보여줌을 지시했습니다.

 

에러 메세지 조건 추가(Swift)

 

간단히 코드를 보겠습니다. 아까와 같은 코드입니다. 여기에 passwordMatch 변수가 false일 경우, 즉 두 개의 입력이 일치하지 않을 때 에러 메세지가 보이는 부분만 추가되었습니다. 그럼 결과를 볼까요?

 

추가된 조건을 반영한 위젯

 

네, 비밀번호가 일치하지 않으면 border 색 변경뿐만 아니라 에러 메시지도 잘 나타나는 것을 볼 수 있습니다. 지금까지 내용을 정리하면 디자인 기능을 먼저 GPT로 만들고 기능을 GPT로 만들고 나서 추가적인 기능, 디자인을 GPT에게 입력합니다. 추가적인 조건 질문에서는 단순한 것과 복잡한 것이 있는데 되도록 복잡한 조건문 질문은 피하는 것이 좋습니다. 만약 조건문 질문을 할 때는 조건의 true, false시 작동하는 코드 혹은 액션을 모두 GPT에 기재하는 것을 추천합니다.

 이번 장은 너무 추상적이고 예시가 많은 내용이라고 생각할 수도 있습니다. 하지만 질문을 어떤 흐름을 타고 하는지 전체적으로 살펴보고 감을 잡는 것에 초점을 맞추는 것을 추천드립니다.  이상 오늘 글을 마치겠습니다! 긴 글 읽어주시느라 고생 많으셨습니다.