Monthly Archives: January 2014

WorldNewsInEnglish 디자인 적용 중

트리플 모니터를 이제야 제대로 쓰네ㅋㅋㅋ

트리플 모니터를 이제야 제대로 쓰네ㅋㅋㅋ

World News in ENGLISH - http://english.daylog.me

예전에 한번 포스팅했던 영어사진기사 모음 페이지의 디자인 작업. 너무나 멋진 시안이 나와버리는 바람에, 토요일 내내 별로 잘하지도 못하는 퍼블리싱에 열중하고 있다. 위의 사진은 지금 내 방인데, 제일 왼쪽의 윈도우PC 모니터에서는 IE, Chrome for Windows를, 아이맥 듀얼에서는 왼쪽부터 차례로 Safari for Mac, Chrome for Mac, Firefox for Mac 을 테스트하고 있다. (제일 오른쪽은 디자인 시안 이미지)

원영이형이 원래 짱인줄은 알고 있었지만, 그 커다란 기대보다 한참 이상으로 멋진 시안을 뽑아주셔서, 인규한테 부탁하고 기다리고 할 겨를도 없이 혼자 막 두드려버렸네; 기본적인 기능 차이는 거의 없다시피 하지만(사전을 선택할 수 있는 기능이 붙었는데 아직 이건 구현 전ㅋ) 기깔나는 UI 디자인이 붙는 것만으로 이 페이지를 막 쓰고 싶게 만든다.

전반적으로 iOS7 부터 대세가 된 minimalism 한 디자인이 깔끔하게 적용되어 있고, 사진 기사를 불러오는 본 페이지의 특성을 이용하여, 전체 배경을 살짝 어두운 흐린 이미지의 기사 이미지로 채우는 방식을 쓰고 있다. 이 방식은 너무 마음에 들어 이러한 기법을 적용할만한 다른 서비스는 뭐가 있을까 고민하게 만들 정도ㅋㅋ 다만 배경에 css3 필터를 쓰는 방식이 오로지 Chrome for Mac(내 주력 브라우져ㅠ)에서 일으키는 버그를 아직 잡지 못했다. 이거만 잡으면 완벽한 기법인데; 이 부분은 인규하고 같이 고민을 좀 더 해봐야겠다.

한가지 더 너무 마음에 드는 부분은, 전체 페이지에 한글이 한 글자도 안 들어가기 때문에(iframe 으로 불러오는 사전 제외하고) 구글 웹폰트를 이용해서 가독성/아름다움을 동시에 추구할 수 있는 타이포그라피를 적용했다는 것이다. 한글은 폰트 용량이 커서 웹폰트 적용이 좀 꺼려지는데 반해 영어의 경우는 그런 문제가 없어서 참 좋다. 나중에 시간 잡아서 한글 웹폰트 적용에 관한 문제들을 좀 잡아봐야겠음.

일단 PC용으로만 만들어놓은 상태라, 반응형으로 편집해 모바일에서도 좋은 가독성을 유지할 수 있도록 만들려고 한다. 껍데기만 만들어놓고 기능 구현은 미뤄놓은 것들도 순차적으로 작업할 예정. 모처럼만에 내가 만든 무언가에 설렘을 느낀다. 즐겁구나ㅋㅋ

영어 연습을 위한 영어뉴스사진기사 모음 페이지

최근에 ‘애로우 잉글리시’라는 비교적 잘 알려진 영어학습법 책을 읽고, 꽤 괜찮은 방법이라 생각되어 이 방법대로 영어를 연습하고 있다. 영어에 대한 감을 잡는 방법으로 괜찮다는 Jason님의 추천도 있고, 유툽에서 찾아본 동영상도 꽤 설득력이 있었음. 주된 내용은 김샘영어에서 설명하는 것과 약간 비슷하면서도 다른데, 핵심은 얼추 비슷하다고 볼 수 있다.

한국어는 어순이 없는 언어인 대신 조사를 통해 해당 어구가 어떤 역할을 하는지가 결정되는 반면, 영어는 어순에 기초한 언어이므로 조사가 없는 대신 단어가 나오는 순서가 그 문장의 의미를 결정한다는 것이다. 김샘은 이 부분을 설명하면서 ‘아기가 언어를 배우는 법’으로 넘어가고, 애로우잉글리시에서는 ‘이러한 사고방식을 이해하는 법’으로 넘어가는 차이점이 있는데, 그 차이점이 곧 두 접근이 어떤 다른 학습법을 만들어내냐를 결정한다고 보면 되겠다. 한때 열심히 몰두하던 김샘영어를 잠시 접어두고 이 방법에 집중하게 된 계기는, (사실 중간에 더 많은 영어학습법을 거쳐감ㅠ) 다음번에 포스트로 정리해서 올리도록 하겠다.

아무튼 애로우잉글리시의 공부법 중 상당히 비중있게 다뤄지는 부분 중의 하나가 영어로 된 사진 뉴스기사를 통한 공부법인데, 이 방법을 시도해보려고 참 여러 사이트를 뒤지고 찾았다. 그런데 아무리 뒤져도 영어로 된 사진 뉴스 기사를 보기 편하게 깔끔히 정리해놓은 곳이 없었음. 그러다가 그나마 제일 괜찮은 로이터통신 사진 기사 페이지를 보고 있는데 이 페이지가 AJAX 방식으로 구현된 것을 발견. 오호라, 간단히 크롤러 만들어서 괜찮은 기능 붙이면 참 쓸만하겠구나, 하고 하루만에 만든 페이지가 있다.

http://english.daylog.me

스크린샷 2014-01-01 오후 10.51.43

당연히 디자인 따위 없는 plain-page ㅋㅋㅋ 새로고침(혹은 아래의 버튼)을 누를 때마다 매번 새 사진 기사가 뜨고, 모르는 단어가 있으면 클릭 즉시 오른쪽의 프레임에 네이버 영어 사진을 띄워준다. 기존의 영어공부 방법처럼 해석하듯이 앞뒤를 오가지 않고, 모르는 단어가 나오면 스피디하게 오른쪽의 사전창에서 skimming 하는 방식으로 쓰기 위함이다. 이틀째 쓰고 있는데 마치 문장을 듣고 있을때와 마찬가지로 휙- 하고 읽을 수 있는데 큰 도움을 준다.

현재까지 크롤링 된 사진 기사 수는 대략 7만 7천개. 지속적으로 크롤링을 돌리고 있어서 무서운 속도로 올라가는 중인데, 이것 때문에 멀쩡하던 내 서버에 용량이 꽉 차서 한참을 정리해야 했다ㅋㅋ 이 정도면 기사의 숫자 자체가 그렇게 의미 있지 않을 거라 판단하여, 적당히 10만개쯤 채운 다음 크롤링을 중지할 예정이다. (내 서버의 용량은 소중하니까)

혼자 영어 연습하는데에 일단 매우 잘 쓰고 있고, 일부 지인들에게 공개한 결과 괜찮은 평을 듣고 있다. 좀 더 써보다가 확신이 들면 간단하게나마 디자인 입히고 반응형으로 설계해서 구글 애드센스나 하나 붙여볼까함. 크게 돈은 되지 않겠지만, 별다르게 돈 버는 구석이 전혀 없는 내 서버가 밥값을 하는 정도는 되지 않을까ㅋㅋ

많은 분들이 들어와서 보진 않겠지만, 여기까지 들어오신 분이라면 한번씩 써보고 추가했으면 하는 기능이나 바뀌었으면 하는 부분에 대해 댓글 달아주시길 바람.