[플레이데이터 SK네트웍스 Family AI캠프 16기] 3주차 회고

✅ 일주일 동안 한 일과 느낀 점

3주차에는 웹 크롤링 수업과 1차 팀 프로젝트가 함께 진행되었다.

Selenium 기반의 웹 자동화 기법을 실습하며, 사이트 구조가 고정되어 있지 않다는 점에서 단순한 복사가 아닌 페이지 구조 분석 > 동기화 제어 > 예외 처리까지 포함된 정교한 기술이 필요하다는 점을 체감했다.

7월 3일(목)~4일(금)에는 총 6인으로 구성된 조별로 1차 미니 프로젝트를 수행했다.
- 프로젝트 주제는 "전국 자동차 등록 현황 및 기업 FAQ 조회 시스템 구축"이었다.

•  자동차 등록 통계 시각화 (연도·월·차종·지역·연령·성별)
•  기업 FAQ 데이터 크롤링 및 검색 시스템 (현대, 기아, 제네시스)
•  MySQL 기반 데이터베이스 설계 및 연동
•  Streamlit을 활용한 데이터 조회 UI 구현

---

✅ 내가 맡은 역할 및 기여

# 현대자동차 FAQ 크롤링

공식 홈페이지의 고객센터 페이지 구조를 분석한 뒤, Selenium 기반 자동화 크롤러를 직접 설계하고, 단일 페이지 수집에서 시작해 카테고리별 전체 페이지 순회 및 동적 클릭 자동화까지 포함된 크롤링 시스템을 구현했다.

비동기 로딩 구조에 맞춰 WebDriverWait, scrollIntoView, EC.staleness_of() 등을 활용해 카테고리별 질문/답변을 안정적으로 수집했고, 수집된 데이터는 CSV로 저장한 후 MySQL DB에 삽입하여 팀의 Streamlit 시각화 페이지와 실시간 연동했다.

질문 클릭시 답변이 보임

 

# 기업 FAQ 검색 UI 구현 (Streamlit 기반)

FAQ 데이터를 단순히 출력하는 데 그치지 않고, Streamlit을 이용해 사용자 친화적인 검색 기능 UI를 직접 구현했다.

• 사용자가 키워드를 입력하면, 현대/기아/제네시스 세 브랜드 FAQ 전체에서 질문 텍스트를 기반으로 부분 문자열 검색을 수행
• 검색 결과는 브랜드별 탭 UI로 나뉘어 표시되며, 각 질문은 st.expander()로 구성해 클릭 시 답변이 펼쳐지는 형식
• 데이터프레임 필터링, 브랜드-카테고리-질문 구조화, Null 예외처리 등을 직접 구현

'주행' 이라는 단어를 검색했을 때 검색 결과가 잘 뜨는 걸 확인할 수 있음

검색 기능은 내가 혼자 구현한 파트였고, 다른 팀원들이 맡은 데이터 조회나 시각화 파트와 유기적으로 연결되어 작동했다는 점에서,
단순 구현을 넘어서 사용자 경험(UX)을 고려한 프론트 기획 및 개발 역량을 키울 수 있었다.

---

✅ 기술 회고: 크롤링 및 인터페이스 설계

현대자동차의 FAQ 페이지는 JavaScript로 렌더링되며, 각 항목을 클릭해야만 내부 답변이 열리는 구조다.
이를 해결하기 위해 다음과 같은 방식으로 크롤러를 설계했다:

• WebDriverWait, ExpectedConditions → 요소 로딩 안정화
• .scrollIntoView() + .click() → 버튼 위치 조정 및 활성화
• 페이지네이션 처리 → 숫자 버튼 순회 + '다음' 화살표 탐색 분기
• EC.staleness_of() → 페이지 전환 감지로 안정적 루프 구현

또한 Streamlit UI에 FAQ 검색 기능을 구현하며, 사용자에게 브랜드별/카테고리별로 정리된 정보를 빠르게 보여줄 수 있도록 기획하고 직접 구현함으로써, 프론트-백 데이터 흐름과 UX 설계까지 경험할 수 있는 좋은 계기가 되었다.

 

---

✅ 협업 경험

기아자동차 FAQ 크롤러를 맡은 팀원이 CSS 선택자, 페이지 전환 처리에서 어려움을 겪고 있었고, 내가 먼저 구현한 현대자동차 크롤러 코드를 기반으로 함께 디버깅하며 구조 분석을 도왔다.
결과적으로 팀원은 안정적으로 데이터 수집을 마칠 수 있었고, 내가 가진 기술을 공유하며 함께 성장하는 협업의 중요성을 다시금 느낄 수 있었다.

---

✅ 팀원들의 시군구 단위 Choropleth 지도 시각화 구현

우리 조의 시각화 파트에서 가장 차별화된 기능 중 하나는 시군구 단위 Choropleth 단계구분도 구현이었다.
다른 조가 주로 시도 단위(서울, 경기 등)로만 구분했다면, 우리는 행정구역을 ‘시군구’ 수준으로 세분화하여 지도에 표현했다.

• 값이 클수록 진한 색으로 채워지는 folium.Choropleth 기반 단계구분도
• 사용자가 선택한 연도, 월, 지역, 차종 조건에 따라 실시간 필터링 및 색상 스케일 자동 조정
• 마우스오버 시 시군구 이름 및 등록 대수를 tooltip으로 실시간 표시

등록대수가 클수록 색이 진함

 

이를 위해 GeoPandas로 행정경계 Shape 파일을 불러오고, 차량 등록 통계와 sgg_key 기준으로 병합하여
고해상도·고정밀 행정 시각화 기능을 Streamlit 내에서 완성해주었다.

---

✅ 전체 기술 스택 요약

카테고리 사용 기술

웹 크롤링	Selenium, WebDriverWait, ExpectedConditions, ChromeDriver, Pandas
데이터 처리	CSV, MySQL, SQLAlchemy, GeoPandas, Streamlit SessionState
시각화	folium, matplotlib, seaborn, GeoJsonTooltip, Streamlit
프론트 UI 구성	st.expander, st.tabs, st.text_input, st.button, sidebar, filter logic
DB 연동	dbconnect.py DAO 구조, 실시간 조회 API

---

✅ 아쉬웠던 점과 개선 포인트

• 크롤러 구조화 부족 → 추후 함수 분리 및 모듈화로 개선 필요
• 발표자료나 DB ERD 설계 등 일부 문서화 작업 참여 부족
• Streamlit에서 다른 시각화 탭 코드도 직접 작성해보는 기회가 있었다면 더 좋았을 것

---

# 다음주 계획

• 정보처리기사 SQL 파트 예습
• 복습 루틴 정착을 위한 수업 후 10분 기록 습관화

---

# 마무리

이번 3주차는 내가 단순한 학습자가 아니라, 실제 사용자와 팀을 위한 기능을 구현하고 기여한 개발자로 성장할 수 있었던 시간이었다.
내가 직접 구현한 크롤링과 검색 기능이 서비스에 포함되고, 팀원이 어려워하는 기술을 함께 해결하면서, 기술적 자신감과 협업 경험 모두를 얻을 수 있었다.

특히 사용자 조건에 따라 시각화되는 시군구 단위 Choropleth 지도와, 실시간 FAQ 검색 인터페이스는 데이터를 누구나 쉽게 탐색할 수 있게 만드는 ‘서비스화 경험’ 그 자체였고, 앞으로도 이런 실전 경험들을 발판 삼아 더욱 정교하고 가치 있는 시스템을 구현하는 개발자가 되고 싶다.