충격 고로케 개발! 알고보니..

올해 초, 국내 주요 언론사의 “경악, 헉, 충격”과 같은 ‘낚시성 제목’ 기사를 모아주는 큐레이션 웹사이트 ‘충격 고로케‘가 화제를 일으켰습니다.

고로케 어워드에서 보시면 충격상, 알고보니상, 숨막히는상 등도 보실 수 있습니다.

이 웹사이트를 만든 이준행 개발자에 대한 기사도 여기 저기서 쏟아져 나왔는데요~

README에서는 이준행 개발자를 인간적으로 한번 더 고찰해 보는 시간을 가져보았습니다.
이상기온으로 날씨가 완전 더웠다가! 다시 추워진 봄이 오려는 3월의 어느 날, SK플래닛이 위치한 을지로의 커피집에서 이준행 개발자를 만났습니다.

개인적으로 궁금한 것들을 잔뜩 여쭤봤는데, 아래 답변 참고하세요~.

충격 고로케는 어떻게 만들게 되셨어요?

만들게 된 배경이요?^^ 너무 솔직하게 이야기해도 되는지 모르겠지만, 정말 별 생각 없이 만들었어요.  알려지는 게 목적으로 만든 서비스라기 보다는 개인적으로 궁금해서요~. 솔직히 말씀 드리면 코드도 몇 줄 안되고 짧답니다.

앗 몇줄 안 되는 코드! 그럼 만드는데 얼마나 걸리셨어요? 기술적인 이야기도 궁금해요

코드 짜는 데는 정말 1시간 정도 걸린것 같아요. Python으로 기사 집계하는 로직을 간단히 만들고 Django에 짜둔 간단한 모델에 집계 데이터를 넣은 뒤 웹페이지에 키워드 별로 간단히 결과를 보여주는 것이 전부입니다.
집계 로직은요~ 모든 신문사들이 공개적으로 제공하는 실시간 최신 기사제목들 중 문제의 ‘충격’ ‘경악’ ‘결국’ ‘알고보니’ ‘폭소’ ‘헉’ ‘무슨일이’ ‘살아있네’ ‘이것’ ‘몸매’ ‘미모’ ‘숨막히는’ ‘ㅇㅇ녀’ 등의 키워드가 있으면 잡아내는 것이지요.

화면 구성은 어떻게 나온 거에요?

기사를 나열하고 순위를 매기는 것이 전부인 사이트였기 때문에 다른 디자인요소는 사실 고민할 필요가 없어 이미지 하나 없이 CSS 로 간단하게 페이지 레이아웃을 구성했습니다. 고민에 5분도 안 걸렸던 것 같아요. 제가 의도했던 것은 이 키워드들이 남용되고 있다는 것을 그대로 보여주는 것이었기에 딱 그 정도 강조를 위한 구성요소만 고민했습니다. 강조 방법은 색칠이죠. CSS의 color와 background-color 속성이 전부입니다. 저희 어렸을 때 중요한 사항에 빨간 줄 쫙 긋고~ 형광펜 칠하고 그렇게 하잖아요. 사이트 배치도 그냥 생각나는 대로 꾸민 그대로, 현재 남아있는 것이랍니다. 키워드에 특별히 하이라이팅해주는 <b> 태그 걸어 빨간색 배경 칠해주고, 월 단위 집계를 추가하고, 단어에 대한 새로운 해석을 하나 추가해 둔 정도에요. 텍스트를 늘어놓으면 그저 텍스트일 뿐이고, 포털 첫 페이지 뉴스영역이 바로 그런 모양새죠. 이 텍스트에 색칠을 하고 의미를 부여하는 순간 그것은 컨텍스트가 되는 것이고 메시지가 되는 것이죠. 언론사별 집계에 활용된 그래프는 Data Visualization 에서 주로 활용되는 d3.js 기반의 Rickshaw 라이브러리를 활용한 것입니다. 숫자를 넣으면 알아서 인터렉티브 요소를 담은 그래프를 그려줍니다. 다시 말하자면 적절한 오픈소스를 찾아내 신속히 가져다 쓴게 전부입니다. 🙂

사이트 유명해진 이후에 추가적으로 나온 아이디어나 다른 개발자의 요청은 없었는지요?

저는 사실 사이트가 유명해진 것도 모르고 있었어요. 1월 3일에 만들어놓고, 그 다음날인가  ‘충격 고로케’를 아침엔가 점심때인가 페이스북과 트위터에 공개했어요. 그러자 몇시간도 안되어 키워드를 추가해달라는 친구들의 연락이 마구 오기 시작했고, 한 줄에 다 넣을 수 없어 결국 두 줄로 늘렸습니다. 그러고서 며칠 뒤부터 신문사 기자친구들로부터 잘 봤다고 너가 한거 아니냐고 연락이 오기 시작하고, 급기야 인터뷰 요청까지 오는데 무슨 영문인지 몰라 검색을 해보니 이미 수천여 건 넘게 소셜네트워크를 통해 공유가 되고 있었더라는.
저희 팀에서 개발한 아포가토 댓글을 달아두었는데, 아포가토에도 트래픽이 몰리기 시작하면서 더 견고한 서비스를 만들 수 있었습니다. 하!하!

개발하시면서 회사 업무에 지장은 없으셨어요? ^O^

제가 근무하는 Platform sw개발 1팀 같은 경우에는 팀장님 뿐 아니라 전체적으로 같이 일하는 분들이 이런 새로운 시도나 개발에 대해서 좋게 생각해 주시는 부분이 있어서, 직장에서 해야 하는 업무와 본인이 하고 싶은 일을 병행하는 것에 대해서 어려움을 느낀 적은 없습니다.
그 덕분에 충격 고로케 사이트도 나온 것 같아요! 퇴근 후에 집에서 인터넷 살펴보다가 1시간 못 되는 시간동안 만들었던 것이죠. 신경써야 할 게 많은 사이트였다면 회사 업무에 지장이 있었겠지만 오픈 이후에 손 봐야 할 사항도 없어서 그대로 두었더니 이렇게 되었네요. 퇴근 후 간단히 짠 코드만으로도 이렇게 사회적으로 큰 화제를 일으킬 수 있다는 것은 저도 이번에 처음 알았습니다. 오픈소스 활동과 회사 개발 업무를 동시에 하는 분들도 점차 많아지는 것처럼 아직 시도해보지 않으신 다른 개발자 분들에게도 얼마든지 가능한 일이라고 생각합니다.

무엇인가를 직접 만들고 싶어하는 후배 개발자에게 해 주고 싶은 말씀이 있다면요?

자기 서비스를 만들고 싶어하는 욕구들은 개발자라면 다 있을 것이라고 생각합니다.  여러 가지 방법이 있을 텐데요, 저 같은 경우는 학원에 다니거나 강습을 받기 보다는 직접 만들어보면서 배웠습니다.  스스로 공부도 꾸준히 해야 하구요. 시중에 좋은 앱은 이미 많지만, 나에게 딱 맞는 앱이 아니라면, 직접 만들어 보는것도 좋습니다. 예를 들어, 다이어트를 결심했는데 기존 만들어져 있는 앱들이 일일이 음식 량, 칼로리 등 입력하는 것들이 귀찮을 수 도 있고요, 내가 입력하고 관리해야 하는 체중 정보만 있어도 된다고 하면 그냥 만들어 써 보는 것이지요.

최근 기술 트렌드에 대해 주목할 만한것들에 대해 한말씀 하신다면요?

제 본업은 프론트앤드 개발자이기 때문에 일단 HTML5를 위시한 여러 브라우저 랜더링 기술을 우선 살펴보고 있는데요, 기술 레퍼런스 뿐만 아니라 그 기술로 어떤 UI나 UX를 구현하는지에 대한 트렌드도 함께 살펴보고 있습니다. 그 기술을 어디에 갖다 쓸지를 알아야 하니까요. 태블릿과 모바일 디바이스, TV, 레티나디스플레이 등 종전에는 없던 새로운 환경이 나타나면서 클릭 스크롤과 같은 전통적인 방식뿐만 아니라, 터치 기반으로 밀고 돌리고 당기는 인터페이스도 등장하고 있죠. 그 덕분에 서비스 UI상의 공간활용도가 급격히 팽창하면서 프론트앤드 개발 영역에서 손 대야하는 요소들도 점점 많아지고 있고, 경우에 따라선 OpenGL과도 융합되는 흐름도 나타나고 있거든요. 게임 만들 때나 쓰던 엔진으로 앱을 만드는 경우도 등장하고 있죠. 표현할 수 있는 폭을 더 넓히려는 시도일 것입니다. 이 모든 흐름들과 기술들을 다 파악하고 나서야 새로운 서비스를 만들 때 가장 적합한 인터페이스를 효율적으로 개발할 수 있고, 구현 가능한 기획요소를 자신 있게 조언할 수 있죠. 그 부분을 요즘 주시하고 있습니다.

질문을 살짝 비틀어보자면, 새로운 기술 새로운 트렌드는 정말 많이 쏟아져 나오고 있는데 이 기술과 트렌드를 어떻게 활용할지에 대해서는 논의나 고민이 그리 활발하지 않은 것 아닌가 하는 아쉬움이 조금 있습니다. 충격 고로케같은 사이트를 만들어볼까 고민만 했었던 다른 개발자들 이야기를 들어보니 일종의 빅데이터로 여겨 hadoop도 끌어오고 크롤러와 파싱 로직도 개발해야 할 것 같아 포기했다고 하더군요. 막상 탄생한 사이트를 보니 빅데이터를 찾을게 아니더라 라는걸 알았다고 합니다. 익혀둔 기술을 어디에 써야할 지를 읽어내려면 프로그래밍 기술 뿐만 아니라 그 기술의 맥락을 이해하는 것도 필요하다고 생각합니다. 이건 비개발자도 기술에 대한 이해가 필요하겠고. 개발자들도 매체나 사회, 시장, UX에 대한 이해가 필요하겠죠. 애플이 자사를 두고 인문학과 기술의 교차점에 있다고 잡스가 이야기했던 것처럼요.

고객에게 어떤 가치를 줄 것인지를 고민하고 그 가치를 만들어 내는 수단으로 데이터가(사람이 아닌 시스템 단에서 자동으로) 잘 활용될 수 있도록 서비스를 디자인하는 것. 그것이 핵심이라고 생각한다고 하신 김범준 Lab 장님의 말씀에 저도 격하게 동의합니다. 암요.

싸이메라로 멋진 사진 찍어서 올려드린다고 하니..

정확한 얼짱 각도로 찍어주셨습니다^^.

다음 번에 또 새로운 서비스 런칭 때 이준행 개발자 다시 모시겠습니다 🙂

SK플래닛

Facebook 

공유하기