Blog
원안에 텍스트 넣기
H3 2012 메인페이지에는 글자가 원안에 들어가는 독특한 디자인이 사용되었다. CSS에는 원으로 글자를 배치시키는 기능은 없기 때문에 고민이 되는 부분이었다. 가장 간단하게는 텍스트를 모두 가운데 정렬 한 다음에 모양에 많게 줄바꿈을 해주면 구현이 가능하다. 하지만 세션의 제목이 나중에 변경될 수도 있다는 얘기를 듣고 이런 노가다성 해결책 말고 다른 방법을 찾아보기로 하였다. 모양이나 사진의 외곽선을 따라서 글자가 배치되는 디자인은 잡지책에서도 쉽게 볼 수 있다. 문제는 HTML요소는 모두 사각형으로 그려지기 때문에 이러한 모양 …
dev | 2012-10-25 | Comments (3)
브라우저 리플로우 횟수 측정
페이지가 랜더링 될 때 리플로우 횟수를 줄여야 한다는 말은 멋진 게코 엔진 동영상 덕분에 많이 알려져 있다. 리플로우에 관한 내용을 간단히 설명하자면 브라우저가 화면을 그릴때 화면에 변동사항이 생기게되면 이를 다시 계산해서 그려야 하는데 이 작업을 하는 동안에는 인터랙션을 처리할 수 없기 때문에 리플로우 횟수를 최소화하는 것이 브라우저 랜더링 속도나 반응성에 도움을 주게된다는 내용이다. 리플로우를 발생시키는 요인에 대해서는 많이 정리가 되어 있지만 실제로 내가 만들고 있는 페이지가 얼마나 많은 리플로우를 발생시키는지를 알아내는 방법 …
dev | 2012-10-16 | Comments (6)
H3 2012 사이트 오픈
작년에 이어 올해도 KTH에서 H3 컨퍼런스를 한다. 어제 H3 2012 사이트를 오픈했다. 사이트 제작에 참여를 했는데 사이트 규모는 작지만 여러가지 새로운 기술을 시도할 수 있어서 재미있었다. 뭔가 새로운 시도와 재미있는 기능을 선보이고 싶다는 부담감이 있었다. 결과가 아주 흡족하지는 않지만 너무 나대지 않고 절제된 인터랙션을 구현한데에는 어느정도 만족하고 있다. 컨퍼런스 컨셉이 밴드여서 음악을 넣고 싶었는데 음원이 문제였다. 원래는 존경하는 밴드들의 음악을 샘플링하려고 했으나 저작권때문에 포기하고 개러지밴드의 루프가 상업 …
work | 2012-10-11 | Comments (2)
링크 주소 알 수 없는 게시물 주소 알아내기
많은 사람들이 게시판의 글을 메신저나 메일로 공유하기 위해 주소를 복사해서 보내본 경험을 가지고 있을 것이다. 또한 그렇게 보낸 주소가 열리지 않는다는 답신을 받아본 사람도 많을 것이다. 보통 검색 결과나 게시판의 글과 같이 콘텐츠가 보여지는 용도로 사용되는 페이지는 데이터를 GET 방식으로 URL에 붙여서 보낸다. 그러면 그글의 위치가 URL로 표기되어서 다른 곳에 공유한다거나 즐겨찾기를 할 수 있게된다. 하지만 이렇게 변수명이나 변수값이 노출되면 보안상 좋지 않다는 잘못된 인식이 있어서 URL이 없는 페이지를 만드는 경우가 있다 …
web | 2012-09-18 | Comments (7)
in-page text-to-speech
WAI 메일링 리스트에 웹페이지에서 제공하는 음성출력엔진이 권장이나 강제 사항이냐는 질문이 올라왔다. 국내에서도 이를 악용한 마케팅 사례가 발견된 적이 있어서 나도 블로그에 몇번 우려하는 의견을 나타낸 적이 있는데 간단히 메일링에 올라온 내용을 요약해본다. 음성출력 기술이 필요한 사용자는 이미 OS 수준에서 지원되는 기능을 사용하고 있다. 사이트에서 제공하는 음성은 방해요소가 될 수 있다. 공공장소에서는 유용할 수 있으나 BrowserAloud는 플러그인 설치 권한이 필요하기 때문에 공공장소에서는 사용할 수 없다. 서체의 색상이 …
accessibility | 2012-09-10 | Comments (0)
파이어폭스 반응형 웹 디자인 보기
하코사에서 파이어폭스가 반응형 웹 디자인 보기(Responsive Design View)라는 기능을 지원한다는 내용을 봤다. 맥에서는 'Tools > Web Developer > Responsive Design View'에 있고 윈도우는 'Firefox > 개발자 도구 > 반응형 웹 디자인 보기'에 있다. 이 기능을 켜면 브라우저 창 크기를 변경하지 않아도 웹사이트를 다양한 해상도로 확인해 볼 수 있다. 회전도 가능하고 오른쪽 아래 모서리를 드래그 해서 자유롭게 크기 변경도 가능하다. 해상도별로 탭 열어 …
dev | 2012-09-05 | Comments (2)
!important의 느낌표는 구분기호
CSSTidy를 테스트 하던 듀트님이 버그가 있다고 했다. color: red !important;를 넣으면 color:red!important;로 느낌표 앞의 공백도 없어진다는 거다. 나도 버근줄 알고 테스트 케이스 만들어보니 왠걸, 잘 작동한다. However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal decla …
dev | 2012-09-02 | Comments (4)
가로세로 비율을 유지하는 반응형 박스
반응형 웹디자인에서는 max-width: 100%나 width: 100%를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법이 많이 사용된다. 이 때 높이는 콘텐츠가 가지고 있는 높이를 따르게된다. 컨텐츠가 글자라면 높이가 유동적이어야 하지만 이미지나 비디오의 경우에는 좌우 폭에 따라 비율이 유지되어야 한다. 가로가 100%로 되어 있기 때문에 세로도 퍼센트 값을 지정하면 되겠지만 퍼센트 값은 상위 요소의 값에 상대적이기 때문에 상위 요소의 높이를 지정할 수 없는 경우라면 퍼센트로 높이를 지정할 수 없다. 이 …
dev | 2012-08-22 | Comments (39)
라이언에서 앱스토어만 로그인이 안되는 문제
정확히 어느 시점에 문제가 시작됐는지 기억은 잘 안나는데 에어에 마운틴 라이언을 설치하려고 앱스토어에 들어가니 구매 내역과 업데이트 탭을 누르니까 연결할 수 없다는 오류가 나왔다. 로그인에 문제가 있나 싶어서 로그아웃하니 "Connection failed."라는 메시지가 나오면서 그 이후로 어떠한 계정으로도 로그인이 안됐다. 애플 코리아 고객 센터에 문의해서 PRMA과 NVRAM 리셋, 사용자 계정을 새로 만들어서 시도해도 안되어서 전문 부서로 넘어갔다. 그런데 그쪽의 QA가 서버쪽에 문제가 있는 것 같다고 자기들 머신에서도 비 …
life | 2012-08-14 | Comments (4)
파란 종료
내 손을 거쳐간 많은 사이트가 이제는 흔적만 남았지만, 파란에 기여한 코드가 그리 많지는 않지만, 파란 종료는 슬픔도 아닌, 아쉬움도 아닌 감정을 준다. 하이텔부터 시작한 kth와의 인연이 여기까지 이어져서 더욱 그런지도 모르겠다. 파란은 이제 역사가 되었지만 kth가 또 다른 역사를 쓸 수 있도록 기원한다.
work | 2012-08-01 | Comments (2)