사례

법무법인 청랑2

프로젝트 시작10월 13일 오전 09:52바로 개발 시작

개발 내용

법무법인 청랑(재개발·재건축 등 정비사업 전문 로펌)의 공식 홈페이지를 새로 만들어줘. 지금 사이트는 http://cheongrang.com (오래된 PHP 사이트)이고, 내용은 그대로 옮기되 화면 구성은 새로 짠다.

[화면]
- 메인: 대표 문구 "고객이 필요할 때 최적의 법률서비스를 제공하는 우리는 법무법인 청랑입니다", 큰 배경 사진 슬라이드 3장, 핵심 업무 요약, 최근 법인소식·업무사례 각 3건, 상담 신청·전화 버튼
- 청랑소개: 법인소개(정비사업 전문 로펌 소개 + 핵심가치 3가지: 고객 맞춤형·전문성·책임있는 법인 운영), 오시는 길(지도·주소·교통·주차)
- 구성원: 변호사 카드 목록 → 상세(학력·경력)
- 업무분야: 자문 / 민사소송 / 형사소송 세 묶음
- 소식자료: 법인소식, 업무사례(분류 필터: 신청·민사·행정·형사·기타) — 목록·상세·검색·페이지 나눔
- 상담 신청(새로 추가): 이름·연락처·이메일(선택)·의뢰인 구분(조합/조합원/현금청산자/시공·협력사/기타)·사건 분야·사업장명(선택)·희망 연락 시간·내용, 개인정보 수집·이용 동의 필수, 비밀 보장 안내. 제출하면 접수 완료 화면
- 개인정보처리방침, 이메일무단수집거부
- 관리자(/admin, 로그인): 상담 접수함(상태: 접수·연락함·완료, 메모), 법인소식·업무사례 작성/수정/삭제, 구성원·업무분야 수정

[내용 — 원본에서 그대로 옮길 것]
- 법인소개·업무분야 문장: http://cheongrang.com/sub/sub01_01.php , http://cheongrang.com/sub/sub03_01.php
- 구성원 3명 학력·경력: 대표 변호사 김영호 /sub/sub02_01_view.php?cat_no=1&idx=1 , 구성원 변호사 허승혜 idx=7 , 이병하 idx=5 (원본의 학력 연도표는 세 명 모두 같은 값이 잘못 복사돼 있으니 연도는 빼고 항목만)
- 법인소식 전부 /sub/sub04_01.php , 업무사례 전부 /sub/sub04_02.php — 상세 링크를 따라가 제목·분류·날짜·본문을 옮긴다
- 연락처: 서울특별시 서초구 서초중앙로 217, 4층(반포동, 대동빌딩) · TEL 02-3478-2701 · FAX 070-4142-1935 · 대표자 김영호 · 사업자등록번호 553-81-02739
- 교통: 고속터미널역(3·7·9호선), 사평역(9호선), 교대역(2·3호선) / 버스 법조단지(아크로비스타 방면) / 건물 내 주차 가능

[이미지]
- 원본 사이트는 https 가 아니라서 주소를 그대로 걸면 미리보기에서 깨진다. 아래 파일을 내려받아 이 프로젝트 안(web/public/images)에 넣고 거기서 쓴다. 원본 주소 직접 링크·프록시 금지.
  - 메인 슬라이드: http://cheongrang.com/images/main/mv1.jpg , mv2.jpg , mv3.jpg
  - 로고: /images/common/logo.png(흰색, 어두운 바탕용) · /images/common/f_logo.png(회색, 밝은 바탕용)
  - 구성원 사진: /images/sub/member.jpg 는 대표 변호사 카드에만 쓰고, 나머지 두 명은 이름 첫 글자 자리표시

[기타]
- 지도는 키 없이 Leaflet + OpenStreetMap 으로, 아래에 '네이버 지도로 보기'·'카카오맵으로 보기' 링크
- 상담 접수 알림 메일은 실제 발송 없이 모의 발송: 발송 내역을 DB에 남겨 관리자 화면에서 보이게, 발송 모듈은 분리
- 관리자 데모 계정 admin / demo1234 를 만들고 로그인 화면에 안내
- 모바일 우선: 상단 메뉴는 햄버거, 화면 아래 고정 '전화 상담'·'상담 신청' 버튼, 본문 글자 16px 이상(주 고객이 조합 임원 등 중장년층)
- 상담 접수 예시 3건을 더미로 넣어 관리자 화면이 바로 보이게

🧭 이렇게 이해했어요: 화면이 10개가 넘고 관리자 기능과 기존 사이트 글·사진 옮기기까지 겹쳐 한 번에 만들기엔 커요. 단계와 데이터 구조를 담은 계획을 먼저 보여드리고 확인받은 뒤 만들게요.

미리 알려드려요 — 지도는 Leaflet+OpenStreetMap 으로 키 없이 표시하고, 네이버·카카오 지도는 iframe 임베드가 막혀 있어 새 창 링크로만 연결해요.
미리 알려드려요 — 상담 알림 메일은 실제로 보내지 않고 발송 기록만 남기며, 실제 발송하려면 나중에 메일 서비스 계정·발신 도메인 인증이 필요해요.

실행과정12개 작업

record_decision

파일 생성

실행결과 · 3분 32초 소요

새 청랑 홈페이지를 어떻게 만들지 정리한 계획 문서를 썼습니다. 아직 화면은 만들지 않았습니다.

**어떤 홈페이지인가요**
- 지금 사이트의 글과 사진은 그대로 옮기고, 화면은 잡지 지면처럼 깔끔하게 새로 짭니다.
- 휴대폰에서 먼저 보기 좋게 만들고 글자를 크게 씁니다. 화면 아래에는 **[전화 상담] [상담 신청]** 버튼이 늘 떠 있습니다.
- 방문자 화면은 메인, 청랑소개(법인소개·오시는 길), 구성원, 업무분야, 법인소식·업무사례, 상담 신청과 접수 완료, 개인정보처리방침·이메일무단수집거부입니다.
- 법인 직원용 관리자 화면에서는 상담 접수함(상태·메모), 알림 메일 기록, 글 쓰기·고치기·지우기, 구성원·업무분야 고치기를 할 수 있습니다. 체험용 계정은 admin / demo1234이고, 예시 상담 3건이 미리 들어 있습니다.

**요청에 없어서 제가 정한 것**
- **사진 위에 글을 얹지 않습니다.** 대표 문구는 크림색 바탕에 크게 쓰고, 사진 3장은 그 바로 아래에 넓게 둡니다.
- **사진은 저절로 넘어가지 않습니다.** 읽는 도중 화면이 바뀌지 않도록 버튼을 눌러 넘깁니다.
- **업무분야는 한 화면에** 자문·민사소송·형사소송 세 묶음을 모두 보여줍니다.
- **상담 신청서의 고르는 칸**
  - 사건 분야: 자문 / 민사소송 / 형사소송 / 잘 모르겠음
  - 연락 받을 시간: 평일 오전 / 평일 오후 / 평일 저녁 / 언제든 가능
- **개인정보처리방침 등**은 지금 사이트 문구를 옮깁니다. 지금 사이트에 없으면 일반 문구로 만들고, 그때는 법인에서 한 번 검토해 주셔야 합니다.
- **알림 메일은 연습용입니다.** 실제로 보내지 않고 기록만 남깁니다.
- **로고**는 회색 로고를 쓰고, 흰색 로고는 보관만 합니다.

**지금 사이트 내용 옮기기**
- 만드는 중에 지금 사이트에 접속이 안 되면, 그 자리에 "원문 옮김 대기"라고 표시해 두고 알려 드립니다. 내용을 지어내서 채우지는 않습니다.
- 그때는 오른쪽 패널의 파일 업로드로 글과 사진을 올려 주시면 옮겨 넣겠습니다.

**만드는 순서**
1. **1차:** 방문자가 보는 홈페이지 전체, 지금 사이트 내용 옮기기, 상담 신청 저장과 알림 메일 기록까지 만듭니다. 중간에 화면 위에 "예시 데이터" 안내 띠가 잠시 보이다가, 저장 기능이 붙으면 사라집니다.
2. **2차:** 관리자 화면 전체를 만듭니다.

한 번에 다 끝나지 않으면 '이어서 실행' 안내가 뜹니다. 누르시면 이어서 만듭니다.

이번에는 실제 메일 발송과 기존 주소(cheongrang.com) 연결을 하지 않습니다. 완성 후 '배포' 버튼을 누르면 누구나 볼 수 있는 공개 주소가 생깁니다.

작성한 문서:
- 
- 

✅ 파일 2개 수정

3,361.8원 사용

개발 시작10월 13일 오전 09:57계획 확인 후 시작

계획 문서(docs/개발-계획.md)의 순서대로 개발을 시작합니다.

실행과정131개 작업

파일 읽기

파일 목록

파일 읽기

계획 문서를 확인했습니다. 1차 빌드(단계 ①~⑤)를 계획대로 진행하겠습니다.

계획

명령 실행

원본 사이트 접근이 가능합니다 (200 OK). 페이지 구조를 확인하겠습니다.

명령 실행

UTF-8 인코딩입니다. 페이지 본문 구조를 자세히 보기 위해 저장해서 살펴보겠습니다.

명령 실행

원본 접근 가능하고, 필요한 내용(법인소개·업무분야·구성원 3명·법인소식 5건·업무사례 15건·개인정보처리방침)을 모두 확인했습니다. 이제 수집 스크립트를 작성해 실행합니다.

파일 생성

명령 실행

카테고리가 null로 나온 버그를 발견했습니다. 확인 후 고치겠습니다.

명령 실행

카테고리 매핑 버그를 고칩니다 (board가 "work"인데 "case"로 비교한 오류).

파일 수정

명령 실행

파일 수정

명령 실행

좌표는 Nominatim으로 조회했습니다. 이제 고정 정보 상수 파일(site.js)을 만들고 ①단계를 마무리합니다.

파일 생성

계획

①단계 완료. ②단계(공개 화면 구현)로 넘어갑니다. 먼저 필요한 패키지(react-router-dom, leaflet)를 설치합니다.

명령 실행

이제 공개 화면 전체를 만듭니다. 전역 CSS부터 작성합니다.

파일 생성

파일 수정

파일 생성

파일 수정

파일 생성

파일 수정

파일 생성

파일 수정

파일 생성

모든 공개 화면을 작성했습니다. 개발 서버 로그와 오류를 확인합니다.

로그 확인

`hooks.js`에 JSX가 들어 있어 확장자를 `.jsx`로 바꿔야 합니다. 수정합니다.

명령 실행

로그 확인

명령 실행

로그 확인

명령 실행

로그 확인

명령 실행

step ② 화면이 모두 로드됩니다. 이전글/다음글 방향을 원본 사이트와 맞추기 위해 수정합니다.

파일 수정

계획

이제 Go 백엔드를 작성합니다. 먼저 스키마·시드 파일입니다.

파일 생성

파일 수정

Go 소스를 작성했습니다. 재시작하여 컴파일을 확인합니다.

앱 재시작

명령 실행

원본 목록 순서(idx8이 idx7보다 앞)와 달리 content.json 정렬이 뒤바뀐 버그를 수정합니다. (API는 ORDER BY로 이미 올바르게 내보내지만, 원본 데이터 순서도 바로잡습니다.)

파일 수정

명령 실행

이제 프론트 데이터 읽기를 API 호출로 교체합니다.

파일 생성

코드 검색

로그 확인

명령 실행

③단계 완료. ④단계(상담 저장 + 모의 메일)로 넘어갑니다.

계획

파일 생성

파일 수정

앱 재시작

명령 실행

로그 확인

명령 실행

테스트로 넣은 임시 접수 건을 정리합니다 (제가 방금 만든 테스트 데이터입니다).

파일 생성

명령 실행

④단계 완료. ⑤단계(1차 마무리)로 넘어갑니다. 예시 데이터 띠를 제거합니다.

계획

파일 수정

로그 확인

파일 수정

파일 목록

파일 생성

명령 실행

로그 확인

계획

🔎 완료 검토: 합격

실행결과 · 22분 25초 소요

1차 개발(공개 화면 전체 + 원본 내용 옮기기 + 상담 저장·모의 메일)을 완료했습니다.

## 완료한 것

**원본 사이트 내용 옮기기 (모두 원문 그대로)**
- 법인소개·핵심가치 3가지, 업무분야(자문 2·민사소송 16·형사소송 3 항목)
- 구성원 3명(김영호·허승혜·이병하) 학력·경력 — 연도는 제외하고 항목만
- 법인소식 5건, 업무사례 15건(제목·분류·날짜·본문·본문 사진)
- 개인정보처리방침·이메일무단수집거부 원문
- 이미지 6종(메인 사진 3, 로고 2, 대표 변호사 사진) + 글 본문 사진 20여 장을 프로젝트 안에 저장

**공개 화면 (주소)**
- 메인(대표 문구 + 수동 슬라이드 + 핵심 업무 + 최근 소식·사례) · 청랑소개(법인소개·오시는 길) · 구성원(카드→상세) · 업무분야(한 화면 3묶음) · 법인소식/업무사례(목록·분류 필터·검색·쪽 넘김·상세·이전/다음) · 상담 신청 → 접수 완료 · 개인정보처리방침·이메일무단수집거부
- 오시는 길: Leaflet + OSM 지도, 네이버·카카오 링크
- 모바일 우선: 햄버거 메뉴, 하단 고정 [전화 상담][상담 신청], 본문 16px 이상

**백엔드·저장**
- MySQL 테이블 7개 자동 생성, 최초 1회만 시드(중복 방지)
- 공개 조회 API(글·구성원·업무분야·소개·정책) + 검색·분류·쪽 넘김
- 상담 접수 `POST /api/consultations`: 서버 검증 + 접수번호(CR-YYYYMMDD-NNN) + 모의 메일 기록(모듈 분리)
- 예시 상담 3건 + 모의 메일 3건 시드

## 확인해 주실 것 (법인 검토 권장)
- **개인정보처리방침은 원본 문구를 그대로 옮겼습니다.** 다만 원문에 옛 호스팅 위탁업체((주)쓰리애니아이앤시)와 개인 이메일([email protected]), 수집항목 "회사명·담당자" 표현이 남아 있어, 실서비스 전에 법인 검토가 필요합니다.
- 지도 좌표는 Nominatim 조회(서초중앙로·반포4동, 약 37.5033/127.0111)로 고정했습니다. 정확한 건물 위치는 오시는 길 화면의 네이버·카카오 링크로 확인해 주세요.

## 다음 (2차)
관리자 화면(로그인 admin/demo1234, 상담 접수함, 알림 메일 내역, 글·구성원·업무분야 관리)이 남아 있습니다. 이어서 진행할까요?

> 지금 미리보기에 보이는 글·사진은 원본에서 실제로 옮겨 온 내용입니다(예시 데이터가 아닙니다). 상담 신청도 실제로 저장됩니다.

✅ 파일 51개 수정 · 명령 50개 실행 · 앱 재시작

5,272.9원 사용

이부분의 카드가 옆부분과 높이가 맞지않다.
이런 현상이 전체 페이지에 걸쳐서 여러곳에서 반복되고있는데 수정해줘

[선택한 화면 요소] 사용자가 미리보기에서 직접 지정한 요소입니다. 이 요소를 대상으로 작업해 주세요.
- CSS 선택자: #root > main > section:nth-of-type(2) > div > div:nth-of-type(2) > a:nth-of-type(1)
- 표시 텍스트: "자문\n\n주택재개발·재건축 등 도시정비사업 자문과, 지장물 이설·철거 공사비 부가가치세 환급 및 법인세 절감 자문을 제공합니다."
- HTML:
```html
<a class="card" href="/practice" style="display: block;"><h3 style="margin-bottom: 12px;">자문</h3><p class="muted" style="font-size: 15px;">주택재개발·재건축 등 도시정비사업 자문과, 지장물 이설·철거 공사비 부가가치세 환급 및 법인세 절감 자문을 제공합니다.</p></a>
```

10월 13일 오전 10:20

실행과정9개 작업

카드 높이가 맞지 않는 부분을 확인하겠습니다. 관련 화면 코드를 먼저 찾겠습니다.

코드 검색

파일 읽기

카드 클래스 사용처를 확인하겠습니다.

코드 검색

원인을 찾았습니다. `.card + .card { margin-top: 24px; }` 규칙이 원인입니다. 이 규칙은 세로로 쌓인 카드 사이 간격용인데, grid 레이아웃(핵심업무·청랑소개·구성원·오시는길) 안에서도 두 번째·세 번째 카드에 `margin-top: 24px`를 추가로 줘서 같은 행의 카드들이 위아래로 어긋나 높이가 안 맞아 보이는 것입니다.

`.card`는 모두 grid 안에서만 쓰이고(grid가 이미 24px 간격 제공), Location의 세 번째 카드는 인라인으로 간격을 주고 있으므로 이 규칙을 제거해도 안전합니다.

파일 수정

파일 읽기

CSS 수정이 반영됐는지 개발 서버 로그를 확인하겠습니다.

로그 확인

실행결과 · 1분 36초 소요

수정 완료했습니다.

**원인** — `.card + .card { margin-top: 24px }` 규칙이 원인이었습니다. 이 규칙은 원래 세로로 쌓인 카드 사이 간격용인데, grid 레이아웃(핵심업무·청랑소개 핵심가치·구성원·교통안내) 안에서도 두 번째·세 번째 카드에 `margin-top: 24px`를 추가로 적용해, 같은 행의 카드들이 위아래로 어긋나 높이가 안 맞아 보였습니다.

**수정** — 이 규칙을 제거했습니다. 이제 grid가 제공하는 `gap: 24px`가 카드 간격을 전담하고, 카드들은 같은 행에서 상단이 정렬되며 grid 기본 `stretch`로 높이도 균일해집니다. `.card`는 모두 grid 안에서만 쓰이고 오시는 길의 '주차' 카드는 인라인 여백으로 이미 처리돼 있어, 규칙을 없애도 다른 레이아웃에는 영향이 없습니다.

미리보기에서 핵심업무·구성원·청랑소개 카드가 나란히 정렬되는지 확인해 보세요.

✅ 파일 1개 수정

170.3원 사용

이 프로젝트는 AI 에이전트와의 대화만으로 만들어졌습니다

2-6e9057.glidev.ai

↗