Blog of Hyeonseok

첨부파일 강제 다운로드

웹브라우저는 등록된 형식의 파일을 직접 다룰 수 있는 기능이 있습니다. 예를 들어서 텍스트 파일이나 png 이미지 파일을 브라우저에서 열면 브라우저로 바로 내용을 확인할 수 있습니다. 플래시나 pdf 파일도 적절한 플러그인이 브라우저와 연결이 되어 있다면 플러그인을 브라우저에서 직접 구동하여 내용을 볼 수 있습니다. 브라우저가 파일을 요청할 때 서버는 파일의 형식에 따라 마임타입(mime-type) 정보를 함께 보내주고 이 마임타입에 따라서 브라우저가 파일을 어떻게 처리할지를 결정해서 처리하게 됩니다.

웹사이트의 첨부파일 게시판을 만들 때 파일을 무조건 다운로드 받게 만드는 경우가 많습니다. 파일의 형식을 웹서버에서 지정해주는대로 사용하지 않고 download.asp와 같이 중간에 처리를 한번 더 거쳐서 마임타입을 application/octet-stream으로 바꿔 줍니다. 그러면 브라우저는 이 파일을 어떻게 처리해야 할지 모르기 때문에 파일을 다운로드 받게 합니다. 다운로드 받은 파일은 사용자의 운영체제에서 처리를 결정하게 됩니다.

여기서 생각해볼 점이 있습니다. 무조건 파일을 다운로드 받게 하는 것이 과연 사용자를 위한 기능인가 하는 점입니다. 이렇게 다운로드 처리를 하지 않은 경우에도 파일을 다운로드 받고 싶다면 브라우저의 기능(Save link content as...)을 사용하면 되지만 파일을 브라우저에서 보고싶은 사용자는 방법이 없습니다. 사실 어느쪽이 더 사용자에게 좋다고 단정하기는 힘들고 보통은 사용자가 가지고 있는 기존 경험에 따라서 다를 것입니다. 하지만 사용자에게 선택권을 주지 않았다는 측면에서는 좋은 방법이라고 보기 힘듭니다.

또한 이 방법은 웹서버의 파일을 중간에 한번 거쳐서 다운로드 하기 때문에 웹서버의 보안이 미치지 못하는 부분에서 보안상 결함이 있을 수 있습니다. 완벽하게 추상화하지 않고 파일의 경로를 사용하게 되면 서버에 있는 임의의 파일을 다운로드 할 수 있게 됩니다. 그래서 부적절한 접근을 막는 처리를 해야 하는데 실수로라도 이에대한 처리를 빠트리면 보안구멍이 생기는 것입니다.

과연 이 기능이 정말 사용자를 위한 것인지 아니면 단지 웹사이트 담당자의 주관적인 사용자 경험을 위한 것인지 한번 고민해볼 필요가 있습니다.

March 11, 2010 | Comments (8) | TrackBacks (0)

모바일 웹 컨퍼런스 2010 발표자료

오늘 비즈델리에서 한 모바일 웹 컨퍼런스 2010에서 발표한 자료입니다. "'모바일 웹'에서의 표준화 이슈 및 향후 전망(PDF, 1.7MB)"이라는 주제로 발표했는데 원웹(One Web)의 중요성과 웹표준의 중요성, 약간의 HTML5, CSS3에 대해서 이야기 하였습니다. 시간이 많지 않아서 자세히 하지 못한것이 좀 아쉽네요.

요즘 나오는 소위 모바일용 웹사이트들이 아이폰용 웹사이트인 경우가 많아서 문제가 많다는 생각을 하고 있습니다. 조금씩 블로그에서 풀어봐야 겠습니다.

March 10, 2010 | Comments (3) | TrackBacks (0)

윈도우용 오페라 10.50 정식 출시

Opera 10.50 Web browser The fastest browser on Earth: Surf the Web with lightning speed, using the fastest browser ever. Check out the elegant, new design and many other improvements in Opera 10.50. 윈도우용 오페라 10.50 정식버젼이 출시되었습니다. 이번 버젼의 가장 큰 특징은 속도입니다. 자바스크립트 엔진을 카라칸(Carakan)으로 업그레이드 하여서 "지구상에서 가장 빠른 브라우저(The fastest browser on Earth)"라는 슬로건을 다시 되찾게 되었습니다.

윈도우 버젼을 좀 써보고 몇가지 생각나는 기능들이 있는데 첫째는 미투가 빨라졌다는것!(응?) 10.10 버젼에서는 AJAX 콘텐츠를 못불러오는 경우가 간간히 있어서 대체(fallback) 페이지를 봐야하는 경우가 있었는데 이런 문제가 싹 없어졌습니다. 스크립트 엔진 업데이트 덕인 것 같습니다.

그리고 이번 버젼부터 자바스크립트로 컨텍스트 메뉴(context menu)를 제어할 수 있게 되었습니다. 어떤 사이트에서는 오페라가 이미지 훔쳐가는 것을 방조(-_-;)하고 있다고 오페라를 막기도 하고, 개발자분들도 오페라에서 이 기능을 지원하지 않아서 불만이 많으셨습니다. 좋다/나쁘다 논란이 많기는 하지만 아무튼 이번 버젼부터 기능을 지원하게 되었습니다. 자세한 히스토리는 모르지만 아무래도 이 기능을 사용하는 웹사이트들이 많이 나와서 지원하게 된 것 같습니다. 물론 사용자가 환경 설정에서 이 기능을 막을 수도 있습니다.

그리도 나온지 좀 된 기능이기는 하지만 터보기능도 좋습니다. 오페라 미니와 비슷하게 중간 서버를 거쳐서 웹페이지를 압축하는 기능입니다. 우리나라야 워낙 인터넷 망 사용환경이 좋아서 속도에 불만인 분들은 없겠지만 노트북을 들고다닐 때에는 속도도 문제고 전송량도 걱정이 되는게 사실입니다. 저도 아이폰 테터링을 사용할 때 터보모드를 켜고 써본적이 있는데 페이지 전송량도 줄고 로딩 속도도 빨라져서 좋더군요.

자세한 기능은 공식 안내 페이지에 나와있고요. 맥용과 리눅스용은 곧 업데이트 될 예정입니다.

10.10 버젼때는 뭔가 아쉬운점이 많았는데 이번 버젼은 아주 마음에 드네요. 역시 속도가 제일 중요한 것 같습니다. :)

March 02, 2010 | Comments (7) | TrackBacks (0)

플래시와 스크립트에 대한 대체 콘텐츠 제공

HTML의 오브젝트(object) 요소와 스크립트(script) 요소는 대체 기능(fallback)을 사용할 수 있도록 고안되어 있습니다. 오브젝트 요소는 오브젝트 태그 안에 HTML 콘텐츠를 넣어서, 그리고 스크립트 요소는 노스크립트(noscirpt) 요소를 이용해서 대체 콘텐츠를 제공할 수 있습니다.

대체 콘텐츠는 완벽하지는 않더라도 원본 콘텐츠를 대체할 수 있는 기능을 제공해야 합니다. 그리고 대체 콘텐츠를 사용해야 하는 상황은 의도적으로 기능을 끈 것 뿐만 아니라 기능 사용이 불가능한 상황도 포함해야 합니다.

플래시 콘텐츠의 대체 콘텐츠를 "플래시 플러그인이 필요하다", "플래시 플레이어를 지원하는 브라우저가 필요하다"로 제공하는 경우는 플래시 플러그인을 사용할 수 없는 환경을 고려하지 못한 경우입니다. 이러한 대체 콘텐츠 보다는 원본의 기능을 대체할 수 있는 대체 콘텐츠를 제공해야 합니다. 예를 들어서 비주얼 무비라면 비주얼의 느낌을 정적으로 제공할 수 있는 이미지와 대체 텍스트, 네비게이션이라면 메뉴 링크 기능을 이용할 수 있는 이미지 맵 등이 대체 콘텐츠가 될 수 있습니다.

마찬가지로 자바스크립트에도 "스크립트가 작동하지 않아서 사용할 수 없다", 거나 "스크립트 기능을 켜달라"는 대체 콘텐츠도 올바른 기능을 하는 대체 콘텐츠가 아닙니다. "스크립트가 작동하지 않아 레프트 메뉴를 보실수 없습니다.", "스크립트가 작동하지 않아 푸터를 보실수 없습니다." 등의 오류메시지를 보여주고 있는 코레일 홈페이지 스크립트를 사용할 수 없는 환경은 저속망 환경에서 스크립트를 끈 경우외에도 스크립트 파일이 로딩이 제대로 안되었거나 브라우저 호환성 문제로 오류가 발생한 경우도 있습니다. 특히나 브라우저 호환성 문제는 모바일 환경을 포함해서 앞으로 웹을 사용하는 환경이 더욱 다양해지기 때문에 계속적으로 고민을 해야 하는 문제입니다.

점진적 향상(Progressive enhancement) 방법을 이용해서 기능을 구현한다면 노스크립트로 대체 콘텐츠를 제공할 필요 없이 높은 접근성을 유지할 수 있습니다. HTML로 기본적인 기능을 다 구현하고 스크립트는 UI나 접근성 편의기능을 제공하는 것입니다. 간단한 개념은 접근성을 해치지 않는 자바스크립트의 사용이나 웹 접근성을 위한 자바스크립트 적용 방법 (Graceful Degradation vs. Progressive Enhancement)을 참고하세요. 물론 복잡한 기능의 경우에는 좀 더 많은 고민이 필요할 것입니다. 지메일처럼 AJAX 버젼, HTML 버젼, 모바일 버젼 등으로 여러 템플릿을 사용하는 것도 적절한 낮춤(Graceful degradation)을 사용한 하나의 해결책이 될 수 있습니다.

접근성이 보편화 되면서 올바른 방식으로 웹사이트를 만들고자 하는 노력이 많아진 것은 좋지만 올바른 방법과 충분한 고민을 통해서 노력이 헛되지 않도록 해야겠습니다.

February 27, 2010 | Comments (2) | TrackBacks (0)

다양한 브라우저, 운영체제 지원의 확대

작년 5월쯤에 홈텍스 사이트를 사용할 기회가 있어서 접속했다가 윈도우에서도 액티브엑스를 마구 깔아대고 제대로 쓸 수가 없어서 민원을 넣었습니다. 국민의 세금으로 이렇게 시스템을 만들어서야 되겠느냐는 식의 민원이었습니다. 아래는 그 민원에 대한 답변입니다.

고객님께서 올려주신 말씀을 잘 읽어 보았습니다. 우선 홈페이지를 이용하고자 하시는 고객님께 많은 불편과 혼란을 드리게 된 점 너무 죄송스러운 마음입니다.

말씀하신 내용을 검토해보니 아직 국세청에서는 고객님이 사용하고 계신 운영체제는 서비스 지원이되지 않습니다. 너무 죄송하고요. 현재 국세청에서는 다른 웹브라우져 이용자들을 위해 인터넷 익스플로어 외에 파이어폭스나 사파리 등 이용자가 홈택스를 이용하실수 있게 하반기에 시스템 개선 사업을 하고 있습니다. 다소 불편하시더라도 현재 서비스가 지원가능한 운영체제로 이용해주시면 하반기에 개선하여 내년1월부터는 서비스가 가능하도록 하겠습니다. 거듭 불편을 드려 죄송하며 최대한 빨리 다른 운영체제도 서비스가 되도록 준비하겠습니다.

고객님께서 보내주시는 불편사항에 대해서 앞으로도 부단한 노력을 통해 더욱 발전하는 모습을 보여드릴 것을 약속드리며, 향후에도 불편사항이 있으실 경우 주저하지 마시고 개진해 주시면 서비스 개선에 최선을 다하겠습니다. 다시 한번 고객님의 의견에 대해 진심어린 사과와 감사를 드립니다.

(담당자 : 전산정보관리관실 정보개발2담당관실 홈택스2계 최**, ☎ 02-2630-****)

사실 답장을 받았을 때에는 100% 믿지 않았습니다. 지금까지 해온 행태를 봐서는 제대로 지원이 될지 믿기가 어려웠죠. 하지만 이제 변화의 물꼬가 트인것 같습니다.

국세청의 연말정산 사이트가 다양한 사용자 환경을 지원하기 시작했습니다. 아직 보도자료나 공식자료가 없어서 지원하는 환경이 어느정도 되는지 모르겠지만 일단 사파리에서는 공인인증서 창이 뜨는 것까지는 확인 했습니다. 오페라나 파이어폭스에서는 자바가 깔려 있음에도 설치 화면에서 인식을 하지 못하네요. 아직 지원되는 브라우저 수가 많지는 않습니다. 댓글들을 보니 리눅스에서도 안되는 경우가 있고 심지어 윈도우에서도 안되는 경우가 있는 것 같네요.

이제 시작이라고 생각합니다. 알리딘도 모바일 페이지에서 카드 결제가 가능해지고 예스24도 IE외의 다른 브라우저를 지원하기 시작했습니다. 지마켓도 예전부터 가능했던 페이팔에 추가해서 아이폰 앱도 나오고 아이폰에서도 결제가 가능해졌습니다. 메가박스도 상당히 오래전부터 다양한 웹브라우저를 지원해 왔습니다. 하나은행이 아이폰 앱을 만든 것도 상당히 충격적인 이슈였죠.

그동안 많은 분들이 이러한 현실을 바꾸고자 많은 노력을 해왔습니다. 모든 분들께 감사드립니다. 특히 오픈웹을 이끌어주신 김기창 교수님께 너무 감사드립니다. 정말 큰일을 해 주셨습니다.

보다 많은 사이트들이 이러한 방향으로 발전되었으면 좋겠습니다. 같은 것을 봐도 누구는 부담으로 생각하고 누군가는 기회로 생각을 합니다. 그게 바로 프로고 선도기업인 것이죠.

January 06, 2010 | Comments (3) | TrackBacks (0)

최근글 이전글