서상 워케이션이란?


경남 남해 서상이란 지역이 있음

서상 (여객선) 터미널을 개조하여 사무실 공간으로 꾸밈

 

최대 2박3일 숙박비 일부 (5만원 내)

교통비 일부 (5만원 내) 지원하여 원격근무 가능토록 지원함

 

 

신청은 여기서

https://nhworkation.co.kr/

 

남해 서상 워케이션

남해 라이프스타일을 경험해보세요! 업무의 생산성과 휴식의 효율성을 찾는 분들에게 추천하는 남해 워케이션

nhworkation.co.kr

 

 

 

우상단 신청하기 누르면 아래처럼 구글폼 양식을 입력하게끔 뜸.

 

 

? 우리는 둘이상 모여서 갈건데 ?

- 각자 써서 제출하는게 좋다.

- 숙소 영수증은 중복 안됨.

- 예를들어 두명이 어느 펜션 101호를 예약해서 같이 지내면 영수증 한개에 대한 중복 지원 불가함.

- 영수증은 각각 따로 두개가 나와야 하는듯.

- 이외 지급기준은 위 공식사이트에서 스크롤 좀 내려보면 지원금 신청서 작성란에 들어가서 참고해보시길

 

 

동의함, 다음 누르고 뜨는 기입란들 중..

 

 

07. 재직증명서 또는 이력서 란에 올릴 때

필자는 현재 프리랜서라 이력상 근무회사 이름 들은 **처리하고 이력 회사 수행업무들 중요키워드만 적당히 필터링 처리해서 올렸음

 

 

제출하면 위 구글폼에 올린 이메일로 더웨이브컴퍼니란 곳에서 선정 안내 메일이 옴.

필자는 일정상 이유로 1박2일로 신청했고, 지난주 금요일 제출하여 그 다음주 월요일에 선정 답변 메일 받음.

 

 

자차로 출발해서 유류비 영수증 제출할 예정.

 

 

아래는 워케이션 중 ..케이션 후기임

 

전복물회(18,000) 주먹 크기 비교

시원 새콤 달콤 꼬들했음

 

 

 

필자는 자차로 이동했는데 덥긴 했지만 위 사진과 같은 경치 보며 (담배) 한대 태우는 낙이 있었음

평일에 드라이브 하면 좋다 

 

네비검색: 상주은모래비치

 

 

어디였는지 기억안나는데 보통 남해 해변가 다 이렇게 생김 돌아다니기 좋음

 

 

다랭이 마을 지나는 국도변에 포토스팟이 있는데 여기서 사진 찍으면

이렇게 나옴, 저 계단식 논밭 다 사람손으로 일군거

인간의 로동력이란

 

논뷰에 눈이 정화됨

사진으로 보는것보다 직접 보는게 최고임 가보셈

(일)스트레스 개선 효과 검증됨

 

스카이워크는 당분간 출입제한 중

 

 

다음엔 템플스테이도 도전해보고 싶구먼

 

이제 일하러가볼까?...

아래는 워케이션에서 워크(환경)에 해당하는 컷들

간단한 사무용품이 비치되어 있음

 

 

 

 

네비검색:서상 여객선 터미널

 

습습하나 좋다

 

 

 

상주직원분께 처음 왔다하면 안내해주심

근처 -맛집-들 쿠폰들임

하나씩 챙겨서 -주문-할때 보여드림 사장님들께서 알아서 계산 처리해주신다

 

간단한 사물함도 있어 쓸 수 있음

 

 

웰컴 굿즈도 주심 (텀블러, 여행용품-칫솔,알약형치약,비누등- 워케이션 티셔츠-좋아보였고 입고다님-)

 

 

탕비실 에어컨 틀어달라하면 틀어주실 듯 했음

커피만 내리고 바로 나와서 따로 말씀안드림

필자가 갔을땐 나와 일행밖에 없어서 조용했음

 

 

 

동행인이 있다면 적절하게 할리갈리 한판

 

 

 

후기 블로그 잘쓰면 한번 더 워케이션 지원 기회가 있다는 소문이 있었고 직원분께서 그렇다 하셨다.

워케이션 지원 제도로 남해를 처음 가본 나한테는

제주도의 좋은 대안인 곳이란 생각이 들었음

귀찮은 비행기 수속, 공항 줄서기, 인파에 지쳤다면

터무니 없는 여행지의 바가지가격에 쫌... 그랬다면

추천합니다

 

사진은 안올렸지만 중간중간 내키는대로 들렸던 가게들 친절하시고 맛있고 좋았어요

ㅊㅊ

ㅂㅂ

다운받은 앱들 중 '신뢰할만한' 앱인데도 설치가 아래와 같이 안되는 경우가 있음.

출처 : https://macnews.tistory.com/4533

 

macOS가 업데이트되면서 gatekeeper와 같은 보안정책 반영한 툴때문인데,

잡다한거 할거 없이 터미널 켜서 아래 커맨드로 확인되지 않은 앱 설치 가능하게끔 제어는 가능함

 

$ sudo spctl --master-disable  # 미인증 앱 설치 가능하도록 (설치 후 아래 커맨드 넣어놓는걸 추천)

$ sudo spctl --master-enable  # 미인증 앱 설치 불가

$ sudo spctl --status                  # 미인증 앱 설치 가능 여부 상태

예시-아래-

 

h2는 로컬 파일 db 이다.

 

USER/.h2.server.properties 파일 : h2 접속시 설정 정보들 저장중인 파일

아래 test.mv.db, test.trace.db 파일은 test 스키마 자체에 속한 객체(테이블, 데이터..) 저장파일.

 

 

h2 설치했다가 언인스톨 해도 위 파일들은 그대로 남아있어서

같이 지워줘야 말끔하게 삭제된다.

 

그동안 h2 설치해놓고 안쓰고 지내다가 다시 쓸일이 있어 로컬에서 접속 테스트 하는데 계속 Wrong username or password 떠서 삽질함ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

Database "C:/Users/USER/test" not found, and IFEXISTS=true, so we cant auto-create it [90146-199]

문제내용

Github Repository를 private로 설정한 프로젝트를 TravisCI로 연동하여 테스트/빌드 수행하였음

Travis-ci.org 로그아웃 이후 다시 로그인 하였을 때 해당 github private repository가 보이지 않음

안보임ㅋ settings에서도 안보임ㅋ

 

github 해당 프로젝트 setting으로 이동

 

 

 

Select repositories를 클릭 검색하다 말면 Save버튼이 활성화된다

 

travis-ci.org로 이동되면서 private repo들 불러온다

 

헐 나타남

 

 

버그인듯한데

free account로 빌드 100번까진 허용하는 정책이라 문서에 나와있으니 이렇게라도 써본다 -.-

목표 : aws 루트사용자의 MFA를 추가하여 웹콘솔 로그인 보안성을 강화한다

 

1. AWS - IAM

2) 목적이 루트사용자 MFA활성화 이므로 Continue to Security Credentials 클릭

 

3) MFA 활성화

 

4) 모바일 앱으로 MFA디바이스를 정할것이므로 '가상 MFA 디바이스' 선택하고 '계속' (OTP같은걸 끼얹나?)

 

5)

본 포스팅에서는 Google Authenticator 선택

 

6) 

Google OTP 앱 다운받고 시작하기 한다음

mfa 등록 화면에 뜨는 qr이나 비밀 키 입력하거나 선택해서 넣어준다

 

- 여기서 연속적으로 뜨는 두개의 OTP 숫자를 aws mfa등록 콘솔에 넣어줘야 한다

발급되었다

 

로그아웃 후 다시 로그인 시 비번 맞춘 다음 MFA인증해라고 뜸.

다음 루트사용자 로그인시엔 비번넣고 Google OTP에서 뜨는 MFA코드 넣어서 로그인 한다.

 

끝.

[목적]

ubuntu16.04 aws ec2 인스턴스에 기본적인 서버 시간대설정하고 apache2로 http -> https 리다이렉트 되도록 한다.

도메인 발급방법, ec2(퍼블릭 ip - 도메인 연결)은 생략한다.

 

[순서]

- ec2인스턴스 시작

- 시큐그룹 설정

- ec2퍼블릭IP <-> 도메인 연결

- ubuntu셋

- apache2 , ssl접속 모듈 설치

- letsencrypt로 ca인증서 발급

- crontab으로 스케줄링 하여 letsEncrypt CA인증서 갱신 스케줄링 추가.

- conf수정 (http-> https리다이렉트)

 

[시작]

- ec2인스턴스 시작

- 시큐그룹 설정

ssh는 내 로컬pc에서 aws콘솔에 접속하기 위해서 열어둔 포트, 80, 443 열었는지 확인

 

- ec2퍼블릭IP <-> 도메인 연결

본인이 받아놓은 도메인 주소가 필요하다.

여기블로그에서는 도메인의 a레코드(www.naver.com의 www부분)를 hostname으로 하는 apache2 https웹서버를 만들것임.

도메인 관리 페이지 들어가 보면 a레코드별로 퍼블릭IP 매핑시킬수 있는 관리창이 다들 있을것임.

a레코드 새로 하나 설정하면서 ec2에서 받아놓은 퍼블릭IP와 연결한다.

 

- ubuntu셋

$ sudo apt-get update

$ sudo apt-get upgrade

$ sudo dpkg-reconfigure tzdata

-> gui환경에서 Asia-Seoul

$ sudo vim /etc/hostname

$ sudo vim /etc/hosts 들어가서 hostname새로만든거 한줄 더 추가. 예) 127.0.0.1 3pl

-> 하고 리부트

-> 아니면 $ sudo hostnamectl set-hostname abc 이런식으로 커맨드 넣고 재접속.

-> 콘솔 커맨드 변경하는데 배포할 도메인을 넣는게 조타. sendmail같은데서는 다른 서버와 통신시 사용하기도 한다피셜

-> 이를 FQDN(Full Qualified Domain Name)이라 한다더라

 

- apache2 , ssl접속 모듈 설치

$ sudo apt-get install apache2

$ apache2 -v

-> 설치확인

$ sudo a2enmod rewrite

$ sudo a2enmod headers

$ sudo a2enmod ssl

$ sudo a2dismod -f autoindex

-> ssl모듈 설치 및 http->https리다이렉트 시킬때 필요

 

$ sudo vim /etc/apache2/apache2.conf

#
# The following lines prevent .htaccess and .htpasswd files from being
# viewed by Web clients.
#
<FilesMatch "^\.ht">
        Require all denied
</FilesMatch>

# deny (log file, binary, certificate, shell script, sql dump file) access.
<FilesMatch "\.(?i:log|binary|pem|enc|crt|conf|cnf|sql|sh|key|yml|lock|gitignore)$">
    Require all denied
</FilesMatch>

# deny access.
<FilesMatch "(?i:composer\.json|contributing\.md|license\.txt|readme\.rst|readme\.md|readme\.txt|copyright|artisan|gulpfile\.js|package\.json|phpunit\.xml|access_log|error_log|gruntfile\.js|bower\.json|changelog\.md|console|legalnotice|license|security\.md|privacy\.md)$">
    Require all denied
</FilesMatch>

# Allow Lets Encrypt Domain Validation Program
<DirectoryMatch "\.well-known/acme-challenge/">
    Require all granted
</DirectoryMatch>

 

- letsencrypt로 ca인증서 발급

https활성화를 위해 여러 기관기업에서 만든 무료 ca인증서 발급기관

무료 ca인증서 발급해줌. 공식인증기관. 발급받고 90일term으로 갱신필요. A레코드로 나누는 도메인의 경우 A레코드별로 각각 따로 인증서 받아야함. 

사실 아래 사이트에 너무 잘나와있음. 여기서는 certonly --standalone옵션으로 받은 인증서를 apache2에 셋하는 방법으로 진행

아래 진행순서는 우선 웹서버(여기서는 apache2) 끄고 진행해야함.

 

https://certbot.eff.org 

 

Certbot

Different Internet services are distinguished by using different TCP port numbers. Unencrypted HTTP normally uses TCP port 80, while encrypted HTTPS normally uses TCP port 443. To use certbot –webroot, certbot –apache, or certbot –nginx, you should have an

certbot.eff.org

standalone옵션으로 인증서들 받고 나오는 파일들은

/etc/letsencrypt/live/{certbot 설치할때 넣은 도메인}/

이렇게 들어있음

 

발급완료

 

- crontab으로 스케줄링 하여 letsEncrypt CA인증서 갱신 스케줄링 추가.

인증서가 잘 발급되는지 시험해본다, (--dry-run 옵션으로 test발급신청)

$ sudo certbot renew --dry-run

아직 인증 만료일이 가까워 지지 않아서 발급은 안됐다고 나옴.

 

- certbotRenew.sh 작성 (crontab에서 스케줄링에 따라 certbot 인증서 갱신 수행하는 쉘 스크립트)

#!/bin/bash
sudo service apache2 stop > /home/ubuntu/scriptLog/certbotRenew-`date +%Y%m%d`.log ;\
sudo certbot renew  > /home/ubuntu/scriptLog/certbotRenew-`date +%Y%m%d`.log ;\
sleep 2;\
sudo service apache2 start > /home/ubuntu/scriptLog/certbotRenew-`date +%Y%m%d`.log ;\
sudo service apache2 status > /home/ubuntu/scriptLog/certbotRenew-`date +%Y%m%d`.log
~                                                                                          

 

$ crontab -e

* * 25 * * sudo /home/ubuntu/script/certbotRenew.sh

# /home/ubuntu/script/certbotRenew.sh
sudo certbot renew > home/ubuntu/scriptLog/certbotRenew-`date +%Y%m%d`.log

 

 

- conf수정 (클라에서 http로 접속시-> https리다이렉트 하기 위함)

위에서 받은 인증서를 apache2에서 https접근시 사용가능하게끔 ssl 설정한다.

수정해야할것들

 

$ sudo vim /etc/apache2/sites-available/default-ssl.conf

 

$ sudo vim /etc/apache2/sites-available/000-default.conf

$ sudo a2ensite /etc/apache2/sites-available/default-ssl.conf

잘 안되면 /etc/apache2/sites-available/ 경로 이동하여

$ sudo a2ensite default-ssl.conf 엔터

적용 잘 되었으면 아래와 같이 결과 나옴

$ sudo service apache2 restart

 

- TEST

크롬 시크릿창같은 브라우저에서 http로 자기 도메인 접속 시 https 로 리다이렉트간다.

 

굳!

 

출처 : 

https://blog.lael.be/post/73 

 

https://www.jomebrew.com/2018/12/windows-7-to-10-upgrade-0x800f0955.html

 

Windows 7 to 10 upgrade Failure 0x800f0955 - 0x20003

Tech.. another techie article.  Maybe I'll go back to weird, personal, hiking, adventuring or beer brewing (and drinking) again one day.  Fo...

www.jomebrew.com

 

요약 :

windows 7 에서 10으로 업글하고 싶을때 링크(https://www.microsoft.com/ko-kr/software-download/windows10ISO)로 들어가서 MediaCreationTool1903.exe 다운 받은 다음 실행시키는데 잘 안되는 경우가 있음.

windows 10 즉시 업글 - 1903 업데이트까지 한번에 모두 처리 시킬 경우 0x800f0955 - 0x20003 같은 에러가 뜸

두가지 작업을 해준다. 기존pc에서 실패한 업그레이드 연관 파일 모두 삭제와 설치USB만들기 (mediacreationTool1903.exe로)

 

[작업1]

아래와 같이 기존 pc의 windows 10 설치 관련 로그 및 캐싱관련된 파일을 모두 삭제한다. (디렉토리는 냅둔다)

숨김폴더가 있으니 탐색기에서 숨김파일 보이도록 할것.

* 아래 경로 내의 모든 파일을 삭제 (안지워지는건 SKIP) : ({UserNameDir}은 pc마다 이름이 다르겠지..)

1. C:\Users\{UserNameDir}\AppData\Local\Temp 내의 모든 파일 

2. C:\Users\{UserNameDir}\AppData\Local\Windows\WER\ReportArchive 내의 모든 파일

3. C:\Users\{UserNameDir}\AppData\Local\Windows\WER\ReportQueue내의 모든 파일

4. C:\Program Data\Microsoft\Windows\WER\ReportArchive 내의 모든 파일

5. C:\Program Data\Microsoft\Windows\WER\ReportQueue내의 모든 파일

6. 내PC - 로컬디스크(C:) 오른쪽클릭 - 속성 - 디스크 정리 - 스캔완료 - 모든 항목 선택 - 삭제.

7. 휴지통 비었는지 확인.

 

[작업2]

8G이상의 포맷된 USB에다가 위 링크에서 다운받은 실행파일을 통해서 USB에 설치 이미지 담은 다음

USB의 setup.exe를 실행시키고 뜨는 첫화면에서

1903 업데이트를 포함하지 않고 설치만 수행시킨다.

기존 파일 유지할건지, 모두 삭제할건지 옵션 선택은 본인 하고 싶은 대로.

경우에 따라 설치 66% ~ 67% 구간에서 많은 시간이 쓰일 수 있다. 인내심을 갖자.

win10 sharing data화면에서 나는 암것도 yes 안함.

설치 완료된 뒤 win10최신 업데이트 확인하고 수행한다.

 

 

Windows 7 to 10 upgrade Failure 0x800f0955 - 0x20003

 

Tech.. another techie article.  Maybe I'll go back to weird, personal, hiking, adventuring or beer brewing (and drinking) again one day.  For now, another pain in my ass with computers.  I do work with technology all day long.  Lots of different tech with servers and data centers, so I have a lot to bitch about.

This time, I've been trying to (free) upgrade windows 7 to windows 10. It seems to fail a lot.  Like fail, fail.

In a nutshell, running MediaCreationTool1809.exe (versions wil vary over time) from https://www.microsoft.com/en-us/software-download/windows10 allows you to create windows 10 media; ISO file which can be burned to a DVD-ROM or USB drive.  You can also just upgraded right from the tool which will cache the install files on your hard drive (you need 8GB free but really 12 or so).

So, I take the easy route.  Run the media creation to and select to upgrade.  The process is pretty simple.  It download files, stages an upgrade, reboots, starts the upgrade, does some updates, fails, rolls back (very cleanly/safely every time).  The code I get is 0x800f0955 - 0x20003 and some Safe_OS and Updates message.  I use google university to find what the error means, do everything everyone suggests and it fails.

Having done this several times now and spent hours troubleshooting, I've come up empty.  If only the upgrade would log exactly what it is doing when it fails, maybe we would fix it.  But it doesn't and I can't get around that problem.  However, I've still been able to upgrade several systems.  All you do is...

First, do some cleanup of your Windows PC.  Necessary?  Probably not. Works every time I do?  Yup.

Ok, first, you will need to install from a USB drive.  Sorry. You need a 8GB drive.  These are cheap and easy to use.  So, get one, insert it into a USB slot and run the media creation tool to create the installer USB drive.  When you are all done, you can delete everything form the USB and have some portable storage. Note: Booting from USB can be slowwww on older systems or not using USB 3.0 flash drive. Like a couple hours slow. It was only a few minutes with USB 3.0 drive and interface.

You can click cleanup if you want and scroll down to see the EASY part. You should cleanup first though.

Cleanup.   Open Windows Explorer.  Navigate to C:\Users.  Double click the account name you log in as. e.g. c:\users\jomebrew\
Click in the address bar and add \appdata.  Looks like this c:\users\jomebrew\appdata.  press Enter

Open Local, then open Temp.  Now your address bar shows C:\Users\jomebrew\AppData\Local\Temp with your account name of course.

Select everything in this folder  Click inthe right panel and click Edit / Select All.
  Press the Delete key and click Yes.
  Skip any files that can't be deleted.

In the address bar, click Local

Open Microsoft, then open Windows then open WER.  Delete everything in ReportArchive and ReportQueue.  If they are empty, move on.

Open ReportArchive then select all and press delete key and yes

Click the left (back) arrow or WER from the address bar then open ReportQueue.  Select all and press the delete and then yes

On the address bar, click Local Disk (C:)

Click click in the address bar and add program data.  it will look like this C:\ProgramData
Again,
Open Microsoft, then open Windows then open WER.  Delete everything in ReportArchive and ReportQueue.  If they are empty, move on.
Open ReportArchive then select all and press delete key and yes

Click the left (back) arrow or WER from the address bar then open ReportQueue.  Select all and press the delete and then yes

On the address bar, click Local Disk (C:)

Open Windows then open Temp

Select All then press the Delete key and click Yes.
Skip any files that can't be deleted.

On the Address bar, click Computer
Locate Local Disk C:.  Right click on this and select Properties (or highlight it and select File / Properties) Same thing.

Click Disk Cleanup.  Let it scan and when done, select all the boxes

Click Delete then Delete files.  This can take a while but will finish.

Make sure recycle bin is empty.

The EASY Part
Now that things are clean, navigate to the USB drive. Double click Setup.exe.
This seems to be the important piece,  On the first screen it asks Get Updates and Optional Features.  Select Not Right Now.  Then click Next.

Now click the appropriate options to finish the install. That's it!

Once Windows 10 installs, I select No to all the sharing options presented during the configuration steps.  Be sure to apply latest updates once windows 10 is done installing.

Note:  the installer spends a lot of time at 66% and 67%.  Be patient.

homebrew 설치

 

-- 보통 zsh 기본설치 되어있으므로 확인

$ zsh --version

-- oh-my-zsh 설치

$ curl -L https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh | sh

-- 설치된 oh-my-zsh 사용하도록 설정

$ chsh -s /usr/local/bin/zsh

error : 

chsh: Credentials could not be verified, username or password is invalid.  Credentials could not be verified, username or password is invalid. 뜬다.

-- 맥북 쉘 프로세스 완전히 종료 (터미널 오른쪽클릭->나가기) 한 뒤 다시 켬

$ chsh -s /usr/local/bin/zsh 입력

chsh: /usr/local/bin/zsh: non-standard shell

$ which zsh

((1)) /usr/local/bin/zsh

$ sudo vim /etc/shells

((1)) 추가

$ chsh -s /usr/local/bin/zsh

맥북 관리자 비번 입력

터미널 완전종료 후 다시 켜기

성공 후

 

* zsh 테마의 변경

$ vim ~/.zshrc

슬래시(/) 키로 다음 문구 찾는다(ZSH_THEME)

본인 pc에서는 기본으로 ZSH_THEME="robbyrussel" 되어있음. 그래서 위 '성공 후' 스크린샷 테마가 저렇게 적용되었음.

 

* 변경할 수 있는 테마.

$ ~/.oh-my-zsh/themes/

$ ls

변경할 수 있는 테마들, .zsh-theme로 이루어져 있다.

아무거나 하나 찍어서 변경해보자. 나는 karden.zsh-theme

방금 들어갔었던 $ ~/.zshrc 에서 ZSH_THEME="karden"으로 변경해보자.

별로 안이쁘다. 탈락.

 

다른 커스텀 테마들을 받을 수 있는 깃헙 저장소가 있다.

https://github.com/robbyrussell/oh-my-zsh/wiki/External-themes

 

robbyrussell/oh-my-zsh

🙃 A delightful community-driven (with 1,300+ contributors) framework for managing your zsh configuration. Includes 200+ optional plugins (rails, git, OSX, hub, capistrano, brew, ant, php, python, e...

github.com

얼마전 파이썬 스터디에서 어느분 터미널이 현란하길래 powerlevel10k 쓰시는것같구먼 powerlevel9k랑 생긴건 똑같은데 10k가 성능개선한건갑다. 이걸로 써보자

repo 방문

https://github.com/romkatv/powerlevel10k

 

romkatv/powerlevel10k

A fast reimplementation of Powerlevel9k ZSH theme. Contribute to romkatv/powerlevel10k development by creating an account on GitHub.

github.com

우린 oh-my-zsh쓰니깐 아래대로 따라해보자

Oh My Zsh

$ git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

Set ZSH_THEME=powerlevel10k/powerlevel10k in your ~/.zshrc.

그대로 하니까 이렇게 나온다.

? 박스가 맘에안든다, 색깔도 맘에안든다.

 

다시 .zshrc에 유저네임 변경

$ vim ~/.zshrc

아래 한줄 추가한다.

DEFAULT_USER = ${USER}

적용후

좀더 보기 편해짐 근데 아직 별로

 

저기 물음표에 해당하는 서체 코드가 있는데 D2Coding 서체설치해서

환경설정 (command 누르고 쉼표(,) 누름) 들어감

다른 폰트들 (powerline인가) 넣어도 폰트 깨져서 D2Coding으로 바꿈.

 

완료

조금 이뻐졌다.

 

======순서======

[0] 과거 문제 상황

[1] 그동안 시도했으나 실패한것

[2] gif파일들 webp로 변환

[2.0] s3에서 gif 리소스 모두 다운로드

[2.1] .bat(for windows) 작성

[2.2] s3(cdn)에 업로드

[2.3] android gif 랜더링 기능담당하는 클래스 일부 변경

[2.4] 개선 및 마무으리

================

 

[0] 과거 문제 상황

1. 서비스하고 있는 app의 기능중에 이런것이 있음

-- 이미지(gif)를 클릭할때마다 다른 이미지(gif)로 교체.

2. 이미지(gif)의 크기(약 3~5MB)가 있는데 app에 다 때려박을수는 없어서리

(apk사이즈가 너무 커지니깐. 게임도 아닌데)

3. amazon s3를 cdn용도로 서비스할 gif들(약 170개)을 업로드 하고

4. app에서 1.과 같은 기능 호출 시 웹으로 다운받아 app Imageview로 랜더링 함.

5. 랜더링 라이브러리로는 Glide 4.7.0 사용중

6. 1~5와 같은 flow로 서비스중인데 gif의 사이즈가 그래도 꽤 큰편이라 네트워크 속도기준 4g로도 이미지 교체 요청 시 꽤 로딩 시간이 길어짐 (약3초정도)

 

[1] 그동안 시도했으나 실패한것

- webview로 랜더링 :

크롬에서 띄우는 gif는 로딩 없이(혹은 짧게) 스트리밍으로 재생되는것에 착안하여 웹서버에 gif띄우고, 안드로이드 app에 웹뷰를 띄워 웹뷰의 gif 스트리밍 기능을 이용해 봄직하여 시도함.

안드로이드 웹뷰의 클릭이벤트를 받아 이미지 교체 시 gif가 로딩없이 바로 스트리밍 되는것은 확인했으나. 컨텐츠를 제외한 바탕화면의 투명처리도 가능했으나

화질이 그렇게 좋지 아니했다. 꽤 많이 차이났었던 기억

 

- 영상 스트리밍하듯이 gif 스트리밍 방법을 파봄 :

위 webview가 gif 스트리밍 기능을 갖고있는 것에 착안하여 imageview든 어떤 레이아웃이든 gif 스트리밍이 가능한 라이브러리가 있을것이라고 판단되었음. 

그러나 안드로이드에서의 gif의 스트리밍 관련 라이브러리 찾기 어렵고 직접 작성 시 시간 너무 오래걸릴것같음

 

- 기존 리소스인 gif들을 mp4 변환하여 영상 스트리밍 처리 :

mp4 또한 gif보다 매우 적은 용량을 가질 수 있음 (프레임이나 화질같은 퀄리티는 별차이없음)

exoplayer를 이용하여 클릭 이벤트(영상 교체), 클릭없을 시 무한반복재생 등으로 구현 가능해 보이고 테스트 성공하였으나 영상 컨텐츠를 제외한 안드로이드 레이아웃상 exoplayerview 전체 뷰가 투명처리되어야 했는데 이부분에서 방법을 못찾음.

 

... 그래서 찾은게 webp였음.

webp는 그대로 webp 키워드로 검색만해도 어떤 것인지 잘 나오므로 설명은 생략함.

 

[2] gif파일들 webp로 변환

약 166개에 달하는 gif들을 webp로 변환했을 시 gif 용량이 약 1/10으로 줄어듬.

제일 큰 용량의 gif가 약 6MB정도이므로 webp 변환시 사이즈인 약 600KB정도면 현재 app의 비즈니스로직을 변경없이 그대로 가져가더라도 이미지 교체 시의 로딩이 현저히 줄어들 것으로 예상됨.

 

webp를 구글에서 만들었기 때문에 연관되는 툴을 제공할것으로 판단함.

마침 구글에서 https://developers.google.com/speed/webp/docs/gif2webp 와 같이 gif파일을 webp로 변환해주는 툴을 제공하여 사용함.

 

[2.0] s3에서 gif리소스 모두 다운로드

s3 콘솔에서 직접 리소스 파일들 모두 다운받을려고 하니 복수개 파일 다운로드를 제공하지 않음 -.-;;

기존 사용하던 ftp client인 filezilla는 s3 ftp 접속할려면 프로버전 구매해라 해서 다른 툴 찾아봄.

s3 접속이 가능한 cyberduck 툴을 사용해봄. (프리웨어, 종료할때마다 도네이션 요청 창 뜸.)

https://cyberduck.io/

 

Cyberduck | Libre server and cloud storage browser for Mac and Windows with support for FTP, SFTP, WebDAV, Amazon S3, OpenStack

Amazon CloudFront Manage custom origin, basic and streaming CloudFront distributions. Toggle deployment, define CNAMEs, distribution access logging and set the default index file.

cyberduck.io

다른 클라이언트 툴로 aws 서비스 계정 써야하는 상황인데 루트사용자 계정 쓰기 좀 찝찝해서

s3 접속용 IAM 계정 하나 만든다음 이걸로 cyberduck이용하여 s3 ftp 접속

[[s3에서 iam 계정 권한 설정 및 생성하면 credential-csv 다운받을 수 있는데 이거 다운받아서 계정정보들 userid, secretKey들 cyberduck 접속 설정할때 집어넣으면 접속됨.]]

cyberduck쓰니까 s3 복수파일다운로드 가능해짐.

본인 사용하기 적절한 디렉토리에 모두 다운받음.

 

[2.1] .bat(for windows) 작성

간단 사용법 테스트 하고 나는 약 170개의 gif파일을 일괄적으로 .webp로 변환하는것이 목적이므로

windows 10 에서 가능하도록 배치파일(.bat) 작성

@ECHO ==ConvertGifInputToWebpOutput==
cd C:\dev-Source\libwebp-1.0.2-windows-x64\libwebp-1.0.2-windows-x64\bin
REM C:\dev-Source\libwebp-1.0.2-windows-x64\libwebp-1.0.2-windows-x64\bin
FOR %%f IN (input/*.gif) DO gif2webp -v -lossy input/%%f -o output/%%f.webp

회색 문장 중 DO 구문 뒤의 명령어가 gif2webp 툴 명령어임.

gif2webp -v(로그출력) -lossy(압축기능사용, 안쓰면 in/output 용량 변화없음) input/*.gif -o output/*.webp 뭐 이런뜻임.

뭐 이런식으로 4줄 쓰고 돌리니까 일괄 변환은 잘 되었음

166개 변환하는데 싱글쓰레드로 약 15분 걸림.

webp변환된 파일네임이 *.gif.webp 이런식으로 붙어서 나와서 파일네임도 일괄 변경할까 했으나 필요없을 작업으로 판단되어(랜더링함에 문제없을것) & gif에서 webp로 변환되었구나 하고 보기 편하라고 & 귀차니즘 으로 계속진행.

 

[2.2] s3에 .webp들 업로드

업로드는 cyberduck을 안쓰고 s3 콘솔에 직접 업로드하였음.

cyberduck으로 업로드 하니까 퍼블릭 액세스 설정을 건너뛰고 업로드 되는데 default로 퍼블릭엑세스를 '허용안함'으로 업로드 하는 것 같음.

왜냐면 cyberduck으로 파일 하나 업로드 해놓고 s3에서 제공하는 url로 외부 접속하니 access denied 뜨면서 파일 컨텐츠 접근 안됨.

 

[2.3] android gif 랜더링 기능 담당하는 클래스 변경

기존 gif 랜더링은 Glide 4.7.0 으로 아래와 같이 ImageView에 랜더링하였다.

Glide.with(context)
	 .asGif()
     .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL))
     .transition(DrawableTransitionOptions.withCrossFade(600))
     .load(GIF_URI + gifFileName)
     .into(targetImageView);

.load(https://s3.ap-northeast-2.amazonaws.com/app/filename.gif) 뭐 이런식으로 들어가면서 랜더링 하였다

.asGif() 옵션에서는 webp 랜더링이 불가했다 (에러발생)

.asGif()삭제하면 이미지 랜더링은 가능하나 gif와 같이 움직이는 애니메이션이 불가했다. (고정된 첫번째 프레임의 이미지만 랜더링되고 이미지 멈춤)

 

좀 찾아보니 고맙게도 webp 애니메이션을 지원하는 라이브러리 있었음.

https://github.com/zjupure/GlideWebpDecoder

 

zjupure/GlideWebpDecoder

A Glide WebpDecoder Intergration Library for decoding and displaying webp images - zjupure/GlideWebpDecoder

github.com

필요조건으로 다음과 같이 그래들 빌드 필요했음

implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
implementation 'com.zlc.glide:webpdecoder:1.5.4.9.0'

 

위 GlideWebpDecoder 적용하여 아래와 같이 변경.

Transformation<Bitmap> circleCrop = new CircleCrop();
Glide.with(Objects.requireNonNull(mContext))
   	.load(GIF_URI + gifFileName)
    .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL))
	.optionalTransform(WebpDrawable.class, new WebpDrawableTransformation(circleCrop))
	.transition(DrawableTransitionOptions.withCrossFade(600))
	.into(targetImageView);

 

성공하여 app 비즈니스로직의 큰 변경없이 Glide에 떨궈주는 이미지파일의 변경만으로 webp 이미지 랜더링이 가능하였다

이미지 교체시 로딩 속도도 현저히 줄었다만...

... 다른 문제가 발생

 

[2.4] 개선 및 마무으리

이미지(gif)가 교체될 때 transition crossfade로 구현하였었다 뭔말이냐면

=교체 이벤트 발생 시

=기존이미지 fade out (600ms)

=새로운 이미지 fade in (600ms)

 

[2.3]까지 처럼 구현했을 때 새로 다운받아 오는 이미지(webp)는 위 의도대로 잘 동작하였으나

교체된 이미지가 이미 캐싱처리 되었을 때. (이미 한번 cdn에서 다운받은 이미지일때.)

(..그렇다 조건에 따라 교체이벤트 발생 시 어떤 이미지를 불러올건지 list traversing하며 반복하여 교체된다.)

교체'될' 이미지는 fadeout해서 사라졌으나

캐싱된 이미지는 fade in 애니메이션 듣지 않고 그야말로 뿅! 하면서 튀어나온다. 부자연스럽다.

 

내가 지금 할 삽질은 누군가 과거에 이미 한 삽질이라는 명언이 있으므로

아래와 같이 찾아보니 Glide를 이용해서 코틀린 코드로 누군가 해결해 놓았다.

https://stackoverflow.com/questions/53664645/how-to-apply-animation-on-cached-image-in-glide

 

How to apply animation on cached image in Glide

I want to show the image using Glide animation. I'm downloading this image from the server. The animation is working fine when it downloads from the server but it's not working when the image is ta...

stackoverflow.com

 

현재 플젝에는 코틀린을 적용하지 않았으므로 자바 코드로 포팅하여 아래와 같이 구현 하였다.

class DrawableAlwaysCrossFadeFactory implements TransitionFactory<Drawable> {
		private DrawableCrossFadeTransition resourceTransition = 
        		new DrawableCrossFadeTransition(600,true);
		@Override
		public Transition<Drawable> build(DataSource dataSource, boolean isFirstResource) {
			return resourceTransition;
		}
	}

그리고 이미지 랜더링 하는 Glide 코드는 아래와 같이 변경

Glide.with(Objects.requireNonNull(mContext))
		.load(GIF_URI + gifFileName)
		.optionalTransform(WebpDrawable.class, new WebpDrawableTransformation(circleCrop))
		.transition(DrawableTransitionOptions.with(new DrawableAlwaysCrossFadeFactory()))
		.apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL))
		.into(targetImageView);

 

 

+ Recent posts