IT일반2014. 11. 15. 06:21

우연찮게 김창준님의 블로그에서 재미있는 퀴즈를 하나 발견했다. 개발자를 뽑는 어떤 회사의 채용 퀴즈인데, 시효는 이미 지난 문제지만 나 자신이 이런 종류에 필이 꽂히는 타입이라서 자세히 들여다보게 되었다.

퀴즈의 내용은 숫자를 입력 받아서 그에 해당하는 문자를 출력하는 것이고, 규칙은 엑셀과 같은 스프레드시트처럼 1은 A로, 2는 B로 변환하며, 26인 Z 다음부터는 AA, AB, … 에 해당된다. 프로그래밍 언어에는 제약이 없다. 필요하면 라이브러리를 동원해도 된다고 퀴즈 공고문에는 기재되어 있었다.

원래의 포스트에는 J언어로 아예 역함수까지 알짜배기로 짠 소스를 구경할 수 있었지만, 트랙백을 통해 다른 언어들로 시도된 내용을 보니 자바스크립트에 익숙한 입장에서 기왕이면 처음 발견했던 역함수 포함 J언어 버전과 격을 맞출 수 있는 코드를 구현해 보고픈 도전의식에 불타올라 버렸다.

<script>
function i2AB(n){return --n==-1?"":i2AB(Math.floor(n/26))+String.fromCharCode(65+n%26)}
function AB2i(s,p){p=p||0;return s==""?eval(p):AB2i(s.substr(1), "("+p+")*26+"+(s.charCodeAt(0)-64))}
</script>
<input id="num" value="65535">
<input type="button" value="1 to A" onclick="var n=document.getElementById('num');n.value=i2AB(parseInt(n.value))">
<input type="button" value="A to 1" onclick="var n=document.getElementById('num');n.value=AB2i(n.value)">

진지하게 Pure JS로 역함수까지 구현했다. 테스트는 바로 여기에서...

포스팅을 완성하고 나서 혹시나 싶어서 해당 회사 홈페이지에 들어갔더니 새로운 퀴즈가 걸려있다. 그건 다음 기회에...

P.S. 현재까지 출제된 모든 퀴즈가 수록된 좌표를 드디어 찾았다.

P.S. 하지만, 대부분의 철지난 퀴즈들은 이미지파일 소실로 확인 불가... -_-;

Posted by nextream
IT일반2014. 10. 15. 00:11

평소엔 잊고 있다가 누군가 언급하면 문득 '아, 그런 게 있었지!' 하며 떠올리는 사이트 중에 하나인 웹 아카이브. 오늘 평소에 자주 들르는 커뮤니티 사이트 자유게시판에서 누군가 언급하는 것을 보고선 예전에 한참 운영했던 개인 홈페이지의 모습을 오랜만에 다시 보니 촌스럽고 투박해도 새록새록 애환이 묻어나는 느낌이다.

그나마 예전 형태를 유지하는 모습들 중 가장 최근의 스냅샷 내용을 보니 참 그때는 나도 열정이 살아 숨쉬고 있었구나 하는 추억에 나도 모르게 사로잡히게 된다. 무식하면 용감하다고, 별로 잘 알지도 못하고 참 잘난 체도 많이 했고, 지금 보니 만감이 교차한다.

아마 그때처럼 다시 개인 홈페이지를 맨땅에 헤딩하듯 다시 운영하라고 하면 그때만큼은 절대 못할 것 같다. 그냥 알아서 집주인이 편의시설 대주는 입주형 블로거가 마음은 편하지. 띵가띵가~

Posted by nextream
IT일반2014. 10. 14. 22:43

굴림이냐 돋움이냐, 또는 11px이냐 12px이냐의 논란이 종지부를 찍을 줄 모르던 옛 시절이 아직도 기억에 생생한데, 벌써 하드웨어와 소프트웨어, 그리고 사람들의 인식은 세월을 훌쩍 넘어서 많은 변화를 겪었다. 이제는 2000년대 초 중반 스타일로 돋움 11px 글꼴로 설정된 블로그나 홈페이지는 뒤로 가기 버튼을 절로 찾을 정도가 되었다. 아니면 벌써 노안이 오고 있다거나. :-p

블로그는 읽기 편해야 한다. 내가 공들여 쓴 글들이 단지 눈이 아파서, 글꼴이 투박해서 폄하된다면 그 얼마나 속상한 일인가. 가독성이 뛰어나고 미려하며 눈에 착착 감기는 맛이 있는 글꼴을 되도록 설정하는 것이 필요하다. 여자들이 화장을 하는 이유와 근본적으로 다를 바가 없지 않겠나.

망할 굴림과 돋움을 제쳐두고 최근 추세에 맞춰서 가장 접근성이 뛰어나고 가독성이 좋은 글꼴들을 나열해 보았다. 천생 공돌이인 내가 무슨 능력이 있겠는가. 입 소문으로 좋다고 회자되는 것들 중에 추려냈을 뿐이지.

  1. 애플 산돌 고딕 네오
  2. 나눔고딕
  3. 맑은 고딕

사실 글꼴 전문가들은 이보다 더 좋은 해법을 찾을 지도 모르겠지만, 내 입장에서는 철저하게 비용 대비 효과 측면을 고려하지 않을 수 없다. 여기서 비용이란 진입장벽이고, 효과는 글꼴의 기능성, 즉 가독성과 미려함이다.

효과 측면에서의 위 글꼴들은 일단 현재로서는 내 느낌상 100점 만점 중에 못해도 80 내지 90점은 먹고 들어가는 글꼴들이다. 하지만 여기서 주목할 점은 3개의 글꼴 중 두 가지는 해당 하드웨어(OS 혹은 플랫폼)에서 기본 글꼴이라는 점이다. 따라서 진입장벽이 낮다.

나눔고딕은 조금 특수한 경우인데, 실질적으로 나눔고딕 글꼴을 별도로 설치한 사람들이 꽤 있다. 옛날옛적 윈도 기본 글꼴인 굴림과 돋움에 한이 맺혀서 적극적으로 추가 글꼴을 설치한 사람들 중에는 아마 가장 저변확대가 많이 되어있는 글꼴이 아닌가 싶다. 하지만 그 여부를 단정지어 생각할 수 없고, '기본'을 추구하는 입장에서는 조금 조심스러운 면이 없지 않다.

블로그 글꼴 적용하는 이야기를 하는 많은 곳에서는 웹 폰트를 적용하는 이야기를 많이 하고 있다. 물론 예전에는 그 자체가 불가능에 가깝거나 되더라도 매우 한정적이었기에 비교적 적용하기 쉬워진 현재에 와서는 많은 시도와 반영들을 하고 있겠지만, 아직은 웹 폰트 적용방식은 깔끔하고 가벼우며 스피디한 웹 환경을 추구하는 내 지향점과는 그다지 맞지 않는 듯 하여 일단 배제시키려고 한다.

font-family: "Apple SD Gothic Neo", "Malgun Gothic", Sans-Serif;

스타일 정의(CSS)에서 위와 같이 지정하면, 가장 먼저 명시한 글꼴을 우선 적용하고, 해당 글꼴을 적용할 수 없을 때에는 다음 순서의 글꼴을 차례로 시도하여 적용한다. 그 어느 것도 적용 가능한 글꼴이 없다면, 가장 마지막에 명시된 Sans-Serif를 적용하게 되는데, 이것은 획의 끝이 장식이 없는, 즉 고딕 계열의 기본 글꼴을 적용하라는 뜻이다. 망할 굴림이나 돋움을 명시하지 않아도, 이정도 만으로도 충분한 설정이 된다. 추후에라도 '망할' 굴림이나 돋움 대신 브라우저 기본 글꼴로 좀 더 나은 글꼴이 설정되는 날이 오면 자동으로 해당 글꼴로 대체되는 효과까지 있으니 일석이조.

iOS보다 PC계열 사용자가 훨씬 많을 텐데 굳이 애플글꼴을 먼저 명시한 이유는, 애플이 글꼴에 죽고 글꼴에 사는 원래 그런 환경이기 때문이다. 가장 최상의 환경을 가진 사용자들은 얼른 선택하고 빠져나가라는(^^) 뜻으로 제일 앞에 명시한 것이고, 어차피 적용 우선순위에 따라 어지간하면 Sans-Serif까지 가는 일은 드물 거라 생각하여 설정한 내용이다. 어차피 iOS도 윈도도 아닌 환경에 대해서는 어떤 글꼴이 쓰이는지 잘 알지도 못하고, 괜히 설레발을 치는 것 보다는 해당 브라우저 사용자가 설정한 기본 글꼴을 존중하는 것이 바람직하다는 이유도 있다.

마지막으로, 글꼴의 크기도 좀 편안하게 읽으려면 11이나 12px같이 깨알 같은 촘촘함보다는 살짝 넉넉함이 묻어나며 너무 방만하지 않을 정도의 타협점을 여러모로 시도하다 결국 찾은 내 나름대로 적당하다고 생각한 크기가 15px이었다. 노안이 좀 더 심하게 온다면 여기서 더 커질 지도 모른다. :-p

Posted by nextream