brunch

연재 중 서비스 기획자의 시대가 온다 04화

라이킷 20 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김토니 Apr 14. 2024

안녕, GPT 이제 제대로 질문해 볼까요?

개발 비전공자의 ERP시스템 제작기

웹사이트 구조

그림 2. 웹사이트 구조

ERP솔루션 기능 중 상세화면을 만들기 위해 먼저, 웹사이트 구조의 이해가 선행되어야 합니다.

그림2의 구조는 1) Row 2) Column으로 구성되어 있습니다. 엑셀이랑 똑같죠?

1) Row (행):

"Row"는 수평 방향으로 요소들을 배열하는 데 사용됩니다.

웹페이지에서 수평으로 배치된 요소들의 그룹을 나타냅니다.

예를 들어, 웹페이지의 헤더, 본문, 푸터를 각각 하나의 "Row"로 볼 수 있습니다.

일반적으로 수평 공간을 차지하며, 안에 여러 "Column"을 포함할 수 있습니다.

2) Column (열):

"Column"은 수직 방향으로 요소들을 배열하는 데 사용됩니다.

"Row" 안에서 "Column"을 사용하여 내용을 수직으로 구성하고 정렬할 수 있습니다.

예를 들어, 웹페이지의 본문을 세로로 나누어 여러 "Column"으로 구성할 수 있습니다.

"Column"은 웹페이지의 레이아웃을 조정하고 다양한 디자인 패턴을 적용하는 데 사용됩니다.

그림 1. 프로젝트 상세화면

위의 그림 1. 프로젝트 상세화면의 구조를 살펴보면 상단의 헤더¹(로고, 로그인:관리자, 로그아웃버튼)와 인디케이터(1 고객정보, 2 상담단계-상품정보)를 제외하고 바디²부분에는 10줄의 Row로 필드들이 정렬되어 있습니다. 각각의 Row에는 용도에 따라 저장, 목록으로 버튼이 들어가 있고 등록일, 상담일, 담당자와 같은 필드들이 있는 Row에는 3 Column으로 구성되어 있습니다.

챗GPT에 이러한 구조를 만들어 달라 물어봅니다.

"내가 만들 웹사이트의 body부분에는 10개의 Row를 가지고 있으며 첫 번째 Row는 저장버튼, 목록으로 버튼을 가지고 있고 두 번째 Row에는 등록일을 캘린더 선택하는 입력필드³, 상담일을 캘린더 선택하는 입력필드, 담당자를 입력하는 드롭다운필드⁴ 총 3개의 Column을 가지고 있어 세 번째 Row에는 고객명이 필수값으로 텍스트 입력 필드가 들어가고 프로젝트라는 이름을 가지고 있는 텍스트 입력필드, 성별을 드롭다운으로 남/여/알 수 없음 필드를 가지고 있고 이것도 마찬가지로 3개의 Column을 가지고 있어, 이를 HTML구조⁵와 간단한 CSS⁶로 만들어줘"

그림 3. 챗 GPT에게 위와 같은 구조를 만들어 달라고 요청합니다.

그림 4. 챗GPT가 만들어준 간단한 HTML예제

위와 같이 프론트 화면코딩이 챗GPT를 통해 완성되었습니다.

위의 구성 방식은 바닐라 방식 코딩⁷으로 제작된 버전이며 챗GPT에게 말로써 설명하기 어려운 부분이 있다면 부트스트랩⁸과 같은 이미 만들어져 있는 UI를 활용하여 만들 수 있습니다.

부트스트랩자료를 찾기 힘드시다면 상용화된 웹사이트를 서치 하며 웹사이트에 사용된 부분을 복사하여 사용할 수 있습니다. 저는 이 방법으로 타사가 이미 만들어놓은 구조를 많이 레퍼런스 했습니다.

그림 5. 인디케이터

그림 5의 인디케이터를 챗GPT에게 설명하기 힘들다면 타사에서 서비스 중인 웹사이트의 소스를 복사하여 붙여 넣기 하는 방법이 있습니다.

그림 6. 상용 중인 타사 웹사이트 인디케이터

그림 6은 타사의 회원가입 화면 중 인디케이터 부분입니다. 크롬 개발자도구(단축키 F12)를 이용하여 요소 선택 툴(Ctrl(Command)+Shit+C)을 이용한다면 원하는 부분의 소스를 확인할 수 있습니다.

그림 7. 원하는 소스를 마음껏 참고할 수 있다.

</ul>

자 이렇게 레퍼런스 사이트의 소스를 복사해 와서 이제 GPT에게 어떻게 물어보면 될까요?

간단합니다. 아래와 같이 물어보세요.

"내가 만들 웹사이트 바디 상단, 헤더 아래 부분에 단계별 정보를 표시하고 싶어 이용자가 어느 단계에 있는지 알 수 있도록 말이지, 내가 주는 소스를 참고해서.

</ul>

1) 고객정보 2) 상담단계-상품정보 3) 실측단계-상품정보 4) 견적서단계 5) 완료 단계를 HTML로 만들어줘 그리고 현재 고객이 어디에 위치해 있는지 표시할 수 있도록 활성화된 단계에는 파란색으로 표시할 수 있게 CSS를 만들어줘 각 단계 디자인은 모든 단계가 가로 한 줄로 표시되며 각 단계별로 column이 일정했으면 좋겠어 그리고 단계별로 숫자를 표시하고 원으로 표시되었으면 좋겠어, 그리고 원 중간으로 통과하는 선도 하나 있으면 좋을 것 같아"

그림 8. GPT답변

그림 9. HTML로 만들어본 예제

상단의 그림은 GPT가 만들어준 웹사이트 예제입니다.

살짝 어색하죠? 원 중앙으로 선이 통과했으면 좋았을 텐데, 밑으로 내려가있네요.

이제 GPT에게 수정을 요청해 봅시다.

"가로줄이 원 정중앙을 통과해야 되는데 살짝 아래로 가있네"

그림 10. 언제나 정답을 알려주진 않는다.

GPT가 엉뚱하게도 글씨까지 가로줄로 묶었네요.

다시 한번 수정을 요청해 봅시다.

"선은 중앙에 가야 되는데. 다시 한번 알려줄게, 선은 원 중앙을 통과하고 글씨는 원 하단에 배치해야 돼"

그림 11. 얼추 완성된 모양

이제 얼추 모양이 나온 거 같습니다. 예제로 보여드린 사례처럼 GPT는 항상 정답만을 알려주지 않습니다.

대부분의 문제는 우리가 자세하게 묘사하지 못했기때문입니다.

하지만 우리는 정답이 나올 때까지 물어볼 수 있습니다. 더욱 자세하게 묘사할수록 GPT의 코딩능력은 늘어납니다.

남은 한 가지! 인디케이터를 웹사이트 중앙 사이즈 1280px내에 가두고 싶습니다. 아래 그림 12.처럼 말이죠.

여러분은 GPT에게 뭐라고 물어보실 건가요? 댓글을 남겨주세요. :-)

¹웹사이트를 방문했을 때, 맨 위에 보이는 부분을 "헤더(Header)"라고 합니다. 이 헤더는 일종의 웹사이트의 얼굴과도 같은 역할을 하며, 첫인상을 결정하는 중요한 요소입니다. 대부분의 웹사이트에서 헤더는 방문자에게 사이트의 명칭, 로고, 주요 메뉴 항목 등을 제공함으로써, 사이트가 무엇에 관한 것인지 한눈에 알 수 있게 해 줍니다.

²웹사이트의 "바디(Body)"는 웹페이지의 주요 내용이 담기는 부분을 말합니다. 즉, 웹사이트 방문자가 본격적으로 정보를 얻기 위해 집중하는 공간이죠. 헤더(Header) 아래에 위치하며, 푸터(Footer) 위까지 이어지는 이 구역은 사이트의 실질적인 콘텐츠를 포함합니다.

³캘린더 입력 필드는 사용자가 날짜를 선택할 수 있게 해주는 웹사이트의 한 요소입니다. 일반적으로 이 필드를 클릭하면 달력이 표시되고, 사용자는 편리하게 특정 날짜를 선택할 수 있습니다. 예를 들어, 호텔 예약 사이트에서 체크인 날짜를 선택하거나, 온라인 이벤트 등록 폼에서 이벤트 날짜를 고르는 데 사용됩니다.

⁴드랍다운 필드는 웹사이트나 애플리케이션에서 사용자가 여러 옵션 중 하나를 선택할 수 있게 해주는 요소입니다. 보통은 클릭하거나 탭할 때 목록이 아래로 펼쳐지며, 이 목록에서 원하는 옵션을 선택할 수 있습니다. 드랍다운 메뉴는 공간을 효율적으로 사용하기 위해 설계되었으며, 사용자 인터페이스를 깔끔하게 유지하면서도 다양한 선택지를 제공할 수 있는 방법입니다.

⁵HTML(HyperText Markup Language)은 웹페이지의 구조를 만들기 위해 사용되는 표준 마크업 언어입니다. HTML은 웹페이지의 콘텐츠와 구조를 정의하는 데 필요한 다양한 요소(elements)와 태그(tags)를 제공합니다. 웹 브라우저는 HTML 문서를 해석하여 사용자에게 시각적으로 표시하는데, 이때 HTML 코드는 웹페이지의 뼈대를 구성합니다.

HTML 문서는 기본적으로 다음과 같은 구조를 갖습니다:

⁶CSS(Cascading Style Sheets)는 웹페이지의 디자인과 레이아웃을 지정하는 데 사용되는 스타일시트 언어입니다. HTML이 웹페이지의 구조와 콘텐츠를 정의한다면, CSS는 이러한 구조와 콘텐츠가 어떻게 보일지, 즉 시각적인 표현을 담당합니다. CSS를 사용함으로써 텍스트 색상, 폰트 스타일, 요소의 크기, 배경 이미지, 요소 간 간격, 배치 등을 정의할 수 있으며, 이를 통해 웹페이지의 외관을 꾸밀 수 있습니다.

예를 들어, 모든 태그에 대한 텍스트 색상을 빨간색으로 설정하고 싶다면 다음과 같이 작성합니다:

이 경우, p가 선택자이며, color: red;가 선언입니다. 여기서 color는 속성, red는 값입니다.

⁷바닐라코딩은 기본적인 프로그래밍 언어나 웹 기술을 사용하여 코딩하는 것을 의미합니다. '바닐라'란 맛이나 향이 첨가물 없이 순수한 것을 의미하는데, 여기서는 프레임워크나 라이브러리 등의 외부 도구 없이 순수한 언어 자체를 이용하여 코딩하는 것을 가리킵니다.

HTML을 사용하여 구조를 정의하고, CSS를 사용하여 스타일을 지정하고, JavaScript를 사용하여 동적인 기능을 추가할 때, 외부 라이브러리나 프레임워크를 사용하지 않고 순수하게 이들 언어만을 사용하는 것이 바닐라코딩입니다.

⁸부트스트랩은 웹사이트를 쉽고 빠르게 디자인할 수 있게 도와주는 도구 모음입니다. 생각해 보세요, 웹사이트를 만들 때마다 버튼, 메뉴, 입력 필드 등을 하나하나 디자인하는 것은 꽤 많은 시간과 노력이 필요합니다. 부트스트랩은 이러한 요소들을 미리 예쁘게 만들어놓은 일종의 "테마 패키지"와 같아서, 웹 개발자가 쉽게 가져다 쓸 수 있도록 해줍니다.

keyword