매장별로 Pos기가 있는데 손님들이 계산하면서 볼 수 있게 사진을 띄우고 싶으셨다.
이건 Cashier 가 보는 시선이다. Cashier가 물건을 하나씩 찍으면 고객이 반대편 화면에서 찍히는 가격들을 보게 된다.
이게 고객들이 보는 반대편 화면이다. 저 오른쪽에 까만 화면을 통해 고객들에게 상품을 홍보 하고 싶어했다. 그럼 고객들이 cashier가 물건을 하나씩 찍을 때 물건들의 정보를 자연스럽게 볼 수 있는 구조이다.
이건 다른 매장 pos기 사진이다. Atlanta에 7개의 multi store가 있다. 그리고 매장 별로 고객 화면에 보여지는 사이즈가 다르다.
이건 POS기 Manager 프로그램인데 여기서 Display에 띄워지는 파일들을 관리한다. 웃긴게 html하나당 image가 하나씩 mapping 되어 있던 것이다.
그래서 사진 하나당 하나의 html파일로 운영되고 있었다. 그리고 옆에 Seconds는 그 html이 띄워지는 시간을 설정한다. 7이면 7 seconds이다.
사진을 99장을 띄우고 싶다고 해서 처음에 요구한게 html파일을 99개를 만들라는 것이었다.
물론 시키면 해야되는 거지만 내가 99번을 생각했는데 아무리 생각해도 이건 아닌것 같았다. 노가다 작업은 둘째치고 비효율적으로 일하고 싶지 않았다. 그리고 사진을 바꾸고 싶다고 하면 일일이 7개의 multi-store를 돌며 pos기 컴퓨터의 local image files들을 고쳐야 한다. 시간, 돈, 인력 어느 곳에도 이득을 보지 못한다고 생각했다.
그래서 나는 pos기 내의 html안에 script를 작성하여 유연하게 파일들을 관리해 볼 수 있을것 같다고 말씀드렸다. 처음에는 확실하게 말을 못한게 pos기를 만져본적이 없어서 어떻게 돌아가는지 몰랐기 때문이다.
하지만 몇 번 만져보니 될 것 같았다. 사진들도 local이 아닌 cloud에서 가져오는 것이 내가 사무실 자리에 앉아서 실시간으로 바꿀 수 있다고 설명드렸다.
현재 디자인 된 상품배너는 70여개이다.
AWS에서 S3로 static website를 호스팅 할 수 있다. 그래서 이게 간편하겠다 싶었다.
S3에서 Static Website 호스팅하는 방법
간단하게 부트스트랩으로 기본적인 웹사이트를 만들고 매장 포스기 사이즈별로 페이지를 나누었다.
800 300 - 488 758 - 800 150 은 매장별 디스플레이 될 이미지 사이즈이다.
그리고 그 안에 파일들을 작성하였다.
초기 생각한 스크립트이다. (저기 img태그안에 id가 아니라 class이다)
처음에 실수한게 그냥 한방에 70개 불러와서 안에서 돌리자 였는데 생각보다 매장안에 인터넷이 느렸고 처음 외근 나가서 포스기에 url심을 때는 만족스럽지 못했다. 좀 멍청하기도 했다.
게다가 한 가지 중요하게 생각해야할 것이 있다. 디스플레이될 상품마다 번호가 있는데 그 번호가 일정하게 증가하는 것이 아니었다.
예를들어 1,2,3,4,5,7,10 뭐 이런식으로 어떨 때는 6번 8번 9번이 빠지고 매우 유동적으로 진행이 되어야 하는 것이었다.
그래서 다시 생각했다...
최소한의 수정으로 dynamic하게 display될 수 있는 방법...
이건 이미지 url도 그냥 동적으로 만드는 방법밖에 없는 듯 했다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>adisplayWidth</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> var images = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "27", "28", "29", "30","31", "32", "33", "35", "36", "37", "38", "39", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "70", "71", "72", "73", "74", "75", "76", "77", "78"]; var i = 0; $( document ).ready(function() { console.log( "ready!" ); }); setInterval(function() { if(images.length == i) { i=0; } document.getElementById("image").src="../img/width/"+ "adisplay" + images[i] + ".jpg"; i++; }, 7000); </script> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no"> <div id="slideshow"> <div> <img id="image" src="" width="800" height="300" border="0" alt="" /> </div> </div> </body> </html> | cs |
다시 생각해서 만들었다. 훨씬 짧아 졌다.
line 12 : 일단 이미지가 그때그때 바뀌어야 하므로 일정한 규칙이 없었다. 그래서 그냥 배열을 하나 박았다. 그리고 써야하는 이미지들의 번호를 넣었다. pos기 디스플레이를 수정할 때 이 파일을 열어서 저기 안에 배열 번호만 수정해 주면 된다. 이게 제일 최소한의 수정이라고 생각했다.
line 18 : count 변수이다.
line 20 : 그냥 테스트용으로 넣어보았다.
line 24 : 일정 시간마다 발동 될 수 있게끔 setInterval을 설정하였다. document.getElementById로 body안의 이미지 태그를 땄다. 그리고 src, 소스를 동적으로 바꿨다. 같은 경로는 문자열로 넣었고 파일명은 (adisplay01, adisplay02 이런식으로 디자이너한테 파일이 나에게로 왔다) 그리고 image[i]로 돌렸다. 파일형식은 jpg이다.
line 25 : images.length는 images배열의 길이가 i와 같아졌을 때 (한 바퀴 다 돈 것이므로) 다시 0으로 만들어준다. html이 로딩된 상태에서는 무한히 반복되는 것이다.
line 29 : i를 증가시킨다.
line 30 : 7 초마다 반복한다.
그리고 jquery를 넣었는데 쓰지 않았다. JQuery의 가장 큰 단점은 속도이다. 순수 자바스크립트로 짠 코드보다 현저히 느리다. 물론 이렇게 소규모는 차이가 많이 나지 않겠지만 그래도 긴 코드도 아니기 때문에 getElementById를 썼다.
그리하여 결과는 이렇다. 7초마다 배너가 바뀐다.
배열안에 숫자에 해당하는 파일이 실제 s3에 없다면 이렇게 엑박이 뜨게 된다.
이거는 세로가 긴 매장용이다.
브라우저 별로 호환이 다르기 때문에 내가 console로그를 넣어서 스크립트 에러가 났었다. 그래서 console을 지웠다. 아니 처음에 chrome기반이라고 해서 chrome에서만 테스트를 해서 갔다. 갔는데 explorer기반이었다ㅡㅡ 사실 말하는 것중 열에 아홉은 맞지 않아서 이젠 아무렇지도 않다. 그냥 해탈했다.
multi store에 돌리다보니 S3가 이미 free-tier를 넘어섰다. 이렇게 운영해보면서 AWS요금에 대한 감을 잡을 것이다. 물론 이미 운영상 돈이 청구되는 것은 보고를 한 상태이다. 이렇게 좋고 편리한 서비스를 이용하는데 정당한 금액은 당연히 지불해야 한다.
진짜 인턴하나 뽑아서 회사에 하고 싶은거 다 주문하는데 다해주고 있다. 내가 아는 인턴은 사수가 존재하고 어느정도 일을 배워가는 직책인줄 알았는데 참.. 기대이하였지만 그래도 혼자 헤쳐나가면서 배우는 점들이 분명히 있다.
첫 인상을 바꾸는 것은 매우 힘들다. 홀로 미국 땅에 돈도, 차도, 집도, 지인도 없이 왔을 때 이들이 나에게 준 첫 인상은 오피스 자리도 없고 의자도 없고 1주일 동안 연락두절 상태에 나를 방치했다. 전화도 메일도 받지 않았다. 오히려 서류에 명시된 계약기간에 맞춰 출근 한 나를 맘대로 왔다며 질책까지 하고 회사에서 내보내기 까지 했다.
본인들이 이력서와 면접을 보고 나를 채용을 했는데도 말이다.
힘들고 정신없고 매우 생소한 미국 땅에서 사기꾼 브로커 한테 홀로 어려움을 겪고 있었던 초기 한 달중에 나를 단, 단 하루라도 따뜻하게 챙겼었더라면 (말로라도) 1년간 충성을 다했을지도 모른다. 1년이 2년이되고 3년이 될 수도 있었다.
뭐든지 뿌린대로 거두는 법이다.
난 항상 주인의식을 가지고 일을 한다. 직원들을 소중히 여기는 회사에 들어간다면 나는 진심으로 그 회사에 많은 이득을 가져다 줄 자신이 있다.
마지막으로 Atlanta 밑쪽에 있는 매장에서 찍은 사진이다. 위험한 동네여서 대낮에도 무장 가드가 있었다. 흑인가드가 방탄조끼에 수갑, 총, 각종 진압 도구들을 몸에 두르고 있었다. 가까이서 찍을려고 했는데 무서워서 못찍었다.
이상 간단한 일지 기록이었다.
'프로그래밍 > 해외인턴 개발일지' 카테고리의 다른 글
| [인턴 일지] POS기 이미지로딩 스크립트 수정 (0) | 2017.12.02 |
|---|---|
| [인턴 일지] Amazon S3 이미지 업로드, 다운로드 (3) | 2017.12.01 |
| [인턴 일지] 내 프로젝트의 문제점과 나아가야할 방향 (3) | 2017.11.04 |
| [인턴 일지] Spring + Amazon S3 이미지 업로드 (0) | 2017.10.28 |
| [인턴 일지] 초기 개발 과정과 스프링 시큐리티 로그인 (1) | 2017.10.14 |