[4주차_팀플01] 크롤한 웹데이터로 만들어보는 시각화 웹 서비스

http://techrank.kro.kr/

 

 

팀플01. 크롤한 웹데이터로 만들어보는 시각화 웹 서비스
: 신입 개발 직무별 기술 스택 랭킹 정보

 

---

 
 

프로젝트 기간 : 2023년 11월 6일 (월) ~ 11월 10일 (금) 총 5일
실제 작업 기간 : 2023년 11월 4일 (토) ~ 11월 12일 (화)

 

(대략 60시간 정도 소요)
 

 

 

1. 프로젝트 소개
2. 프로젝트 진행 내용
3. 프로젝트 결과
4. 회고

 

 

 

 

 

프로젝트 소개

프로젝트 공지

1차 프로젝트의 주제는 "크롤한 웹데이터로 만들어보는 시각화 웹 서비스" 이다. 본 프로젝트의 목표는 기본적인 개발환경 구축과 간단한 서비스 제작을 통해 데이터 엔지니어가 되기 위해서 가장 기본이 되는 파이썬 프로그래밍 기본역량과 Git/GitHub 사용법을 쌓는 것이다. 구체적인 기술로는 REST API와 Django 프레임워크를 사용한다.

 

 

 

 

프로젝트 주제 선정

채용 공고 사이트인 '점핏'과 '원티드'에서 '신입'을 위한 '개발 직군' 채용 공고를 크롤링하여, 기업에서 요구하는 스택을 유형별로 분류하여 무엇이 가장 많이 사용되는지 시각화 정보를 제공한다.
 
 

반응형

 

---

 
 
 

프로젝트 진행 내용 (TIL)

 

사전 미팅

팀장이 되었다. 앞으로 프로젝트 관리를 맡게 될 것 같다.
 
 

1일차

주제 선정 및 역할 분담
협업을 위한 환경 세팅 (Trello 프로젝트 관리, Notion 회의록)
[프론트] 화면 설계 + 기능 정의

 
주제를 최종적으로 선정하고 역할을 분담했다. 크롤링 2명, 백엔드 2명, 프론트 1명인데 나는 프론트를 담당했다. 피그마를 이용해서 화면 설계를 하고, 사이트를 분석하여 기능 정의를 했다. 그 외에 협업을 위한 준비를 하느라 시간이 많이 소요됐다.
 
 

---

 
 

2일차

가상 환경 설정 및 깃허브 클론
[프론트] 화면 제작 - index.html

 
1. 가상 환경 설정
먼저 가상환경 만들고, 실행을 했다. 무엇이 달라졌는지는 모르겠다.

# 가상환경 만들기
python -m venv pj01

# 가상환경 실행
cd pj01/bin
source activate

# 가상환경 종료
deactivate

 
 
2. 깃허브 클론
깃허브에서 다른 팀원이 만들어 놓은 브랜치를 복사해왔다.

# 복제하기 (원격 -> 로컬)
git clone https://github.com/whyison/TechStackTeamProject.git

# 특정 브랜치 복제하기 (원격 -> 로컬)
git clone -b {브랜치이름} --single-branch {깃허브 주소}

 
 
3. 로컬 저장소에서 작업

1) css 작업
2) index.html (메인 페이지) 작업
- 메인 비주얼 구현
3) result.html (결과 페이지) 작업
- 네비게이션 바, 상단 비주얼 구현

 
일단 오늘 목표는 메인 페이지 구조를 잡는 것이다. 서버를 틀어서 바뀌는 내용을 직접 확인하면서 작업했다.

$ python manage.py runserver

 
 
 

---

 

 

3일차

1) css 작업
2) index.html (메인 페이지) 작업
- 메인 비주얼 수정
- 검색 영역
3) result.html (결과 페이지) 작업
- 버튼 추가 및 메인 페이지와 연결

 

# 1. 공동 브랜치 가져오기
git pull origin {branch}

# 2. 충돌 해결하기
git config pull.rebase false

git add .
git commit -m ""

# 3. 내 브랜치에 올리기
git push -u origin {branch}

# 참고. 브랜치 전환
git checkout -b {branch}

 
 
 

4일차

1. 지역 모델 생성 및 데이터 적재 완료
2. 메인 페이지 
- 지역에 따른 상세 지역 검색 기능 구현 완료
3. 결과 페이지 
- 선택한 조건 화면에 표시하도록 데이터 연결 완료
- 해당 직무에 대한 설명, 해당 지역 채용 공고 수 영역 추가

 
 
지역 선택 기능을 위해서, Location 모델 생성 후 마이그레이션을 진행했다.

class Location(models.Model):
    name = models.CharField(max_length=50)
    parent = models.ForeignKey('self', null=True, blank=True, on_delete=models.CASCADE)

    def __str__(self):
        return self.name

python manage.py makemigrations
python manage.py migrate

 
그리고 Location 모델에 sido, sigg 데이터를 등록하려고 sido_sigg.py 파일을 생성하여 모든 정보를 담은 sido_sigg.json 파일을 제작하였는데 json 파일 인코딩이 잘못되었는지 한글이 깨져서 나오고, Location 모델에 생성이 안 되어 장고 쉘에서 처리해주었다.
 

& python manage.py shell

from main.models import *

sido_data = ['전국', '서울', '경기', '인천', '부산', '대구', '광주', '대전', '울산', '세종', '강원', '충북', '충남', '전북', '전남', '경북', '경남', '제주', '기타']
sigg_list = [[], ['강남구', '강동구', '강북구', '강서구', '관악구', '광진구', '구로구', '금천구', '노원구', '도봉구', '동대문구', '동작구', '마포구', '서대문구', '서초구', '성동구', '성북구', '송파구', '양천구', '영등포구', '용산구', '은평구', '종로구', '중구', '중랑구'], ['가평군', '고양시', '과천시', '광명시', '광주시', '구리시', '군포시', '김포시', '남양주시', '동두천시', '부천시', '성남시', '수원시', '시흥시', '안산시', '안성시', '안양시', '양주시', '양평군', '여주시', '연천군', '오산시', '용인시', '의왕시', '의정부시', '이천시', '파주시', '평택시', '포천시', '하남시', '화성시'], ['강화군', '계양구', '남동구', '동구', '미추홀구', '부평구', '서구', '연수구', '옹진군', '중구'], ['강서구', '금정구', '기장군', '남구', '동구', '동래구', '부산진구', '북구', '사상구', '사하구', '서구', '수영구', '연제구', '영도구', '중구', '해운대구'], ['군위군', '남구', '달서구', '달성군', '동구', '북구', '서구', '수성구', '중구'], ['광산구', '남구', '동구', '북구', '서구'], ['대덕구', '동구', '서구', '유성구', '중구'], ['남구', '동구', '북구', '울주군', '중구'], ['가람동', '고운동', '금남면', '나성동', '누리동', '다솜동', '다정동', '대평동', '도담동', '반곡동', '보강면', '보람동', '산울동', '새롬동', '세종동', '소담동', '소정면', '아름동', '어진동', '연기면', '연동면', '연서면', '용호동', '장군면', '전동면', '전의면', '조치원읍', '종촌동', '집현동', '한별동', '한솔동', '합강동', '해밀동'], ['강릉시', '고성군', '동해시', '삼척시', '속초시', '양구군', '양양군', '영월군', '원주시', '정선군', '철원군', '춘천시', '태백시', '평창군', '홍천군', '화천군', '횡성군'], ['괴산군', '단양군', '보은군', '영동군', '옥천군', '음성군', '제천시', '증평군', '진천군', '청주시', '충주시'], ['계룡시', '공주시', '금산군', '논산시', '당진시', '보령시', '부여군', '서산시', '서천군', '아산시', '예산군', '천안시', '청양군', '태안군', '홍성군'], ['고창군', '군산시', '김제시', '남원시', '무주군', '부안군', '순창군', '완주군', '익산시', '임실군', '장수군', '전주시', '정읍시', '진안군'], ['강진군', '고흥군', '곡성군', '광양시', '구례군', '나주시', '담양군', '목포시', '무안군', '보성군', '순천시', '신안군', '여수시', '영광군', '영암군', '완도군', '장성군', '장흥군', '진도군', '함평군', '해남군', '화순군'], ['경산시', '경주시', '고령군', '구미시', '군위군', '김천시', '문경시', '봉화군', '상주시', '성주군', '안동시', '영덕군', '영양군', '영주시', '영천시', '예천군', '울릉군', '울진군', '의성군', '청도군', '청송군', '칠곡군', '포항시'], ['거제시', '거창군', '고성군', '김해시', '남해군', '밀양시', '사천시', '산청군', '양산시', '의령군', '진주시', '창녕군', '창원시', '통영시', '하동군', '함안군', '함양군', '합천군'], ['서귀포시', '제주시'], ['기타', '기타']]
sigg_data = {}

for i in range(len(sido_data)) : 
    sigg_data[sido_data[i]] = sigg_list[i]

for i in sigg_data : 
	Location.objects.create(name = i)
    for i in range(len(sigg_list)) :
        for j in sigg_list[i] :
             Location.objects.create(name=j, parent=Location.objects.all()[i])

Control + D   # 종료

 
 
그리고 검색 기능을 자바스크립트를 이용하여 구현했다.
 
 
선택한 조건이 결과 페이지에 보이도록 수정도 완료했다.
 
 
그리고 이제 데이터 분석할 차례이다. jupyterlab에서 원본 csv 파일을 받아서 진행할 예정이다. 직무별 기술스택의 “유형”이 10개 이상인 것만 분석하기로 결정했고, 데이터 분류를 어떻게 할 지, 그래프 유형은 무엇으로 할 지에 대해서 결정 후 팀원에게 전달했다.
 
 
지역별로 나누면 데이터가 너무 없어서 시각화 기준에 지역별 분류는 넣지 않았고, 대신 결과 페이지에서 해당 지역 채용 공고 수를 보여주기로 해서 그 내용을 추가했다. 그 외에 결과페이지 하단에 직무에 대한 설명도 넣었다.
 
 
내일은 시각화한 데이터에 대해 결과 페이지로 연결하고, 조건 검색 예외 처리, 셀렉트 박스 비활성화 문제 등에 대해서 해결해야 한다.
 
 
 

5일차

1. 파비콘 적용
2. 지역 검색 기능 보강
- 처음에는 상세 지역 선택 비활성화 처리

 
우선 파비콘 문제를 해결했다. 화질이 너무 깨져서 ico 대신 svg를 올렸는데, 브라우저에서 지원하지 않는 것인지 뜨지 않아서 여러 번 확인한 후에 그냥 ico로 다시 바꿨다. 좀 더 화질 좋은 ico로 바꾸게 되었다.
 
그리고 무언가를 잘못 건드렸는지 지역 선택에서 오류가 나서 해결하는데 좀 시간이 지체되었다. 그냥 인터넷 캐시의 문제였는지 무슨 문제였는지 모르겠지만, 로컬 저장소를 삭제하고 다시 원격 저장소에서 브랜치를 다운받아서 해결했다.
 
index.html에 있던 자바스크립트도 별도의 파일로 분리했다.
 
 
 

+ 1일

1. 직무 비선택 시 얼럿 창
2. 결과 페이지 그래프 시각화 (스타일 변경)
3. 결과 페이지 그래프 조건 설정 (스택이 5개 미만일 경우, 이상일 경우)
4. 지역 모델 수정 : 상세 지역에 '## 전체' 항목 삭제

 
마무리 작업들이 남았다. 기능은 얼추 다 완성되어서 일단 직무 선택하지 않았을 때 얼럿창을 보여주는 기능을 수정하였고, 결과 페이지 그래프에 대한 시각화를 진행했다.
 

Before

 
 

After

 

 

 

 

---

 

 

 

프로젝트 결과

 

프로젝트 개요

신입 개발 직군 취업을 위한 기술 스택 분석

 

개발 직군 채용 공고 시각화를 통해 신입 구직자에게 직관적으로 정보를 제공하는 것을 목표로 한다. 웹 사이트에 접속하여 원하는 개발 직군과 지역을 선택하면 크롤링된 데이터로 분석한 기술스택 트렌드 정보를 보여준다. 결과 페이지에서는 개발 직군에서 요구되는 다양한 기술 스택을 프로그래밍 언어, 프레임워크, 운영체제 등 유형별로 나누어 무엇이 중요한지 한 눈에 파악할 수 있도록 시각화되 그래프로 제공한다. 또한 원하는 지역에서 진행 중인 신입 개발자 채용 공고의 수를 확인할 수도 있다.

 

이 서비스를 통해 신입들은 효과적으로 경쟁 상황을 파악하고, 필요한 기술을 강화하여 채용 경쟁력을 높일 수 있게 도와준다. 더불어 기업들은 특정 기술 스택에 대한 수요 동향을 파악하여 채용 전략을 세울 수 있다.

 

 

 

프로젝트 결과물

1) 깃 허브

https://github.com/whyison/TechStackTeamProject

GitHub - whyison/TechStackTeamProject: [Programmers] Data Engineering Team Project 01

 

2) 프로젝트 진행 관련 보고서

프로젝트_보고서_4팀2조.pdf

2.94MB

 

 

3) 프로젝트 결과물 소개 PPT

[4팀-2조] 1차 프로젝트 PPT.pdf

0.61MB

 

 

4) 프로젝트 시연 영상

 

5) 프로젝트 결과 발표 (Notion)

(별도 작성)

 

 

 

피드백

- 퍼블릭 서브넷에 다 올리면 안 된다. 프라이빗 서브넷과 구분지어야 한다.

 

 

 

---

 

회고

개발자로 도약하기 위해 진행한 과정에서 처음 시도해보는 팀 프로젝트였다. 그래서인지 의미가 참 깊다. 기간도 짧고 초면인 개발자만 있는 프로젝트라서 어떻게 진행될 것인지 가늠조차 할 수 없는 상태로 시작했다. 그래도 데브코스 진행 중에 한 번 팀장은 해보면 좋을 것 같아서 이번이 첫 프로젝트였지만 팀장도 맡아서 하게 되었다.

 

팀장으로써 프로젝트의 수준이나 프로세스를 파악하고 진행했다면 좋았겠지만, 모두 배우려고 만난 입장에서 그게 수월할 리는 없었다. 애초에 프로젝트의 목적이 성과보다는 학습 위주였기 때문이다. 그렇다면 목적인 학습은 잘 되었는가를 생각한다면, 나는 긍정적으로 답변할 수 있다. 역시 실전이 최고다.

 

역할을 프론트엔드, 백엔드, 데이터 파트로 나누어서 진행했기 때문에 다양하게 접하지 못했다는 점은 다소 아쉽지만, 서로 소통하면서 진행했기 때문에 간접적인 체험은 할 수 있었다. 프로젝트를 진행하면서 다른 부분도 해보고 싶다는 욕심도 생겼다. 좋은 현상인 것 같다. 다음에 혼자서 포트폴리오를 장고로 구현하는 방법에 대해서도 생각해 보았다. 무엇이 되었건 다섯 명이서 진행했던 프로젝트를 나중에는 혼자서 진행해보는 경험을 하고 싶다. 자신감이 생겼기 때문에 이런 마음이 드는 것 같다.

 

어쨌든 첫 번째 프로젝트를 무사히 마무리 할 수 있어서 좋았다. 물론 프로젝트 진행 중에 초반에는 너무 바빴지만, 그래도 기간 내에 잘 끝낼 수 있었다. 최종적으로 결과물이 나오고, 팀 내에서 결과물 발표를 했을 때에도 좋은 피드백을 들었기 때문에 뿌듯했다. 완성 후의 성취감과 함께 아쉬움이 있었지만, 이 아쉬움이 앞으로 더 발전할 수 있게 하는 동력이 되는 것 같다. (그래도 칭찬은 기쁘다)

 

역시 서비스를 기획하는 것도, 직접 만드는 것도 모두 재미있다. 지식을 더 쌓아서 더 큰 프로젝트를, 더 좋은 서비스를 만들 수 있으면 좋겠다.