소개
•상단 네비게이션 바를 적용한 법률서비스 원페이지(Front)와 스프레드 시트(Admin) 연동 테스트 작업
•벼락치기 작업으로 추가 액션 및 디자인 작업 제외 상태로 다음 스터디까지 보강 예정
진행 방법
•시간 절약을 극대화하기 위해 ChatGPT 대신 Claude만을 활용해 작업 시작
•지난 테스트 간 사이트 구조에 대한 구체적 제시 없이는 정확한 코드 작성이 불가한 점 확인
1. 번거로운 수정 시간을 줄이기 위해 아래와 같이 구체화 시켜 코드 작성 지시
법률 서비스를 제공하는 "크레딧닥터"란 Title의 반응형 웹사이트의 코드를 작성해줘.
단,
ⓐ HTML, CSS, Javascript 파일을 하나의 파일로 만들어줘
ⓑ 상단 고정 네비게이션 바가 있는 원페이지
•메뉴 구성은 4개로 "무 료상담", "개인회생", "개인파산", "질문과 답변" 순서로 버튼 배치
•Visual 영역은 법률 서비스에 어울리는 이미지를 배치.
•Visual 영역내 기입할 캐치프라이즈는 "가족에게도 말하지 못하는 비밀, 더 나은 내일을 위해 크레딧닥터가 함께합니다"를 2줄로 작성.
ⓒ Tailwindcss 사용
ⓓ Pretendard 폰트 사용
ⓔ 신뢰감을 높일 수 있는 색상과 디자인
ⓕ 이미지를 백그라운드로 사용
ⓖ 서비스 섹션 구성은 메뉴 구성과 동일하게 4개 영역 배치
(1) Visual 영역은 서비스 섹션과 별개 처리
(2) 제 1 영역은 상단 네이게이션 바 "무료상담" 클릭 시 이동될 수 있도록 처리, 아이콘이 가미된 Form BOX 배치
(3) 제 2 영역은 상단 네이게이션 바 "개인회생" 클릭 시 이동될 수 있도록 처리
•개인회생 섹션은 개인회생의 장점, 절차, 구비서류를 텍스트로 소개, 희망을 북돋을 수 있는 일러스트 이미지를 어울리게 배치
(4) 제 3 영역은 상단 네이게이션 바 "개인파산" 클릭 시 이동될 수 있도록 처리
•개인파산 섹션은 개인파산의 장점, 절차, 구비서류를 텍스트로 소개, 희망을 북돋을 수 있는 일러스트 이미지를 어울리게 배치
(5) 제 4 영역은 상단 네이게이션 바 "질문과 답변" 클릭 시 이동될 수 있도록 처리
•질문과 답변 섹션은 10개의 질문과 답변을 볼 수 있는 게시판 형태 처리. 제목을 클릭 시 답변을 확인할 수 있는 형태.
•지금 작성 버전에서는 질문은 Q1,Q 2, Q3, ..., Q10 형태로 표기, 답변을 A1, A2, A3, ..., A10 형태로 표기 할 것.
ⓗ 문의 하기 기능
•문의 하기 기능은 제 1 영역의 Form BOX를 의미
•Form 입력 항목은 총 8가지로 "이름", "전화", "상담분야", "채무금액", "거주형태", "거주지역", "소득형태", "상담희망시간"을 포함.
•입력 란 하단에는 "개인정보취급방침"란과 그 밑으로 개인정보취급방침 동의 여부를 선택할 수 있는 "동의" 및 "동의 하지 않음"을 라운드 버튼 처리.
•BOX 가장 밑에는 "무료상담 신청하기" 버튼을 배치, 입력란에 각 값을 빠짐 없이 적었을 때 버튼이 동작하도록 처리.
한국어 텍스트가있는 페이지의 스크린 샷
참고로,
• Tailwindcss
CSS 코드량을 최소화 해 모듈화 및 유지보수에 용이, 반응형 디자인을 기본 제공
• Pretendard Font
한국어, 영어 등 다국어를 지원하는 가변 폰트로 네이버가 공개한 Sandoll Noto Sans를 기반으로 제작, 웹과 모바일 환경에서 가독성과 균형감을 최적화 한 폰트
2. 클로드 코드만으로도 기대 이상 구현 되었으나, 더 정교한 작업을 위해 추가 사항 요청
ⓐ 영역의 공간 구분이 명확해 질 수 있도록 배경 색상을 추가.
ⓑ 제 1 영역과 제 2 영역에 적절한 일러스트 이미지를 추가.
ⓒ 페이지 최하단 Footer 영역 추가.
• 푸터 영역에는 Copyrightⓒ foxfory All Right Reserved를 중앙정렬 처리.
ⓓ 크레딧닥터 로고를 추가.
ⓔ 색상 배색을 Blue계열에서 Mint계열로 변경.
3. 하기와 같이 주요 변경 사항에 대한 피드백 받았고, 다시 수정된 코드를 다시 체크
ⓐ 각 섹션별 배경색상을 mint 계열로 변경하여 구분을 명확히 했습니다:
•무료상담: #E8F5F3
•개인회생: #F5FFFE
•개인파산: #E8F5F3
•FAQ: #F5FFFE
ⓑ 제1영역(무료상담)과 제2영역(개인회생) 에 일러스트 이미지를 추가했습니다.
ⓒ 푸터 영역을 추가하고 저작권 문구를 중앙정렬로 배치했습니다.
ⓓ 네비게이션 바에 로고 이미지를 추가했습니다.
ⓔ 전체적인 색상을 Blue 계열에서 Mint(Teal) 계열로 변경했습니다:
•주요 버튼 색상: teal-600
•호버 효과: teal-700
•섹션 제목: teal-700
4. 각 영역 이미지가 매끄럽지 못해 타협을 선택
•Visual 영역에서 변호사 이미지 제작 시도하였으나, SVG 형태로는 원하는 느낌을 구현할 수 없음을 확인
•로고 제작 시 별도 위치 제작 등 추가 문제 발생하여, 텍스트로 임의 배치
•단, 각 영역 설명 내용에 SVG 이미지를 배치해 단조로운 느낌을 수정
5. 가장 까다로울 것으로 예상했던 Form 작업은 상세 설명 기입 시 예상을 웃돈 구현을 확인
•예컨대 무료상담 신청 버튼 누르기 전 '빈 공간' 확인 시 버튼이 작동하지 않도록 지시→ 빈 공간 위치로 커서 이동하여 '입력란을 작성하라는 문구' 팝업하는 형태로 구현됨
•상담 희망 시간 설정은 드롭다운 박스 처리 예정이나, 현재 형태도 크게 불편해 보이지 않았음
•개인정보 수집 및 이용 동의는 라운드 버튼 처리 요청했으나, 의도를 파악해선지 체크 박스로 구현됨
6. 이후 각 영역별 개선 사항을 구분해 수정 진행 반복
한국 텍스트가있는 페이지의 스크린 샷
7. 최종적으로 구글 스프레드 시트와의 연동을 위해 Code.gs 코드 수정을 요청
•스프레드 시트 ID 확인 및 적용 방법을 Claude에 문의하였고, 정확한 답변을 받아 한 번에 적용
•단, 스프레드 시트 저장 데이터의 구조가 명확해야 하기에 생성한 시트에는 답변 순서에 따라 출력 값을 입력하도록 구성함
한국 텍스트가있는 페이지의 스크린 샷
중국어와 함께 스프레드 시트의 스크린 샷
결과와 배운 점
•구체화 작업은 처음이다 보니 약 3시간 30분 가량의 시간 소요가 발생
•요행을 부리려고 건드린 Replit가 아니었다면, 1시간 30분을 절약했을 가능성 다분
•아코디언 형태의 질답 게 시판 또한 요청 내용 이상을 알아서 검색 및 반영 가능했음
•추가 액션 구현, 이미지 업로드를 통한 디자인 반영을 주중 활용해 테스트 예정
•코딩 부분에서 기대 웃돈 퍼포먼스 확인한 바 다음 수순인 구조화된 초안 작성 자동화를 시도하고자 함
Tip
•영역 전체를 한 번에 수정 시도하는 것 보다는 '각 영역' 지정, '어느 부분'을 '어떻게' 수정할 것인지 지정 요청할 경우 단 번에 작업이 완료됨
•통상적 주제의 내용 구성은 섹션 지정과 어떤 내용을 기재해야 하는지 항목만 전달해도 내용이 구성됨
•Google Apps Script에서 빠른 수정 사항 적용 확인은 [테스트 배포] 이후 팝업한 페이지를 닫지 말고, 각 html 수정 후 새로고침(F5)만 눌러도 손쉽게 활용 가능함
•유튜브 추가 검색 통해 하나의 파일로 원페이지 구동을 꾀하였으나, Google Apps Script에서는 Code.gs와 Index 구분이 필요함
도움 받은 글 (옵션)
14기 사이드프로젝트
