소개
•상단 네비게이션 바를 적용한 법률서비스 원페이지(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기 사이드프로젝트
