brunch

라이킷 4 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이민우 Mar 20. 2016

JobJob 제작기

프로페셔널 구직자를 위한 채용 정보 + 회사 리뷰 조회 크롬 익스텐션

시작하며

개인적으로 구직에 있어 큰 비중을 두고 보는 것이 잡플래닛의 회사 리뷰다.

고용 안정을 가지고 있을 때에는 잡플래닛이나 원티드의 채용 정보 위주로 보고 있었지만,

구조조정의 칼바람을 맞고 갈 곳을 잃은 나는 급한 마음에 구인구직 사이트를 몽땅 뒤져야 했다.

하지만 급한 마음과 내 능력의 한계에도 불구하고 좋은 회사를 고르고 싶은 마음은 버릴 수가 없는 터라,

잡코리아와 잡플래닛을 번갈아 검색해가며 온라인 지원을 하기 시작했다.

문제의 발견

사실상 가장 큰 문제는 잡코리아가 회사에 대한 정보를 채용 정보에 붙여놓지 않았다는 점이다.

기껏해야 하트 몇 개 받았는지와 채용 정보 콘텐츠를 성의 있게 썼느냐 하는 것이 전부다.

잡코리아가 잡플래닛을 인수해줬으면 하는 그런 바람이 있긴 하지만 두 회사와 나는 아무런 관련이 없고.

혹은 잡코리아가 날 채용해줬으면 하는 그런 바람도 있긴 했지만...

안된다고 한다....

가내 수공업식 해결방안

야심 차게 잡코리아+잡플래닛으로 사업을 벌이기에는 두 회사 모두 당연히 이미 잘하고 있을 것이므로 빠르게 포기한다.

우선 두개 사이트를 이을 수 있는 최대한 간편한 수단으로 크롬 익스텐션을 생각했다.

아주 뚜렷한 대상 사용자(= 나)가 있으므로 그 사용자가 원하는 대로.

뒤에서 가만있다가 잡코리아 탭이 뜨면 그때 가서 잡플래닛 긁어와 뿅 하고 보여주면 된다.

크롬 익스텐션은 별다른 기술 필요 없이 단순히 웹사이트 만드는 것과 크게 다를 것이 없고 Chrome API 몇 가지만 사용하면 되니 매우 만만해 보였다.

별생각 없이 다음 단계로 넘어간다.

사전 조사

본격적으로 시작하기에 앞서 우선 대략의 그림을 그려보고 필요한 물건들을 챙기기 시작했다.

안타까운 것은 잡플래닛이 리뷰 정보를 열람을 위한 API를 제공하고 있지 않다는 점이다.

예전에 잡코리아 크롤링해서 뭔가 만들어보려다가 나를 디도스 봇으로 인식한듯한 차단 같은 걸 겪어봐서 불안하기는 하지만 잡코리아 트래픽 일부가 유입되는 얘기인데 나쁘지는 않다는 생각이 들어 나는 무턱대고 읽어오기 시작했다.

가장 중요하고 문제가 될 것은 세 번에 걸친 정보 요청이다.

1. 잡코리아에서 회사 이름을 읽어온다.

회사 이름은 잡코리아 채용 페이지에 들어가면 수없이 많이 박혀있다. 그중에 하나를 골라서 보내면 될 일.

어려운 것은 익스텐션 백그라운드에서 콘텐츠 페이지에다가 스크립트를 실행시켜 DOM객체 정보를 읽어와야 하는 점이었는데, 찾아보니 Chrome Tab API에서 간편하게 제공하고 있었다. 이건 문제없이 넘어가고.

2. 회사 이름을 잡플래닛에서 검색한다.

잡플래닛 사이트를 보니 검색창에 글자를 써넣을 때마다 서버와 통신해 json으로 회사 정보를 받고 있었다.

또, 별 인증 정보 없이 GET으로 요청해도 요청한 대로 값이 돌아옴을 확인했다. 이것도 문제없다.

3. 검색된 회사의 리뷰 페이지 읽어온다.

URL을 보아하니 회사 아이디 뒤에 info, reviews, salaries, interviews, job_postings를 붙이면 각각의 페이지가 나오도록 되어있다. 위 단계에서 얻은 회사 정보에 아이디가 포함되어 있으므로 요청을 위한 URL을 만드는 것은 간단했다. 별도로 인증 정보나 요청을 위한 부가적인 설정이 필요한지 보려 했으나 딱히 그런 것은 없고 그냥 GET으로 날려도 잘 받아오는 것을 확인했다.

한 가지 문제가 있었는데 잡플래닛의 정책상 인증되지 않은 사용자에게는 리뷰 하나만을 보여준다.

첫 페이지 리뷰 6개 정도는 익스텐션에서 보여주는 것이 좋겠다 싶어 익스텐션 내에서 인증 처리하는 방법을 찾아봤으나 생각보다 번거롭고 까다로운 작업이 될 것 같아 포기하고, 리뷰 하나만 보여주고 잡플래닛 링크를 다는 것으로 절충하기로 했다.

스케치

대략적인 흐름과 사전 조사는 마쳤고, 다음 차례로 간단하게 손그림을 그려본다.

이 과정에서 겉모양과 함께 출력할 데이터, 사용 흐름 등까지 모두 생각해놓아야 한다.

물론 코드를 치다 보면 빠진 부분이 나오게 마련인데, 그럴 땐 다시 그림을 그리는 과정으로 돌아오곤 했다.

가장 중요한 것은 조회 대상 회사의 평균 평점. 두번째로는 직원 추천%. 세번째로는 리뷰에 쓰여진 컨텐츠.

UI 작성

스케치한 그림을 바탕으로 더 구체적인 모습을 만들어봤다. 포토샵이나 스케치를 사용할 수도 있었지만 사실 코드를 치는 게 여러모로 빠르고 간편하다.

세상이 요새 좋아져서 HTML이나 CSS를 작성하면 브라우저에서 바로 적용돼 확인되니, 원하는 그림만 나오면 UI로 뽑는 것은 꽤 빠르다.

이 익스텐션의 용도는 별도로 정보를 가공하는 것보다는 잡플래닛의 정보를 그대로 보여주는 것이면 충분하므로, UI도 거의 그대로 가져왔다.

리뷰를 좀 더 보여주지 못하는 것이 아쉽긴 한데 잡플래닛으로의 링크 버튼을 좀 더 잘 보이게 넣어주는 것으로 만족했다.

평소 일할 때 그리던 스토리보드는 수십수백 페이지가 쉽게 넘어가 지치는데 요건 참 간단해서 좋았다.

Development

적당한 Chrome Extension + Redux 스타터킷을 가져와서 시작했다. 기본적인 Todo App이 들어가 있어 꽤 참고가 되었다. 스타터킷에 설정되어 있는 Webpack+Babel+HMR 조합은 이전부터 사용해와서 익숙하긴 한데, 쓸 때마다 까먹는 게 문제다. 딱히 대안이 없어서 쓰긴 한다.