ChatGPT에게 예시 코드 제공해서 패턴화된 코드 작성하기

DallE로 생성한 GPT 로고

 

예시 코드를 GPT에게 제공해서 비슷한 코드를 자동 생성할 수 있을까?

저번 글에서는 기본 GPT 문법, 함수 생성법, 간단한 Enum, Switch 문을 제작하는 팁을 배웠습니다.

 

[GPT 활용법] - ChatGPT로 반복적인 코드 작성 팁

 

 

오늘은 이미 만들어놓은 코드를 GPT에 입력하여 비슷한 특성의 코드를 작성하는 시간을 갖겠습니다. 코드보다 어떤 순서로 질문을 하는지 보셨으면 합니다.

 

이번 글은 프론트앤드 개발자는 익숙하지만 다른 분야의 개발자는 익숙하지 않을 수 있습니다. 하지만 정말 간단한 것이니 목표와 과정에 집중하면 각 분야에 응용하여 적용하실 수 있을 것입니다.

 

Font System

폰트 디자인 종류

 

 

갑자기 폰트가 나와서 놀라실 수 있습니다. 우리가 워드, 파워포인트에서 쓰는 문자체를 폰트라고 부릅니다. 대표적으로 굴림체, 고딕체등이 있습니다. 이번 장에서는 넥슨에서 만든 ‘넥슨 고딕체'와 프리텐다드 글꼴을 사용할 예정입니다. 그리고 넥슨 고딕체의 이니셜을 ‘H’로 프리텐다드의 이니셜을 ‘P’를 사용하겠습니다. 이 페이지에서 각 이니셜을 꼭 기억하실 바랍니다.

 

 

폰트 크기별 다른 변수 이름

 

 

폰트 종류를 선정했으면 폰트 크기를 구분해야합니다. 폰트 크기는 1부터 무한대까지 범위가 넓지만 그 중에서 프로젝트에서 쓰는 폰트 범위는 한정적입니다. 앱이나 웹에서 공통된 폰트 종류와 폰트 크기를 사용하면 통일성이 있고 보기가 좋습니다. 그래서 제목에 해당하는 부분은 넥슨 bold, 20pt를 사용하고 내용 부분은 프리텐다드 regular, 12pt등을 사용하기로 약속합니다. 이 부분은 프로젝트별로 각각 약속이 다르며 디자이너가 주로 스타일 가이드로 코드 치기 전에 잡아줍니다. 그래서 사진을 보면 알 수 있듯이 h는 폰트 종류, 그 다음 숫자로 지정된 폰트 사이즈를 알려줍니다.

 

 

Font 굵기에 따른 다른 이름의 함수

 

 

다음은 폰트 굵기 입니다. 폰트 굵기는 4가지를 사용합니다. 여기서는 light, regular, medium, bold를 사용합니다. 폰트 종류, 폰트 크기 다음 폰트 굵기를 표시하여 함수 이름을 통해 이 함수가 어떤 폰트 특성을 가지고 있을지 유추할 수 있습니다.

 

 

만들어야할 폰트 갯수

 

 

그럼 이제 만들어야할 폰트를 전체적으로 살펴보겠습니다. 타이틀 영역의 폰트와 폰트 크기를 h1부터 h6(6이 가장 작음)으로 지정하고 내용 영역의 폰트는 p1부터 p6로 지정합니다. 그리고 위젯을 생성할 때 미리 약속한 폰트를 함수로 만들어 사용합니다. 하지만 문제가 있습니다. h1부터 h6까지 (nexon FontFamily) 그리고 p1부터 p6(pretendard Fontfamily) 종류가 12개이고 각각 폰트 굵기가 regular, medium, semiBold, Bold이기 때문에 48가지 함수를 작성해야합니다. 이것을 하나하나 만드는 것은 너무 시간이 많이 드는 행위입니다. 그러면 어떻게 GPT를 사용하여 만들 수 있을까요?

 

 

 

일단 48개 함수는 이름이 다르고 폰트 종류, 폰트 크기, 폰트 굵기 속성이 각각 다르지만 코드는 비슷할 것이라고 예상할 수 있습니다. 이는 수기로 모두 작성하는 것은 가능하지만 중간에 작성하다가 실수할 확률이 높습니다. 그리고 시간도 많이 드는 단순 노동 작업입니다. 일단 이번 강의의 제목처럼 예시 코드를 하나 만들어 GPT에게 전달해봅시다.

 

 

예시 코드 GPT에게 제공하기

 

 

 

우리가 함수를 만들때 제공해야 할 것은 함수 이름, 매개 변수, 리턴, 함수 내용 이렇게 4가지라고 했습니다. 여기서 함수이름을 ‘h1RegularFontStyle’ 이라고 지정하고 매개 변수는 없도록 설정했습니다. 매개 변수가 필요 없는 이유는 이름 자체에 모든 의미를 담고 있기 때문에 함수 내용에 필요한 부분을 안에서 설정했습니다. 리턴은 UIFont 변수 타입으로 지정했습니다. 함수 내용을 살펴보면 폰트 종류인 폰트 네임, 폰트 사이즈, 폰트 굵기인 fontWeight를 설정된 것을 알 수 있습니다.

 

하지만 이 코드에는 문제가 있습니다. 두번째 조건으로 제시한 FontWeight를 ‘fontWeight’로 명시했지만 UIFont에는 적용되지 않았습니다. 따라서 font를 리턴해도 FontWeight는 적용되지 않을 것입니다. 그래서 GPT에게 다시 물었습니다.

 

 

 

 

GPT가 fontDescriptor를 선언하여 UIFont에 fontWeight를 적용하였습니다.

 

 

 

 

 

오른쪽 검은색 바탕의 코드와 희색 컨테이너 안에 있는 질문을 같이 GPT에게 전달했습니다. 다시 말해 h1Regular부터 bold까지 4개의 함수를 손으로 작성했습니다. h1RegularFontStyle부터 h1SemiBoldFontStyle를 통해 48가지를 작성하기 위해 직접 4개 함수 코드를 작성하여 GPT에게 완전한 표본을 제시하였습니다. 그 이유는 1개의 함수 표본을 가지고 48개를 만드는 것보다 4개의 예시 코드를 ChatGPT에게 제공하여 만드는 것이 시간이 더 단축되기 때문입니다. 그럼 GPT가 잘 인식하여 ‘h2’ 시리즈 함수 4개를 만들었을까요?

 

 

예시 코드로 만들어진 코드

 

 

폰트 사이즈를 22으로 바꿔서 h2를 잘 만들었습니다. regular부터 semiBold까지 수기로 작성한 표본을 GPT에 제공하니 예상한대로 만들었네요. 아직 만들어야 하는 함수가 많으니 h3는 어떻게 질문할지 살펴봅시다.

 

 

예시를 바탕으로 다른 예시 만들기

 

 

h1, h2를 인식한 GPT에게 이제는 표본이 되는 함수를 따로 제공하지 않고 질문 만으로 h3를 만들 수 있었습니다. 질문 중에 ‘위와 같이' 라는 단어를 통해 h1, h2를 지칭한다는 것을 알 수 있습니다. 그럼 h4부터는 약간 응용해보겠습니다.

 

 

 

 

 h1부터 h3와 h4의 다른 점은 폰트 이름을 넥슨이 아닌 프리텐다드로 변경했습니다. 물론 초기에는 h 시리즈는 모두 넥슨 폰트로 구성하려고 했지만 응용을 위해 h4부터 h6은 폰트 종류를 ‘pretendard’로 적용하는 것으로 변경되었다는 점 양해바랍니다. 지금까지 패턴을 통해 폰트 사이즈를 질문에 직접 지정하지 않아도 h4라는 숫자로 폰트 사이즈를 직접 GPT가 유추합니다. 그리고 폰트 굵기를 regular부터 bold까지 h4에서 4개를 만들어야한다는 것도 자동으로 인식했습니다. 그럼 h5, h6은 예상이 가니 생략하고 프리텐다드 시리즈로 넘어가겠습니다.

 

 

 

‘p1으로 4개 함수' 라는 말은 폰트 굵기가 regular부터 bold까지 4개를 만들거라는 것을 암시합니다. 하지만 아직 프리텐다드 표본이 없기 때문에 폰트 종류와 폰트 사이즈는 제공했습니다. 그래도 h시리즈를 통해 자동으로 함수 이름을 생성했습니다.

 

 

 

 

 이제는 h 시리즈 표본과 p 시리즈 표본을 바탕으로 p2부터 p6까지 제작해보겠습니다. 4개씩 만든다는 것을 바탕으로 폰트 굵기를 지정했고 폰트 종류, 그리고  p2에서 p6의 폰트 크기를 지정했습니다. 만약 일정하게 폰트 크기가 감소하는 구조였으면 ‘2pt씩 감소하게 구성해줘.’라고 질문을 던졌을겁니다. 그럼 어떻게 답이 나왔을까요?

 

 

 

 

 함수 이름과 비교했을 때 잘 적용되었다는 점을 알 수 있습니다. p2부터 p6까지 조건에 잘 맞게 작성되었다는 것을 알 수 있습니다.

 

 

 

 

 

한 번에 요구한 사항을 모두 만족하여 만들었습니다. 지금까지 했던 질문들을 한 번에 봐볼까요?

 

질문을 보면 패턴을 파악할 수 있나요? 처음에는 GPT가 h1 표본 함수를 만들어도 폰트 굵기 속성을 빼먹었습니다. 따라서 h1의 4개의 표본 함수를 수기로 작성하여 지정한 함수 이름과 함께 제공하였고 그 이후부터는 함수 이름은 GPT가 직접 지었습니다. 따라서 저는 달라진 속성만 제공했습니다. 그리고 완전히 맥락을 파악하여 p2부터 p6까지 한 번에 24개의 함수를 자동생성했습니다. 약간은 번거로운 작업이었지만 어떻게 패턴을 GPT에게 인식시키는지 알아볼 수 있었습니다. 

 

 

정리

 그럼 이번 글의 핵심은 무엇일까요? 과연 폰트 속성을 만드는 함수에만 이 강의를 적용할 수 있을까요? 아닙니다. 핵심은 표본 함수를 하나, 그리고 일부를 조금씩 제공하는 것입니다. GPT가 패턴이 있는 함수 혹은 코드라는 것을 인식하면 패턴화된 코드를 쉽게 제공받을 수 있습니다. GPT가 학습할 수 있도록 가장 규칙이 있는 부분을 제공해보시는 것을 추천드립니다. 여기서 주의할 점은 이러한 문맥을 GPT가 인식하고 있는 동안 해당 맥락과 전혀 관련이 없는 질문을 하면 안 된다는 점입니다. 그러면 다시 처음부터 질문을 해야할 수도 있습니다.