728x90

웹 사이트를 만들때 가장 많이 손이 가는 부분이 어딜까요? 아마도 동일한 원본 이미지를 가지고 다양한 사이즈로 변조하는 작업에 많은 공수가 들어가실 겁니다. 이는 비단 이미지에 대한 변조 공수 뿐만 아니라 이후 유지보수와 관리의 관점에서도 많은 이슈를 낳곤 합니다. 반응형 웹 시대에 미디어 쿼리를 이용하여 뷰포트에 맞는 이미지를 내려주는 것은 필수이다보니 손을 놓고 있을 수도 없는 계륵(?)처럼 느껴지시는 분도 많을 것 같습니다. 물론 아카마이(Akamai)와 같은 컨텐츠 전송 네트워크 사업자에서 제공하는 Front End Optimization 기술을 이용하면 편리하게 실시간 변환이 가능하지만 간단하게 소규모로 서비스를 기획하는 단계에서는 이 역시 쉬운 선택이 되기는 힘듭니다.


오늘 소개해 드리는 TinyPNG 라는 서비스는 API 기반으로 실시간 PNG/JPG 이미지에 대한 가공을 제공하는 곳으로 HTTP 기반의 웹 서비스이다보니 사용하기도 편리하고 비용도 그리 비싸지 않아 연동에 대한 설계만 잘 해두면 쏠쏠하게 이용해볼 수 있는 서비스가 될 것 같습니다. 첫 500개의 이미지 변환에 대해서는 별도 비용이 발생하지 않고 간단히 HTTP 기본 인증 (Basic Authentication) 으로 구성되어 curl 명령만으로도 쉽게 테스트 해보실 수 있습니다. 이마저 번거로운 분들을 위해 간단히 계정을 만들어 시험을 해봤습니다.


TInyPNG 웹 사이트 바로 방문해보기 [바로가기]




귀엽게 생긴 곰 녀석(?)이 맥북을 들고 작업하는 모습이 인상적인 TinyPNG 의 첫 페이지 입니다. 화면의 하늘색 박스에 이름과 이메일 주소만 넣으면 바로 API Key 를 발급받을 수 있는 링크를 메일로 전송해줍니다. 메일로 전달받은 링크를 클릭하면 인증이 완료되며 API Key 와 무료로 사용할 수 있는 이미지 갯수 등이 표시된 페이지로 연결됩니다. 물론 상용으로 등록하고 싶은 분들을 위해 결제정보를 입력할 수 있는 화면도 친절하게 연결되어 있습니다.





화면 가운데 커다랗게 표시된 API Key 는 Basic Authentication 방식의 해싱 값으로 사용될 데이터입니다. ID / PWD 를 이용하지 않고 바로 해싱된 값이 있다는 것은 그냥 헤더에 해당 값이 들어가면 된다는 이야기와 동일하겠죠? 이제 간단하게 curl 을 이용해서 변환을 테스트 해보겠습니다. 왠지 JPEG 는 스펙상 사이즈 조절 등이 쉬울 것 같아 일부러 PNG 파일을 하나 받아서 테스트를 해봤습니다. 잡스옹, 저의 모르모트가 되어주실거죠? ㅇ9응??)




https://api.tinify.com/shrink 주소로 변환할 파일을 업로딩 하면 TinyPNG 에서 파일을 변조한 뒤 변환된 정보와 다운로드 받을 수 있는 경로정보를 JSON 형태의 응답으로 받게 됩니다. 이유는 알 수 없지만 첫번째 리사이즈 시도의 결과물은 두번째 리사이즈 파일과 용량도 동일하고 모든 조건이 같았는데 이상하게 열리지 않더군요. PNG 헤더 등을 점검하는 것은 다소 귀찮아 다시 curl 을 통해 동일한 용량의 동일한 파일을 다운로드 받아 정상적으로 용량이 작게 변경된 것을 확인했습니다. 글을 적으면서 보니 첫번째 시도는 129942 바이트로 JSON 에 기술된 129526 바이트보다 큰 파일이 저장 되었네요. 다시 디렉토리 조회를 해보면 129526 바이트의 정상적인 파일이 내려온 것이 확인됩니다. API 이용시 2차 검증용으로 용량에 대한 확인을 하면 확실할 것 같네요!




단순히 용량을 줄이는 것 이외에 사이즈의 조절 (Crop 등) 에 관한 여러가지 API 옵션이 제공되고 있으며 API 호출시 JSON 형태로 구성하여 Body 영역에 전달하면 됩니다. GET 요청을 하면서 Body 에 정보를 담아 보내는 것이 표준에는 어긋나는 것 같습니다만 일단 TinyPNG 에서는 정상적으로 응답하고 있으니 참고하시기 바랍니다! 이미지 변조가 많은 계절, TInyPNG 등의 서비스로 간단한 이미지 변환은 쉽게 해보시는 것도 관리, 유지보수를 위한 좋은 선택이 될 것 같네요!





728x90
728x90

대규모의 사용자 트레픽을 소화하기 위해서는 고민해야 할 것들이 많습니다. 서비스 오리진(Origin) 인프라의 유연함과 적절한 스토리지(Storage)을 확보해야 하는 것은 물론이고 갑작스런 사용자 폭주에 대비하여 충분한 대역폭(Bandwidth)도 갖추어야 합니다. 큰 규모의 기업이라면 그나마 이러한 준비를 하기 위한 투자(CapEx)가 가능하겠지만 작은 규모의 기업(SMB, SOHO)이나 스타트업(Start-up)이라면 열악한 인프라를 이용하여 서비스를 시작하는 경우가 많습니다.


하지만 충분한 재원을 이용하여 인프라를 증식(?)하는 방법은 한계가 있습니다. 가장 단적인 예는 "충분한 대역폭" 에서 찾을 수 있습니다. 갑작스런 서비스의 인기몰이나 이슈가 생겼을 때 폭주하는 사용자 트레픽은 그 규모를 가늠하기가 힘듭니다. 또한 일시적으로 발생하는 이런 스파이크(Spike)를 대비한다고 평상시에 이용되지 않는 대역폭을 계약하여 사용하는 것은 운영 비용(OpEx) 관점에서 효과적이지 않습니다. 그렇다면 이런 문제는 어떻게 해결할 수 있는 것일까요?





흔히 컨텐츠 전송 네트워크(Content Delivery Network, CDN)이라 불리우는 서비스들이 그 해답이 될 수 있습니다. 글로벌 1위 사업자인 아카마이(Akamai)를 비롯하여 최근에는 아마존(Amazon)이나 마이크로소프트 애져(Azure) 등 클라우드 서비스들도 필수적으로 CDN 서비스를 제공하고 있습니다. CDN 전문 사업자들 뿐만 아니라 클라우드 인프라를 제공하는 사업자들까지 CDN 상품을 내놓고 있다는 것은 인프라와 전송 네트워크의 조합이 대규모의 사용자 트레픽을 소화하기 위해서 필수라는 의미로 해석해도 크게 틀리지 않다는 이야기입니다.


아카마이는 최근 마이리틀텔레비전의 컨셉으로 마이리틀CDN 이라는 인터렉티브 세션을 운영하고 있습니다. 다음주 화요일인 9월 22일 오후에 한시간동안 CDN 의 기본적인 동작 원리와 어떻게 활용하면 도움이 될지에 대한 프로그램이 방송될 예정이라고 합니다. CDN 서비스를 제공하는 사업자들 별로 저마다의 특징과 차별화 포인트를 가지고 있지만 기저에 깔려 있는 기본적인 스킴은 어느정도 비슷하기 때문에 CDN 에 대한 기본적인 소양을 쌓고 글로벌에서 성공할 미래의 내 서비스를 위해 지식의 폭을 넓힐 수 있는 기회가 될 수 있을거란 생각이 듭니다!


아카마이 마이리틀CDN - "CDN의 원리와 활용 기본" 무료 사전등록 [바로가기]



728x90
728x90

미국시간으로 4월 29일 부터 3일간 샌프란시스코에서 마이크로소프트의 개발자 컨퍼런스인 빌드(Build) 2015가 개최됩니다. 예년의 행사가 그러했듯 이번 행사도 다양한 주제로 마이크로소프트의 기술을 비롯하여 업계의 동향을 알아볼 수 있는 알찬 세션들이 준비된 것 같습니다. 직접 현장에서 참석하지 못하는 아쉬움은 채널9 등 여러 채널을 통해서 달래야 할 것 같습니다. 너무 많은 주제가 다루어지기 때문에 무턱대고 세션 제목만 보고 뛰어들기 보다는 마이크로소프트가 가이드하는 난이도에 따라 세션을 선택하면 좋을 것 같습니다.





워낙 다양한 주제가 다루어지기 때문에 어떤 특정한 주제가 핵심이다라고 말하긴 힘들겠습니다만 여러 사업들 중에서 가장 순항을 하고 있는 애져(Azure)와 곧 출시될 윈도10(Windows 10)이 많은 주제들의 중심에 서 있는 건 확실해 보입니다. 두가지 주제가 아무래도 개발자들이나 IT 종사자들 사이에서 가장 관심있는 주제가 될 수 밖에 없나 봅니다. 마이크로소프트 입장에서도 강한 녀석들이 더 강해질 수 있도록 지원사격 하는 것이 당연한 이치일 것이겠구요!



한편 너무 많은 세션들을 어떻게 골라서 들어야 할지 모르겠다 싶으시다면 빌드 모바일 앱을 이용해서 알람도 미리 받고 스케쥴링도 해보시면 도움이 많이 된다고 합니다. 저도 아직 써보지는 않았지만 빌드 컨퍼런스 참여하는 분들에서부터 원격으로 듣는 분들까지 스케쥴링을 위해서는 필수적으로 쓰면 좋은 앱이라고 하니 한번 이용해 보시기 바랍니다!


채널9에서 빌드 컨퍼런스 일정 등 자세히 살펴보기 [바로가기]

빌드 2015 공식 웹사이트 [바로가기]

빌드 공식 모바일 앱 다운로드 [바로가기]



728x90
728x90

웹 사이트를 개발하고 꼼꼼한 테스트를 통해 런칭을 하고나면 왠지 한숨이 놓입니다. 사용자들이 서비스에 대해 좋은 반응을 보이고 열심히 지속적으로 찾아준다면 그 감격은 두배가 되곤 하지요. 하지만 시간이 흐르면서 웹 사이트에서는 새로운 기능들과 메뉴가 추가되고 예상치 못한 사용자들의 활동으로 인해 전에 없던 버그가 도출되기도 합니다. 빠르게 변화하는 시장 상황과 사용자 요구사항에 맞추어 소스코드 변경 및 형상 반영이 바쁘게 돌아가기 시작하면 지엽적인 단위 테스트만 수행한 채 상용 서버로 배포되는 일도 종종 발생하곤 합니다.


단위 테스트처럼 서비스와 기능을 구성하는 가장 기본적인 체크는 당연히 변경된 부분들에 대해 수행해야 합니다. 하지만 웹 사이트, 웹 서비스라면 전체적인 사이트의 동작을 사용자 관점에서 점검하고 관리할 필요가 있습니다. 단순히 호출과 응답을 확인하는 수준에서는 사용자 관점의 테스트가 쉽지 않기 때문에 많은 테스터 분들이 테스트 시나리오에 근간하여 반복적이고 기계적인 테스트 작업을 수행합니다. 하지만 고스트 인스펙터(Ghost Inspector)와 같은 툴을 이용한다면 소규모의 인력으로도 효과적인 테스트를 지속적으로 수행할 수 있습니다.





고스트 인스펙터는 크롬 확장 기능을 통해 제공되는 레코더(Recorder)를 이용하여 사용자가 크롬 브라우저를 이용하여 웹 사이트에 대해 행하는 행동을 꼼꼼하게 기록하여 입력의 자동화와 결과물의 비교는 물론이고 클라우드 기반의 시뮬레이션 환경을 통해 이같은 테스트를 지속적이고 반복적으로 수행하고 결과를 관리할 수 있는 서비스를 제공합니다. 레코더를 이용하지 않더라도 잘 준비된 테스트 설정 도구를 이용하여 스텝 바이 스텝으로 사용자의 동작을 시뮬레이션하고 테스트를 하는 것도 물론 가능합니다.





고스트 인스펙터는 무료 티어를 제공하고 있기 때문에 개인 개발자들도 큰 비용 없이 한달에 100 회의 테스트를 수행해 볼 수 있습니다. 웹 사이트의 동작 상황을 영상으로 촬영하여 보여주는 것은 물론이고 스크린 샷 비교를 통한 웹 사이트 렌더링 이미지 비교 및 API 호출 등 고급 기능들도 100 회의 범주 안에서 제공되고 있기 떄문에 본격적으로 유료 사용을 시작하기 전에 충분히 기능을 테스트하고 서비스 및 테스트 환경에 적합한지 검토해 볼 수 있는 점은 프리미움(Freemium) 서비스만의 장점이라 하겠습니다.






점점 복잡해지는 서비스 환경에서 반복적이면서도 모든 시나리오를 커버하는 자동화 테스트 툴에 대한 니즈가 점점 높아지고 있습니다. 고스트 인스펙터는 현실에서 요구되는 모든 기능들을 완벽하게 제공하지는 못합니다. 하지만 상당한 테스트 영역을 자동화로 커버해 줄 수 있기 때문에 현실에서 사람이 해야 하는 많은 테스트 공수를 줄여줄 수 있다는 점에서 그 의미가 있다 하겠습니다. 10명 정도의 팀원이 한달동안 3만회의 테스트를 하는 비즈니스 상품도 99달러선이니 가격도 나름 합리적인 수준 아닐까요? 반복적인 리그레션 테스트에서 이제 해방을 꿈꿔보시기 바랍니다!




고스트 인스펙터 서비스에 대해 자세히 살펴보기 [바로가기]



728x90

+ Recent posts