애니메이션 easing에 숨은 비밀

UI 애니메이션을 코딩할 때 꼭 들어가는 양념 같은 게 있다. easing. 우리 말로는 한 마디로 옮기기 힘들어 풀어서 말하자면 애니메이션 흐름을 매끄럽게 이어주기 위해 동작 속도를 조절하는 것이다. (경제 용어에서는 quantitative easing을 “양적 완화”로 옮기기는 한다.)

계속 읽기…

비올 때 걸을까? 뛸까?

장마철이라 비가 오락가락한다. 어렸을 때부터 헷갈리던 것 중 하나는 비올 때 우산이 없는 경우 걸어야 비를 덜 맞는지 뛰어야 덜 맞는지 하는 것이었다. 뛰면 앞에 있는 비를 미리 가서 더 맞는 거 같기 때문이다. 내 경우 이 궁금증이 해결된 것은 대학 때이다. 벡터를 가지고 유량이 유입되는 양에 대한 계산을 하고서야 정확히 어떤 게 유리한지 알 수 있었다.

그런데 이것을 수치 계산이 아니라 21세기의 컴퓨터 기술을 활용해 시각적으로 보이면 좋지 않을까 생각이 들었다. 그래서 한번 만들어봤다. 비 맞기 시뮬레이션!
계속 읽기…

MongoDB University 강의 2강 – CRUD 1

지난 1강에 이어 두 번째 강의를 정리해본다. 이번 주제는 관계형 데이터베이스에서 흔한 작업들, 즉 CRUD라고 하는 작업을 MongoDB에서는 어떻게 처리하는가에 대한 내용이다. 내용이 길어 1, 2로 나눈다.

CRUD

MongoDB에서는 CRUD를 다음과 같이 말한다. 이러한 기능은 관계형 DB의 SQL 같은 별도 언어가 아니라 자바스크립트나 자바와 같은 개발 언어의 구문 형태로 API가 제공된다.
계속 읽기…

이미지의 가로세로비를 유지하면서 틀 안에 맞추려면

웹사이트 중에는 종종 이미지가 가로세로비(종횡비)를 못 맞추고 짜부라진 모양으로 나오는 곳들이 있다. 크기가 큰 사진들은 괜찮은데 좁은 자리에 가로 세로 크기를 한정시켜 맞춰넣는 얼굴 사진이나 광고 같은 것들에 그런 게 종종 보인다. 얼굴이 너무 넓적하다든지 몸매가 완전 날씬한 형태로 나오는 사진들이 그런 것들이다.

계속 읽기…

자바스크립트와 자바에서 공백 문자란?

웹 프로그램을 개발할 때 인터넷 익스플로러(IE)는 참 개발자를 괴롭게 한다. IE만의 예외 상황을 고려해야 하는 번거로운 경우가 얼마나 많은지… 특히 IE 8 이하는 발표된지 몇 년이 지났는데도 우리나라에서는 아직 사용자가 많다! 수년 전까지도 윈도 XP에서 IE 6을 사용하는 사용자가 가장 많았던 우리나라에서 개발자는 이래 저래 힘들다.

여기 그 문제 중 또 하나를 얘기해보려고 한다. 공백(whitespace) 문자의 범위에 대한 문제다.
계속 읽기…

PhantomJS를 활용한 웹 스크레이핑

웹에서 뭔가 필요한 자료를 찾을 때가 종종 있다. 한 번만 찾고 마는 경우라면 간단한데 정기 간행되는 기사나 웹툰(Webcomics) 같은 연재되는 컨텐트를 보려고 하면 일일이 눌러서 봐야 하기 때문에 흐름이 끊기는 게 싫기도 하고 광고가 페이지마다 뜨는 것도 마음에 안든다. 그래서 웹 스크레이핑(Web scraping)으로 필요한 컨텐트만 콕 집어서 한번에 가져온 다음 여유있게 보는 것이 편리할 것이다.

그래서 작성해봤다. 웹페이지의 컨텐트를 이미지로 저장하거나 텍스트 파일로 저장할 수 있는 자바스크립트 프로그램!

계속 읽기…

이클립스 validation 답답증

Building workspace

이클립스(Eclipse)나 스프링 STS를 사용하다보면 수시로 “Building workspace (00%)”와 같은 절차가 진행된다. 이클립스 하단 상태 표시줄에 한참을 표시되면서 사람 복장 터지게 만드는 그것.

엊그제 STS 3.3을 사용하는데 예를 들어 57%에서 멈춘 후 계속 진행되지 않는 현상이 발생했다. 그전엔 그런 적이 없는데… 5분을 기다려도 10분을 기다려도 딴 짓하고 와도 진행되질 않는다. 취소하고 이클립스를 종료해도 다시 나타나고 강제로 죽이고 이클립스를 재실행해도 또 나타나고 꼭 57%에서 멈추는 것이다! 심지어 워크스페이스를 다시 만들어봤다. 이러면 모든 설정이나 구성 내역이 사라지고 다시 시작하는 거니까 문제가 사라져야 되는 거 아닌가?
계속 읽기…

다양한 경우의 HTTP 요청 여부 정리

웹페이지를 개발하다 보면 이러저러한 개체에 대해 브라우저가 서버에 HTTP 요청을 정말 할까하고 궁금한 경우가 있다. 예를 들어 display: none; 스타일을 줘서 보이지 않는 이미지도 서버에서 받아올까 하는 궁금증이다.

일전에 이러한 궁금증에 대한 다양한 사례를 퀴즈로 풀어보는 외국 사이트가 떠서 나도 좀 풀어봤다(이 사이트는 프로그램적으로도 참신하게 잘 만든 사이트다. 꼭 크롬에서 보기 바란다). 무지 어려웠다. W3C의 HTML이나 CSS 명세서에 없는 사항인 경우도 있고 브라우저마다 실제 구현도 다른데 그걸 어떻게 많이 맞추겠나.

계속 읽기…