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

DallE로 만든 블로그용 GPT 로고

 

안녕하세요 앱개발지식나눔입니다. 저번 시간은 실제 문제를 같이 직면하면서 ChatGPT로 함수를 만들어보았습니다.

 

[GPT 활용법] - ChatGPT로 원하는 함수 생성하기

ChatGPT로 원하는 함수 생성하기

 

오늘은 프론트앤드 개발자들이 자주 만드는 위젯 생성을 프롬프트를 통해 만들어보겠습니다.

---

 

 

위젯의 정의

 

프론트앤드프런트앤드 개발자들에게만 위젯 생성이 익숙하지만 GPT 사용법을 알려주는 것이 목적이기 때문에 프런트앤드가 아닌 다른 개발자 분들도 제가 어떤 질문을 던져 새로운 위젯을 만드는지 방법에 집중하셔서 보면 될 거 같습니다. 간단하게 위젯의 개념에 대해 설명하고 넘어가겠습니다.

 

위젯이란 무엇일까?

 

 

위 그림은 우리가 자주 쓰는 앱에서 많이 보이는 UI입니다. 이 그림에는 시계, 날씨, 여러 버튼들이 있네요. 이렇게 UI를 이루는 구성 단위를 위젯이라고 합니다. 언어마다 부르는 방식이 약간씩 차이가 있긴 하지만 저는 위젯이라 부르려고 합니다.

 

 

위젯 속성

위젯의 속성들 예시

 

 

만약 날씨 예보 위젯을 만든다고 가정합시다. 이 위젯에는 크게 3가지 섹션으로 나눕니다. 일단 위젯을 만들기 위해서는 가로, 세로 길이를 설정해야합니다. 그리고 그 안에 들어갈 컨테이너들의 마진, 패딩 값을 알려줘야 합니다. 쉽게 설명하면 패딩은 컨테이너 안에 속성들이 컨테이너와 얼마큼 떨어져 있냐 판단하는 것이고 마진은 컨테이너와 다른 컨테이너끼리 외각에서 얼마큼 떨어져 있냐를 판단하는 것입니다. 그리고 모서리를 약간 둥글게 하려면 border라는 경계면을 radius로 조절해야 합니다. 또한 배경색도 설정해야 하죠. 이처럼 작은 위젯에도 수많은 속성 값이 들어갑니다.

 

GPT를 통해 입력폼(TextInputField) 생성하기

 

입력폼 속성 예시

 

 

이제 회원가입 이메일 입력을 위한 TextInputField을 만들 것입니다. 아마 앱에서 많이 본 입력칸일 것입니다. 이메일 형식이 유효한지 유효하지 않은지에 따라 border 색이 초록색 혹은 빨간색으로 변하고 입력칸 오른쪽에 입력했던 값을 모두 지우는 취소 버튼을 만들것입니다. 또한 사용자가 아무 값도 입력이 되지 않았을 때 힌트 텍스트도 있어야 합니다. 마지막으로 이메일 형식이 유효하지 않을 때 에러 메시지를 입력칸 밑에 보여줄 것입니다. 한 번 지금까지 배운 내용을 토대로 어떻게 질문해 볼지 고민하는 시간을 가져볼까요? 그리고 싶은 위젯을 상상하고 무엇이 필요한지 조건을 정리해 봅시다.

 

 

생성해야할 위젯에 필요한 속성들

 

 

사용자가 입력칸을 처음 접했을 때 보이는 디폴트 문자열, 즉 힌트 문장과 그것의 폰트 속성, 취소 버튼과 그 버튼의 크기 및 위치, 이메일 유효성 검사, 유효성 검사 후 보이는 에러 메시지, 입력칸 border와 border 모양을 수정해야 합니다. 이러한 조건들을 먼저 정리하고 질문을 오른쪽과 같이 했습니다.

 

색깔로 필요한 속성 구분

 

처음에는 border의 속성을 정의했습니다. 유효성 검사를 조건으로 두고 border의 색을 지정하고 얕기도 지정했습니다. 그리고 취소 버튼 위치와 기능을 정의했습니다. 마지막으로 힌트 문장을 제시하고 언제 사라지는 지도 알려주었습니다. 하지만 질문에서 빼먹은 게 있습니다. ‘이메일 유효성 검사에 실패할 때 보이는 에러 메시지'입니다. 이 조건을 GPT에 넣지 않았습니다. 이것은 조금 있다 GPT에 조건을 추가하겠습니다. 그럼 명령어 그대로 GPT가 위젯 코드를 작성했을까요?

 

ChatGPT가 생성한 코드

 

GPT에게 제시한 조건을 잘 맞추어 코드를 짜주었습니다. 제가 짠 것보다 더 깔끔하게 짜는 것 같네요.

 

 

위젯 생성 팁

 

 

위젯 생성 팁 모음

 

이번 장의 핵심 개념이자 프로세스입니다. 먼저 자신이 만들고 싶은 위젯을 상상해 보세요. 만약 디자이너가 Figma, Zeplin, Adobe XD를 통해 디자인된 위젯을 만들어두었으면 바로 두번째로 넘어가도 됩니다. 두번째 단계는 그리고 싶은 위젯이 되려면 어떤 속성이 필요한지 생각해봅니다. border 색, Radius, 배경색등 변경해야하는 부분을 정리합니다. 고정적인 속성을 정리했다면 이메일 유효성 검사에 따라 border 색이 변하는 것처럼 조건에 따라 변하는 부분을 정리합니다. 그 후 고정된 속성, 조건에 따른 속성을 GPT에게 입력합니다. 

 

 만약 백앤드 개발자면 위젯을 만들 일은 없습니다. 그러면 API 함수를 만든다고 상상해보세요. API 함수에 필요한 헤더 값, body에 어떤 것을 넣어야 할지, 조건에 따라 statuscode가 어떻게 보내야 할지 미리 정리합니다. 그리고 GPT에게 입력합니다. 결국 핵심은 미리 원하는 것을 상상하고 거기에 필요한 속성을 정리하는 것입니다. 꼭 기억하세요!

 

입력폼을 만들 때 놓치고 있는 부분

 

지금까지 GPT에게 썼던 질문 중에서 누락한 부분 두 가지가 있습니다. 노란색으로 표시된 부분이 누락된 부분인데요.

 

 

이 누락된 부분을 추가해서 다시 완전된 본문을 작성해야 할까요? 꼭 그럴 필요는 없습니다. 이미 GPT에 전달된 텍스트 입력칸에 대한 속성은 제외하고 추가적인 조건만 제시하면 됩니다. 그러면 다음 질문은 어떻게 했을까요?

 

<질문>

이 코드에서 border radius를 8로 설정하는 코드 작성해 줘.

 

일단 두 가지 누락한 부분 중에서 테두리를 조금 둥글게 하기 위한 border radius를 수정했습니다. 그러면 코드에는 잘 적용되었을까요?

 

Border Radius를 조정한 코드(Swift)

 

네. 기본 디폴트 색상을 greyECE로 두께는 1, radius는 8로 잘 설정되었습니다. 그럼 나머지 누락한 부분인 이메일 형식이 맞지 않으면 에러 메시지를 입력칸 밑에 띄우는 기능을 추가하겠습니다.

 

<질문>

이 코드에서 사용자가 값을 입력할 때 이메일 형식에 안 맞으면 setValidationState 함수의 isValid가 false가 되도록 변경해. 그리고 layer 바로 밑, 간격은 8pt이고 폰트 크기를 10으로 isValid가 false이면 'Email form is not right＇를 표시하는 label도 추가해.

 

 

이번 질문은 조건이 있는 질문입니다. 조건에 따라 색을 변경시켜야 하죠. 잘 보면 두 가지로 나누어져 있습니다. isValid가 true, false에 따라 색 지정과 이 에러 메시지의 위치를 지정하는 부분이지요. 머릿속에 한 번 상상하고 질문을 쓰면 매우 도움이 됩니다. 그러면 제대로 대답을 했을까요?

 

조건이 추가된 프롬프트 명령어

 

 

이메일 형식을 만족하려면 ‘@’가 있어나 ‘. com’ 같은 조건이 필요합니다. 하지만 여기서는 ‘testcode1’로만 이루어져 있어 IsValid가 false가 되지요. textinputField의 layer 바로 밑 마진 8pt를 두고 폰트가 10인 지정한 이메일 에러 내용을 보여줍니다.

 

ChatGPT가 생성한 코드(Swift)

 

여기서도 사실 누락한 부분이 있습니다. 에러 메시지 폰트 색, 폰트 종류는 지정하지 않았습니다. 하지만 코드를 보면 에러 메세지 색을 FD4 FD4 에러 칼러색으로 지정된 것을 볼 수 있습니다. 아마 강의 이전에 GPT에게 질문하기 위한 코드 중에 일부에 에러 칼라 처리한 부분이 있었는 거 같습니다. 어쨌든 GPT에게 누락했지만 알아서 잘 채워주었습니다. 이렇게 내가 놓치는 부분도 GPT가 잘 채워주지만 반대로 내가 의도하지 않았던 부분을 GPT가 채울 수 있습니다. 그래서 GPT가 작성한 코드를 그대로 복사해서 붙여 넣으면 안 됩니다. 꼭 검수를 해야 합니다.

 

ChatGPT를 활용하여 취소, 탈퇴하기 버튼 만들기

위젯 생성 명령하기 전 프로토콜

 

아까 전에 위젯을 만들 때 생각해야 하는 순서도입니다. 4가지로 이루어져 있는데 몇 번 이 순서를 따르다 보면 이 순서를 의식적으로 생각하지 않고 행동할 수 있을 것입니다. 탈퇴하기, 취소 버튼은 예상하다시피 버튼에 대한 이벤트는 있지만 클릭 시 색이 변한다던가 디자인이 변하는 케이스는 거의 없습니다. 따라서 O, X 제작에도 3번째 단계는 생략해도 될 것 같습니다. 그럼 여기에는 어떤 디자인적 요소를 코드로 추가해야 할까요?

 

취소, 탈퇴하기에 필요한 조건들

 

크게 6가지가 있습니다. 각 버튼의 가로, 세로 사이즈, 그리고 버튼 색, 버튼 사이 마진, 버튼과 기기 사이 가로 마진, 버튼 안 글자 폰트 설정이 있습니다. 자신이 그릴 위젯을 상상하고 그 위젯에 필요한 요소를 다 리스트업 했습니다. 아까 전에 ‘조건에 따라 변하는 위젯이라면 어떤 조건에 속성이 어떻게 변할지 정한다’라는 단계는 생략한다고 했습니다. 따라서 바로 GPT에 입력해 보겠습니다.

 

 

<질문>

기기 가로길이, 150의 높이의 흰색 뷰 안에 superview에서 24 떨어져 있고 버튼끼리는 15 떨어져 있어져 있는 두 개의 버튼을 만들 거야. 첫 번째 버튼은 남색이고 title은 취소야. 이 취소 글자의 폰트는 15, semibold이고 흰색이야. 두 번째 버튼은 분홍색이고 title은 확인하기야. 이 확인하기 글자 폰트도 첫 번째 버튼과 같아. 이 조건에 해당하는 뷰 만들어.

 

여기서 superView는 화면 페이지 전체를 뜻하는 부모 위젯입니다. 즉 현재 화면을 지칭합니다. 왼쪽과 오른쪽을 비교해 볼까요? 여기서 각 버튼 가로길이가 없는 것을 알 수 있습니다. 이것은 핸드폰마다 가로 길이가 다르기 때문에 총 기기 가로길이에서 버튼 사이 마진, 기기 양 끝과 버튼 사이에 마진을 뺀 나머지를 반으로 나눈 길이를 버튼 가로길이로 가져가려고 합니다. 저는 프롬프트에 마진 길이만 제시했습니다. 그 이유는 대부분 앱 개발 시 이런 식으로 절대 값이 아닌 상대값으로 길이를 가져가기 때문에 GPT가 다른 사람들이 버튼 가로길이를 가져가는 방식으로 학습했기 때문입니다. 그렇게 중요한 내용은 아니니 넘어가겠습니다. 

 

프롬프트에 6가지 조건을 입력하고 어떤 결과가 나왔을까요?

 

조건을 충족한 코드

 

코드를 전부 분석할 필요는 없습니다. 숫자만 봐도 무방할 것 같네요. 조건에 해당하는 마진값을 잘 반영했습니다. 그리고 -7.5는 왼쪽 버튼이 오른쪽 마진 7.5, 왼쪽 버튼이 왼쪽 마진 7.5를 가져가 버튼 사이를 15pt로 유지했습니다. 

 

지금까지는 조건에 따라 디자인이 변경되지 않는 정적인 위젯만 GPT를 통해 생성했습니다. 그러면 이번에는 조건에 따라 변경되는 위젯을 만들어보겠습니다.

 

O, X 위젯 생성하기 

O,X 위젯 생성하기

 

 

우리가 자주 보는 O,X 버튼입니다. 그럼 버튼 중 하나를 클릭하면 어떻게 될까요? O 버튼을 누르면 해당 사진과 같이 배경색, 아이콘 모양이 변해야 합니다.

 

O,X 위젯에 필요한 속성들

 

이제 디자인 속성을 살펴보겠습니다. 총 7가지가 존재합니다. UIButton으로 원형 위젯 생성하기, 그 안에 아이콘 넣기, UIButton으로 위젯 생성하기, 그리고 그 위젯 안에 inner padding을 넣어서 아이콘 크기를 조절하려고 합니다. 그리고 그림자 속성도 설정하고 예, 아니오 글자와 버튼이 얼마나 떨어져 있는지도 설정해야 합니다. 그러면 어떻게 질문했을까요?

 

<질문>

viewcontroller에 두 개의 UIButton을 그릴 거야. 크기는 115*115이고 원형이야. 그리고 그림자는 흐림이 36%이고 불투명도가 16%인 회색이야. 이 두 버튼은 약 73 떨어져 있으며 각 버튼에는 아이콘으로 원과 x가 있어. 이 아이콘 및 버튼 패딩은 약 28이야. 이 모든 것을 충족하는 코드를 작성해.

 

 

viewController는 Swift에서 코드로 UI를 설정 및 선언할 수 있는 클래스입니다. 버튼을 만들 거라고 선언하고 크기를 지정했습니다. 그리고 원형이라고 지정했습니다. 그리고 그림자를 설정하고 버튼 사이 마진, 버튼 안 패딩을 지정했습니다.

 

 

생성할 위젯 속성 정리

 

 

GPT가 생성한 O,X 위젯(Swift)

 

그러면 GPT가 짠 코드에 해당 조건이 다 충족되었는지 살펴보겠습니다. 일단 함수 시작과 동시에 패딩 값, 버튼 사이즈를 상수로 선언하였습니다. 그리고 버튼의 시작 x, y 위치를 buttonFrame과 button2Frame으로 잘 설정했습니다. 그리고 createCircularButton 함수로 버튼 디자인 속성을 설정하였고 createIcon 함수로 버튼 속 아이콘을 설정하였습니다. 하지만 아직 코드를 보면 뭔가 부족합니다. 버튼을 클릭하면 버튼 상태가 변해야 합니다. 지금 코드로는 버튼을 만들 수 있지만 버튼을 바꿔 누르면 아무런 반응이 없습니다. 따라서 세 번째 단계를 진행해야 합니다.

 

Yes를 눌렀을 때 기대하는 반응

 

아까 본 사진과 같이 버튼을 눌렀을 때 버튼 디자인이 변경되도록 shadow가 사라지고 녹색으로 색이 변하도록 지정하였습니다. 

 

<질문>

그럼 이 코드에서 두 버튼 중 하나를 선택했을 때 shadow 속성이 사라지고 버튼 안에 있는 이미지가 녹색으로 다시 설정되도록 수정해.

 

간단히 명령어를 분석하겠습니다.

 

추가 조건 명령어 분석

 

 

버튼 둘 중에 하나를 클릭하면 하나는 녹색으로 변경되고 나머지 기존 색을 유지해야 합니다. 또한 버튼이 눌러져서 녹색인 상태에서 다른 버튼을 누르면 기존 버튼은 회색으로 새로 눌린 버튼은 녹색으로 변해야 합니다. 그리고 선택될 때 필요한 그림자, 배경 색 변화와 같이 디자인 변경 사항을 명시하였습니다. 그럼 코드를 보겠습니다.

 

그림자 조건을 추가한 위젯 코드(Swift)

 

 

‘IBAction’은 버튼을 눌렀을 때 실행되는 함수입니다. BodyStatus에 있는 yes, no 값에 따라 변경된 것을 볼 수 있습니다. 그리고 이전 버튼의 정보 또한 previousButton에 저장되어 변경되는 것을 알 수 있습니다.

 

 

정리

 

마지막으로 정리하겠습니다. 저는 GPT에게 차근차근 크게 두 단계로 나누어 질문했습니다. 첫 번째로 디자인에 필요한 내용을 정리하여 GPT에게 모양을 만들어 달라고 요청했습니다. 그리고 다시 기능을 추가하는 명령어를 GPT에게 전달했습니다. 이렇게 두 단계로 나누어도 GPT는 맥락을 알고 있기 때문에 자신이 만든 디자인 속성 설정 코드를 알고 있습니다. 여기에 바로 기능과 관련한 질문을 하면 자연스럽게 기능을 추가하여 우리에게 알려줍니다. 기능을 GPT에게 제시하는 부분은 매우 까다롭습니다. 따라서 기대한 것과 다른 기능을 제시하면 한 두 번 기능 관련 명령을 내리고 그래도 원하는 답이 내려지지 않으면 꼭 디자인 코드 전체를 복사해서 다시 넣고 기능과 관련된 질문을 하셨으면 좋겠습니다.