결과물 URL : https://pycontest.chobobdev.repl.co/

1. 자기소개

안녕하세요 저는 복학을 2주앞둔 대학생 버니(버니당근당근)라고 합니다. 휴학기간중 많은 일들이 았었는데요, 작년 11월부터는 개인적인 사정으로 코딩과 거리두기를 해야하던 때가 있었습니다. 하던일이 잘 마무리 되어 기존에 하던 자료구조 공부를 하려고 준비하고 있던 때에 제눈에 콘테스트 공고가 들어왔습니다. 이 좋은 콘테스트에 참여해서 자기객관화의 계기가 어느정도 되길 바라는 마음에 단 1초의 망설임도 없이 repository를 생성했던것 같습니다. Python이라는 언어는 지금의 저를 있게해준 소중한 언어입니다. 8년전 프로그래밍을 입문하면서 처음 배운 언어이기도 하고, 언어문제로 많이 힘들시절 저에게 많은 위로와 힘이 되어준 언어이기에 매우 좋아하는 언어 중 하나입니다. 이때문에 더욱이 이번 콘테스트를 우승해 보자 하는 마인드로 열심히 임했던것 같습니다. 항상 공부를 하면서 느끼는 거지만 배움은 즐겁고 끝이 없는것 같습니다. 이번 계기로 평소에 별로 접해보지 못한 html 과 css와 많이 친해진 것 같습니다. 2년전 니꼬샘의 고언어 강의를 시작으로 슬랙을 통해서 많은 좋은분들을 알게되어서 너무 기뻐하고 있는 학생입니다. 이 글을 빌어 저에게 많은 조언을 해주신 분들께 감사하다는 마음을 표현하고 싶습니다. 대학 졸업을 할 때에는 저도 더 성장한 개발자가 되어있기를 바랍니다. 서론이 너무 길었네요 ㅎㅎ 바로 소개 들어 갑니다~

2. 서비스 소개

제가 LA에 있을때의 일입니다, 세계에서 가장 효자로 알려진 닉 퓨리형과 협곡에서 놀고있었을때 우리 정글이 정치질을 하더군요, 그때 닉형이 저에게 제 옵지에서 전적좀 봐봐. 그때 저는 깨달았습니다, 아 검색은 옵지구나!!!!!!

그래서 만들었습니다, 옵지를 오마주한 <OO.JJ>  채용 리스트!!!

<출처 : https://m.blog.naver.com/solgiloh0521/221269372415>

기본적인 틀을 어느정도 유지함과 동시에 저만의 색을 입히는 것도 중요하다고 생각하여 여러 시도를 해보았습니다. 그중 파이썬 첼린지 이기 때문에 컬러스킴을 파이썬 로고를 가져오면 좋을것 같다는 지인의 의견을 수용하여 파이썬의 메인 색인 파란색과 노란색으로 설정하였습니다.

2.1  검색

2.1.1 “나는 00 사이트가 좋아”

제가 이번 콘테스트에서 가장 중점을 두었던 부분입니다, 저는 문득 모든 사이트를 볼 필요가 있을까 라는 생각을 하였습니다. 그렇다면 검색을 할때 내가 보고 싶은것만 볼 수 있게 옵션을 넣는 것은 어떨까 라는 생각을 되었습니다. 그래서 저는 검색을 할때 사용자들이 미리 옵션을 사용 할 수 있도록 하였습니다.

2.1.2 sidebar 필터 & navbar 검색

사용자가 홈 에서 검색을하여 이동한 결과페이지에서 홈에서와 같이 필터를 넣어 다른 언어를 검색을 할 수 있으며, 동일한 언어를 다른 필터링 조건을 sidebar 필터를 이용하여 선택 할 수 있도록 설계하였습니다.

2.1.3 급하다 급해!!

너무나 바빠 python도 칠 시간이 없는 당신! 을 위해 준비한 원클릭 검색 버튼!!

홈 화면 하단에 위치한 원클릭 검색 서비스는 여러분의 소중한 시간을 지켜드릴 수 있도록 설계하였습니다. 그저 누르기만 하시면 모든 3 사이트에서 추출된 채용리스트들이 주르르륵 여러분의 눈 앞에 펼쳐집니다.

2.2 Scrape 기능 

 “누구보다 빠르게 남들과는 다르게 색 다르게 scrape 하는 scraper” 

우리의 시간은 소중합니다, 그래서 저는 어떻게 하면 사용자가 기다리는 시간을 단축 할 수 있을까에 대해 고민을 많이 해보았습니다. 처음에는 multithreading을 이용하여 여러 시도를 하며 지금의 기능을 구현하는데에 성공하였습니다. 제가 이 프로그램을 만들면서 제 가장 친한 친구와 이야기를 할 기회가 생겼었습니다. 제 친한친구는 제 프로그램을 보더니 매번 scrape을 해오는 거냐고 제게 묻더군요. 그 당시 저의 프로그램은 사용자가 검색할 때 마다 값을 긁어오는 매우 비효율적인 방식이었습니다. 제 친구는 제게 좋은 말을 해 주었습니다, 이렇게 계속해서 사이트에 요청을 해오는것은 해당사이트에 무리를  주는 것 이며 이는 매우 나쁜 개발 습관이라고요. 그때 저는 생각했습니다, 변동이 크지 않는 채용 사이트인점을 고려한다면 특정 주기를 두고 scrape을 하고 대부분은 기존에 저장해둔 값을 render 하면 해당 사이트에 무리도 주지 않고 속도도 개선될 것 이라고요. 저는 이 때문에 json파일을 이용하여 값을 불러오도록 하였습니다.  그리고 별개의 json파일을 만들어 각 언어별 최근 scrape한 시간을 기록해 두도록 설계하였습니다.

이와같이 가장 최근 업데이트 시간을 노출하여 사용자로 하여금 노출되어 있는 data의 fresh함을 스스로 판단할 수 있도록 하였습니다.

2.2.1 update 

OP.GG 에서 있는것 처럼 만약 사용자가 자료의 갱신을 원한다고 한다면 위 update 버튼을 통하여 자료를 갱신 할 수 있습니다. 이는 새롭게 scrape 하는 것과 동시에 갱신 시간까지 갱신하여 화면에 노출되도록 설계하였습니다. 

2.3 export

Csv export의 경우 현제 보여지고 있는 데이터를 기준으로 다운 받을 수 있도록 설계하였습니다. 제 프로젝트는 사이트 필터링이 존제하기 때문에 각 사이트 필터링별 다른 이름의 csv 파일이 생성되면 export 됩니다.

2.4 Back to top button

 가끔 검색 양이 매우 많을 때가 있습니다, 그렇다면 위로 다시 올라오려고 한다면 매우 tedious 하죠, 그래서 제가 내린 결론은 바로 back to top 버튼을 추가하는 것이었습니다. “Pagination 으로 처리하면 되잖아??. 네 맞습니다, pagination도 좋은 solution중 하나이죠 하지만 페이지 맨 아래로 내려갔다가 저 버튼을 누르면 촤라라라락 하면 올라오는걸 구경하는 것이 매우 매력적이라고 생각해서 이렇게 구현을 했습니다. 또한 사용자가 이미 맨 위에 위치해 있을때에는 back to top 버튼을 숨겨 불필요한 리소스를 줄일 수 있도록 하였습니다.

2.5  채용 리스트 수 

채용리스트 수를 한번에 볼 수 있으면 좋겠다라는 아이디어와, 이 숫자를 재치있게 표현 할 방법은 무엇일까 하다가 OP.GG에서 소환사의 레벨을 표시하는 방법에 접목시켜보면 어떨까 하는 생각에 구현을 해본것 같습니다. 

이와같이 data가 바뀌면 레벨이 바뀌는 것을 보실 수 있을 겁니다. 

2.6 언어 로고

몇몇 로고는 제가 저장을 해두어서 사용자들에게 노출 될 수 있도록 설정을 해두었습니다.

예를 들어서 python 처럼 말이죠, 하지만 제가 저장해 두지 않은 언어이거나 keyword가 검색되었는데 값이 있다고 한다면 default 이미지를 노출시킬 수 있도록 설계하였습니다.

<이미 있는 로고 예시>

<로고가 없는 언어 예시>

2.7 404 페이지

링크가 꼬였을때 우린 가끔 404 에러를 종종 보곤 합니다, 몇몇 사이트들은 매우 재치있는 404 페이지로 사용자들의 눈을 즐겁게 해주곤 합니다. 저도 그래서 무언가 special 한 404 페이지를 만들고 싶다는 생각에 여러 아이디어를 구상하던중 어릴적 고장난 우리집 뚱뚱한 티비가 생각이 났습니다. 우리가 흔히 알고있는 뚱뚱한 crt 티비를 제 404 페이지에 구현을 해보면 어떨까 하고 여러 자료를 조사하던중 매우 만족스러운 블로그를 찾아 참조를 해보았습니다.

404페이지에 도착을 한다면 3초후에 자동으로 홈으로 돌아올 수 있도록 설계도 해보았습니다.

2.8 찾는 내용이 존재하지 않을때

가끔 오타가 나거나, 존재하지 않는 Job들은 data를 반환하지 않습니다, 이럴때 빈 결과화면을 보여주는 것 보다는 다른 사이트들 처럼 결과를 찾을수 없다를 띄우면 좋을 것 같다라고 판단하여 한번 만들어 보았습니다.

또한 search again 을 추가하여 사용자로 하여금 홈으로 갈 수 있도록 하였습니다.

2.6 링크들

위 링크들은 이번 채용리스크 컨테스트와는 무관하나 노마드 강의의 우수함을 알리기 위해서 추가를 해본 것 같습니다. 제가 오마주한 사이트에서 여러 링크들이 존재 하였기 때문에 저도 무언가를 넣으려고 계획하던 중에 노마드 강의로 가는 링크를 추가하면 이쁠거 같다라고 생각하여 한번 추가를 해보았습니다.

아래 있는 이름들은 제가 개발하면서 간접적으로 도움을 주신분들을 기록하기 위하여 추가를 해보았으며, 본래 이름들을 누르면 깃헙 으로 이동하거나 노마드 프로필로 이동하는 코드를 이미 짜보았으나 너무 투머치한거 아닌가 해서 잠깐 동안 프로필 사진을 노출시킨 후 다시 홈으로 돌아오는 방법을 선택하였습니다.

[추가]

2.7 URL 들

제 웹사이트에서 제가 신경 쓴 다른 부분중 하나는 바로 URL 입니다.

만약 python을 Stackoverflow 의 결과만을 찾고 싶다고 한다면

https://pycontest.chobobdev.repl.co/result/language=python/so

위 링크를 통해서 접근할 수 있습니다. 또한 제가 여러 필터링을 걸어 두었기 때문에 만약 여기서 WeWorkRemotely도 또한 검색결과에 추가하고 싶다면

https://pycontest.chobobdev.repl.co/result/language=python/so&wwr

에서 결과를 확인 하실 수 있습니다. 또한 다음과 같이 예를 들어서 각 사이트들의 acronym을 바꿀경우에도

https://pycontest.chobobdev.repl.co/result/language=python/wwr&so

제가 미리 설정해둔 rule에 의해서

https://pycontest.chobobdev.repl.co/result/language=python/so&wwr 위 링크로 자동으로 redirect 되며 해당 요청을 수행합니다.

위 내용은 다른 모든 사이트들의 조합에 공통으로 적용되는 부분입니다.

[]

3.개발 과정 (어려웠던 점과 해결방법)

3.1 갱신 시간 

로컬 환경에서 작업을 할 때에는 문제가 없었지만 저는 문득 고민을 하게 된 부분이 바로 제가 repl.it에 올렸을때 서버의 시간이 사용자 마다 다를 수 있다는 생각을 하였습니다. 왜냐하면 노마드는 글로벌 하고 많은 분들이 계시니까요. 이부분을 고민하다가 저는 저장되는 갱신 시간이나, 현재 시간을 한국 표준 시간을 기준으로 비교를 하도록 설정을 하였습니다. 따라서 서버의 시간이 바뀌어도 항상 한국 표준시간을 따르기 때문에 갱신시간부분에서는 오류가 나지 않도록 설개하였습니다. 

3.2 CSS

가장 힘들었던 부분은 다름아닌 css 부분이 아닐까 싶습니다. Css를 정식으로 배워 보지 못했기 때문에 이 모든걸 구현하는것은 전부 인터넷의 자료들에 의존할 수 밖에 없었습니다. 그중 가장 기억나는 것을 공유해보자 합니다.

위 사진은 결과페이지에 rendering되는 버튼 중 하나입니다, 저는 세 사이트를 모두 scrape해온다는 의미를 전달하기 위해서 3개의 로고가 위와같이 겹쳐있도록 하고 싶었습니다. 하지만 윗줄에 위치한 remote ok 로고가 가운데 정렬이 되지 않아 고민을 하고 있었을때, 양옆 마진을 계산하여 margin-left에 값을 넣어 로고가 가운데에 위치할 수 있도록 처리하였습니다.

[추가]

3.3 Jinja2 문법

제가 flask를 거의 처음 써보는 것이다 보니 jinja2 문법에 대해서 이해가 많이 부족했던 것 같습니다.

공교롭게도 이또한 side button과 관련한 이슈였는데요. 제가 구상하던 것은 이미 'StackOverflow' 만 보고 있는 url에 위치해 있다고 한다면 사이드 버튼에서는 'StackOveflow'버튼이 노출되지 않게끔 하고 설계를 하고 싶었었습니다.

처음에는 {% set url = {{request.path.rsplit('/',1)[1]}} %} 이런식으로 표현을 하여 오류가 났었습니다. 이유는 Jinja2 문법오류가 있었기 때문입니다, 공식문서와 구글에서 열심히 찾아본 결과 {% set url = request.path.rsplit('/',1)[1] %} 다음과 같이 표현을 하면 된다는 것을 깨닳았습니다. 이미 플라스크에 익숙하신 분들은 웃고 넘어가실 수 있는 부분 같네요 ㅎㅎㅎ . 이 에러를 해결해 주고 나니 제가 설계하고 싶던 대로 이미 필터의 url 에 있으면 버튼이 render 되지 않는것을 확인했습니다.

[]

4. 앞으로 계획

저는 아직 반응형 페이지를 개발을 해 본적이 없기에 기회가 된다면 본 사이트를 모바일에서도 편하게 볼 수 있도록 설계를 해 보고 싶다는 생각이 들었습니다. 또한 몇몇 브라우저에서는 다르게 나타나는 것들도 또한 가장 많이 고쳐보고 싶은 부분들 중 하나입니다. 제 부족한 CSS 지식을 보충하기 위해서 CSS 강의도 구매하여 css에 대해서 더 공부를 할 수 있는 계기를 가지고 싶다는 생각도 매우 많이 들었던 콘테스트인거 같습니다. 특히 최근에 결제한 케럿마켓 강의도 열심히 수강하여 케럿마켓 1기 우수 졸업자가 될 수 있도록 열심히 공부를 할 예정입니다. 또한 제가 운이 좋아 1등을 하게 된다면 닉 퓨리처럼 멋진 효자가 될 수 있게 저의 어머니께 금 한돈을 드리도록 하겠습니다. 아직 배워야 할 것들이 많고, 경헝해야할 것들이 많지만 노마드 코더에서 열심히 배우면서 대학을 졸업을 앞둔 상황에서는 모두가 원하는 개발자로 성장해 있기를 바래봅니다. 긴 글 읽어주셔서 감사합니다, 2022년도에는 모두 좋은 일들만 가득하시고 취업과 이직운이 넘처나시길 기원합니다.

감사합니다 노마드 코더 슬랙 지박령 버니였습니다.