국세청 홈택스 설치 파일중 Magic TSA 설치가 안될 경우…

국세청 홈택스 설치 파일중 Magic TSA 설치가 안될 경우…

자! 몇일동안 내가 뻘 짓(?)아닌 뻘 짓 하다가 국세청에 전화해서 해결한 별거 아닌 것 같지만 엄청 성가신 이슈에 대해서 말하고자 한다. 왜냐면! 나같이 고생안하고 다른 분들은 바쁜데 빨리 해결했으면 싶어서이다!

일단 나의 시스템 상황은 맥북 프로 레티나 macOS Sierra 버전 10.12이고 당연히 맥 환경에서는 홈택스 사이트를 원활하게 이용 불가능 하기 때문에 Parallels 11을 사용해 Windows 10(64bit)을 설치했다.

사이트를 사용하는데 문제는 없었다. 이전에 si일 할 때 정말 말도 안되는 공공 사이트 및 정부 사이트들을 보아왔기 때문에 그닥 놀랍지 않았다. 홈택스 사이트 정도야 오 정말 누가봐도 ‘국산(?)사이트 답군..’ 싶었다.

보안 및 액티브엑스 파일을 항상 최소로 설치 하기때문에 정말 필요한 것만 설치했다. 그리고 국세청에서 신청할 내용이 있어서 페이지에서 작성하고 submit버튼을 누르니 자꾸 보안 프로그램 업데이트 및 설치할 내역이 있다면 설치하겠냐는 alert창이 뜬다. 뭐 설치 안하면 안넘아 갈테니 설치 했다. 당연히 브라우저 종료–; 다시 켰다. 다시 로그인 했다. 다시 신청서 폼으로 접속. 당연히 서버에 폼 데이터가 저장 되어 있어 로드 됨. 공인 인증서로 인증. 다시 subit버튼 누름. 다시 설치 해야한다고 뜸. 이러길 몇시간째 아무리 설치 할게 많아도 그렇지 하던 찰나 아까부터 설치 한 파일을 또 설치하고 또 설치 하는 것이였음. 그 프로그램은 이름하여 DreamSecurity사에서 개발한 Magic TSA라는 프로그램. 국세청에 따르면 ‘제출한 PDF 파일이 제출한 원본인지 확인하는 프로그램’이란다. 응? 제출한걸 제출한 원본인지 확인? 무슨 말인지 모르겠지만 뭐 PDF 분석하는 모듈인 것 같다. 설치하고 또 설치하고 했던거다 여지껏. 그래서 윈도우 ‘프로그램 및 기능’창을 열어 프로그램 목록을 보니 나머지 보안 프로그램은 다 설치 되었는데 Magic TSA만 설치가 안되어 있는거다! 설치는 한다고 계속 했는데 실제로 설치된 건 없는 상황…

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-25-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-4-35-49
이 녀석임. 시점인증 (MAGIC-TSA). 지금은 ‘설치됨’으로 표시되지만 좀 전 까지 ‘미설치’로 표시되면서 내가 신청하려던 폼이 저녀석 없으면 다음 단계로 넘어가지 않았음.

열이 받아 국세청 126번으로 전화했다. 안내 문구에 이상이 있으면 연락 달란다. 홈택스 보안 프로그램에 대해서는 상담가도 없다. 전문 상담 파트도 없는 듯. 해당 페이지를 얘기했더니 그 부서로 연락되더라.  그래서 인내심을 가지고 경로와 상황과 경위를 설명했다. 다행히도 상담사분이 빨리 알아듣더라. 그랬더니 당연하게도 ‘호환성보기 설정’등등 누가봐도 관련 없어보이는 것들을 해봤냐고 묻는다. 방법을 다시 알려달라며 시키는대로 함. 역시나 설치 안 됨. 그래서 안된다고 답하니. 전산팀에 연락하겠다고 기다려 달라더니 사이트를 알려줌. http://1377.er.ro라는 사이트임. 전산팀에서 해당하는 오류와 관련된 프로그램들을 다운받을 수 있도록 링크로 연결 된 사이트 같음. 거기서 vcredist_x86_6161.exe 파일을 받아서 설치 해보라고 함. 파일 설치 후 다시 보안프로그램 사이트 들어가서 설치 하니까 제대로 설치가 됨. 결과적으로 Magic TSA를 설치하고 실행하는데 필요한 라이브러리인 vcredist_x86_6161.exe가 없거나 최신본이 아니여서 설치가 안된 거임. 겉으로는 프로그레스 바가 뜨고 설치되는 것 같아 보이지만 실제로 그런게 아니였음.

한마디로 정리하면 ‘Magic TSA’가 안깔린다? ‘vcredist_x86(혹은 x64)_6161.exe’파일러 해당 라이브러리를 설치하면 됨. 더 짧게 요약한다면 ‘국세청 홈페이지 완전 짜증남’. 도대체 말도 안되는 보안 프로그램 및 액티브엑스를 계속 떡칠하는 건 누구의 아이디어이고 누가 컨설팅 한건지 모르겠음. 외국의 공공기관 및 금융기관 사이트들을 좀 연구하고 벤치마킹해서 웹보안 표준들을 잘 따랐으면 좋겠음.

Advertisements

CSS로만 구현 하는 스피너

CSS로만 구현 하는 스피너

스피너라 하면 데이터가 로딩 되는 사이에 사용자들이 로딩중이라는 것을 알 수 있도록 화면에 나태내는 요소이다. 예전부터 많이 쓰던 방식으로는 gif를 띄우는 경우가 많았는데 요즘에는 svg를 사용하는 곳도 있다. 하지만 순수한 CSS3로 스피너 구현하는 방법을 찾아냈다.

영국에 꼐신 Luke Haas라는 형님께서 만들어 주신 프로젝트 인데 사이트에 접속하면 코드와 효과를 한눈에 볼 수 있다.

예시가 되는 코드를 보자! 아주 주관적으로 가장 많이 쓰이는 스피너 스타일라고 생각하는걸 뽑아왔다.

.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #0dc5c1;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

그리고 div.loader 라는 엘리먼트만 원하는 위치에 추가해주면 순수 CSS 애니메이션으로만 구성 된 로딩 스피너가 생긴다.

디자이너님… Hover.css라고 들어보셨습니까?

디자이너님… Hover.css라고 들어보셨습니까?

방금 엄청난 css 프로젝트를 발견했다. 이름하여 hover.css!
자주 사용하는 동적 효과중에 hover라고 있지않은가!
퍼블리셔로서 매번 hover이펙트 기술하고 있자니 귀찮기도 하거니와 사실 어떤 효과를 깔끔하게 내려면 여러가지 검색과 실험이 필요하다.
하지만 영국에 Ian Lunn이라는 프론트엔드 개발자님께서 엄청난 걸 만들어 주셨다. 고객이 아무리 까탈하다 해도 단언컨데 hover.css안에 필요한 모든 hover 효과를 찾을 수 있을것이다.
바로 Hover.css 페이지 링크를 눌러보자.

2D 트렌지션 부터 어마어마한 효과가 다 기술 되어 있다. 그냥 css 추가 하고 하나씩 클래스명 주면 다양한 효과를 바로 사용할 수 있다!

퍼블리셔들 한테도 중요하겠지만 제목에서도 언급했듯이 디자이너 라면 꼭 좀 유념해두고 디자인 한다면 누이 좋고 매부 좋고 아닌가!

Hover-ripple effect

마우스를 호버 하면 엘리먼트의 배경이 변하는 효과는 자주 사용한다.

하지만 오늘 어떤 사이트를 접속했다가 멋진 효과를 발견하고 마는데…

hover-ripple-effect on fanrain's website

gif 만들기 귀찮아서 그냥 스틸샷으로 넣었다. 그림처럼 상위 메뉴에 마우스를 올리면 물결 모양으로 저 둥그런 부분이 퍼져나간다. 당연히 마우스를 올렸을때 active클래스를 주고 그걸 css로 잡아서 css3 애니메이션 효과를 주는 방식인디. 핵심 CSS는 이렇다. 마우스 호버 하면 하위에 ripple이라는 엘리먼트 append해주고 transform으로 확해 해주는 개념. 간단하다.

.ripple {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    pointer-events: none;
    background: rgba(132, 129, 121, 0.2);
    transform: scale(0);
  }

  .mega-dropdown-menu .ripple-effect {
    -webkit-animation: ripple .8s ease-out;
    animation: ripple .8s ease-out;
  }

  .dropdown-flex-item .ripple, .solutions-callout .ripple {
    background: #fff;
  }
  .dropdown-flex-item .ripple-effect, .solutions-callout .ripple-effect {
    -webkit-animation: ripple 0.5s ease-out;
    animation: ripple 0.5s ease-out;
  }

  @keyframes ripple {
    from {
      transform: scale(0);
      opacity: 0.4;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
  @-webkit-keyframes ripple {
    from {
      transform: scale(0);
      opacity: 0.4;
    }
    to {
      transform: scale(2);
      opacity: 0;
    }
  }

Retina.js – 너 레티나인거니? 그럼 레티나용 이미지로!

Retina.js – 너 레티나인거니? 그럼 레티나용 이미지로!

애플의 레티나 디스플레이는 고해상도 디스플레이기 때문에 웹에서 일반 해상도 이미지를 사용한다면 흐릿해보이거나 깨져(?)보이는 현상이 있다. 그렇다고 모든 웹에 고해상도 이미지를 사용하자니 사용자 측면에서 느껴지는 긴 로딩시간은 어떻게 하고 또 파일이 크기 때문에 들어가는 통신 비용은 누가 책임 져야 하는가? 그래서 고안 된 것이 바로 retina.js라는 제이쿼리 플러그인이다.

작동하는 방식은 간단하게 이미지가 두 종류여야 한다. 하나는 일반 디스플레이용, 그리고 나머지 하나는 고해상도 디스플레이용이다. 스크립트는 접속한 사용자의 스크린이 무엇인지 판별한 후에 일반 이미지를 뿌릴지 아니면 레티나용 이미지를 뿌릴지 결정한다.

만약 이미지 파일의 경로가 이렇다고 가정하자.

<img src="/images/my_image.png" />

그러면 스크립트는 같은 경로에 이러한 파일이 있는지 찾을 것이다.

"/images/my_image@2x.png"

여기서 iOS 개발자들이라면 눈치 챘듯이 레티나디스플레이 기기에 알맞은 이미지들을 사용하기 위해 애플에서 권장하는 Apple’s prescribed high-resolution modifier (@2x) 을 사용했다. 이런 형식으로 스크립트는 레티나용 고해상도 이미지를 찾아서 로드 해준다.

원본 출처 : http://imulus.github.io/retinajs/

unveil.js – 뷰포트가 이미지 근처에 가기전까지!

unveil.js – 뷰포트가 이미지 근처에 가기전까지!

‘Lazyload’라는 플러그인을 한 번 씩은 들어봤을 것이다. 사용자가 이미지 근처까지 스크롤 해서 가지 않는 한(보통 뷰포트라고 부른다) 이미지는 로드되지 않는다. 또 대체 이미지를 보여줄 수 있다. 마치 GIF Spinner나 grey blank 이미지 말이다. 이게 왜 필요한가 하면 유저 입장에서 페이지의 내용이 많거나 길어지면(스크롤 압박도 무시 못한다) 이미지 녀석들이 전체 페이지로딩에 영향을 준다. 따라서 이 레이지로드를 쓰면 기본적인 페이지 로드가 빨라지고 심지어 서버 로드를 줄여줄수도 있다. (유저가 이미지 근처까지 안가고 페이지를 닫으면 그만이니까) 그에더해 여러가지 옵션과 효과들이 있어서 편리하게 조정할수 있다. 요새 많은 웹사이트나 CMS 테마에서 사용되는 플러그인이다. 그런데 왜 Lazyload가 아닌 unveil을 소개하는가?

일단 Lazyload는 기능이 많은 플러그인이다. 사실 확장성도 좋고 정말 유용한 플러그인이다. 보통은 소스에서 필요한 부분만 가져다 쓰는데 바로 unveil이 그렇게 필요한 것만 골라서 가볍게 만든 플러그인인거다. unveil이 좋은 점은 레티나 디스플레이용 이미지를 찾아서 로드 해주기도 한다. 기본 작동 방식은 Lazyload와 거의 비슷하고 더 가볍고 심플한 플러그인이라고 보면 되겠다.

src 속성으로 대체되는 이미지(원본 이미지가 로드 되는 동안 나타날 이미지)를 지정한다. 그리고 원본 이미지는 data-src 속성으로 지정한다. 레티나 디스플레이용 고화질 이미지가 있다면 data-src-retina 속성으로 경로를 지정 하면 된다.

$(document).ready(function() {
  $("img").unveil();
});

출처 : http://luis-almeida.github.io/unveil/

 

타임랩스를 찍고 싶다면, Radian.

Alpine Labs라는 회사에서 Radian이라는 제품을 생산 한 적 있다. 요새 DSLR과 연결되는 제품들 중에 촬영에 도움이 될만한게 있을까 찾던 중 이 회사에서 출시한 훌륭한 제품을 발견했기에 이렇게 블로그에 포스팅 한다. 작동 방식은 아주 단순하다. 원래 타임랩스라는 촬영 형식이 정해진 시간동안 일정한 주기로 사진을 찍은 후에 그 결과물들을 한번에 모아서 재생하는 것이다. 그래서 아주 긴 시간의 기록을 담을 수 있고 매우 아름다운 자연경관부터 여러가지 피사체의 움직임을 매우 매력적인 형태로 촬영할 수 있다. 이 장치가 그걸 가능하게 해준다고 보면 된다. 사람이 그 긴 기간을 일정한 시간동안 촬영한다고 생각해봐라… 따라서 이런 장치가 포토그래퍼들에겐 꼭 필요한 것이다. (특히나 산속에서 밤샘 촬영을 해야한다면… 생각만 해도 춥고 끔찍하다)

radian_tabletop_shot_grande
밑에 둥그런 하얀색 장치가 Radian이다. 물론 검은색도 있다.

하지만 Radian이 훌륭한 이유는 그뿐만이 아니다. 장치에 필요한 설정과 촬영설정을 iOS, Android 앱 그리고 웹앱을 통해서 간단하게 세팅할 수 있다는 것이다. 앱의 UI/UX도 군더더기 없이 매우 간단하다. 촬영하고 싶은 각도(패닝 각동)를 설정하고 총 촬영 시간을 정한다. 그리고 사진을 얼마의 주기를 두고 찍을지 설정하면 된다. 제품의 디자인이나 설정 방법도 매우 간단하고 직관적이라 사용자가 조금만 관심을 기울이면 누구나 쉽게 활용 가능하다는게 최대의 장점이다.

phonessquare_grande
iOS, Android와 웹앱에서도 세팅이 가능하다.

일단어떻게 세팅하는지 아무리 길게 글로 설명하는 것 보다는 동영상으로 직접 보는게 간단할거 같아서 동영상도 첨부한다. 그저 DSLR 밑에 있는 연걸 구멍에 Radian을연결하고 트라이드 포드에 끼워 주면된다. 그럼 이제 준비 끝이다! 물론 스마트폰에서  원하는 세팅을 설정한다음 3.5파이 오디오 잭으로 Raidan에게 데이터를 전송해주면 된다. 그 다음에 Radian과 카메라를 선으로(리모트 셔터 라인으로) 연결하고 카메라의 전원을 켜면 데이터가 카메라로 전송 되면서 곧바로 설정된 대로 촬영을 시작한다. 얼마나 간단한가! 아 다만 DSLR이 리모트 셔터 라인을 넣을 수 있는 포트가 있어야한다.

자 그럼 이제 이 Radian로 촬영한 엄청난 광경들을 동영상으로 보길 바란다. 이 영상을 보고도 ‘이게 뭐하는 물건인고?’라고 생각한다면 당신은 진정한 포트그래퍼가 아닐거다.

제품의 내구성 역시 뛰어난 듯 하다. 안전하고 이동하기 용이한 디자인과 또 100시간의 배터리 사용 시간은 아주 매력적 포인트이다. 무게는 425g 정도이다. 가지고 다니기에도 매우 가볍다. 아래에 제품의 스펙을 첨부했으니 직접 확인하길 바란다.

radiantechspecs_grande
단순한 디자인과 유용성을 두루 갖추었다.

다른 타임랩스 트리거(trigger)나 돌리(dolly)하고도 결합 가능 하기 때문에 다른 기기와 같이 사용한다면 다양한 샷과 촬영물을 얻어 낼 수 있다. 프로라면 벌써 머릿속으로 어떻게 구성해서 촬영할지 그려질거다.

radian_dolly_shot_with_kevin_grande
여러 다른 장치와 연결한다면 정말 멋진 결과물을 얻어낼 수 있을것이다.

아쉽게도 Radian은 모두 매진되었다고 한다. 스타트업 회사인지는 모르겠지만 아주 좋은 제품으로 큰 호응을 얻었다. 더 기쁜 소식은 Radian2를 출시 계획 중인걸로 밝혔다. 최근에 킥스타터에도 등록한 듯 하다. 2세대 제품은 더 많은 설정 옵션들이 탑재 된다. ISO, 셔터 스피드, 조리개 설정을 핸드폰에서 무선으로 가능하며 무선으로 타임랩스 이미지 썸네일을 볼수도 있고 더 정교한 세팅과 움직임이 가능해졌다. 사이트에 프리 오더 할 수 있다. 가격은 $280이다.

출처 : http://alpinelaboratories.com/pages/about-radian