본문 바로가기

일상로그

아이폰 홈화면에 투명 위젯으로 예쁘게 꾸미기 (Scriptable Pixel Widget)

반응형

 

Pixel Widget 을 적용한 아이폰

 

 

 

Scriptable 을 활용해 Pixel Widget 을 설치하는 가이드 입니다.

 

원작자의 Discord 채널이니 궁금한점은 여기서 문의 하시는게 가장 빠릅니다.

https://discord.gg/BCP2S7BdaC

 


 

1. scriptable 앱설치 (아이폰에서 진행)

1) 다음 URL 선택 - https://apps.apple.com/kr/app/scriptable/id1405459188

or 앱스토어 > 검색 > scriptable 다운로드 및 설치

 

 

2. 날씨 정보 API Keys 저장

1) 다음 글에서 API Keys 를 발급받은 후 메모장이나 카톡에 메모 해놓기

2) 날씨정보 City 값을 확인해서 메모장이나 카톡에 메모 해놓기 (서울은 1835848 이니 굳이 확인 한해도 됩니다.)

 

날씨 정보를 얻어오기 (openweathermap.org)

아두이노나 라즈베리파이 등에서 날씨 정보를 보여주기 위해서는 날씨 정보를 제공하는 서비스를 이용해야 합니다. 최근 scriptable 등 아이폰에서 위젯을 만들 때 날씨 정보를 보여주기 위해서도

neoz.tistory.com

 

3. pixel widget 설치 (아이폰에서 진행)

1) 다음 URL 선택 - github.com/unvsDev/pixel-widget/releases/tag/v1.0.3

2) 하단의 Assets 을 누르면 펼쳐짐 (스크린샷2 참조)

3) Assets 의 다음 두개의 파일 다운로드 (스크린샷3 참조)

- PixelWidget_1.0.3.js

- Pixel_Preference.js

다운로드 누른 후 아무런 반응이 없는것이 정상임

4) 아이폰에서 파일 앱 실행

5) 다운로드 폴더 > Pixel_Preference.js 롱터치 > 이동 > icloud Drive > Scriptable 폴더 선택 > 상단에 이동 선택

6) 다시 파일 앱 실행

7) 다운로드 폴더 > PixelWidget_1.0.3.js 롱터치 > 이동 > icloud Drive > Scriptable 폴더 선택 > 상단에 이동 선택

 

(스크린샷2, 3)

 

 

4. scriptable 에서 pixel widget 설정하기

1) scriptable 실행

2) Pixel Preference 항목을 롱터치 > Rename 선택

3) 이름에서 _ 을 삭제해서 다음과 같이 변경 > Rename 선택

(Pixel_Preference --> Pixel Preference)

4) Pixel Preference 항목의 우측 (...) 선택

 

5) 상단 api_weather = "00000" 부분에 2번에서 복사한 Keys 를 붙여넣기 함

6) 바로 밑에 CITY_WEATHER = "00000" 부분에는 3번에서 메모한 숫자를 입력 (서울은 1835848)

 

※ 따옴표나 콜론 같은 다른 코드 안지워지게 조심해야 함

7) 좌측 상단의 Done 선택

 

 

5. 폰트 설치하기

1) Scripts 목록에서 PixelWidget_1.0.3 선택

2) 전용 폰트 설치하기 선택 > 허용 선택 > 닫기 선택 > 좌측 상단의 완료 선택

3) 아이폰 설정 앱 실행 > 프로파일이 다운로드 됨 선택 > 우측 상단의 설치 선택

4) 우측 상단의 설치 선택 > 설치 선택 > 우측 상단의 완료 선택

5) Scriptable 앱으로 이동

 

 

6. 투명 배경 만들기

1) 아이폰 바탕화면으로 이동 > 화면의 빈곳을 롱터치 (홈화면 편집모드)

2) 마지막페이지로 이동 > 스크린샷 찍음

3) Scriptable 앱으로 이동

4) Scripts 목록에서 PixelWidget_1.0.3 선택

5) 투명 위젯 만들기 선택 > Scriptable 에서 열기 선택

6) 하단의 (+) Add to My Scripts 선택 > 좌측 상단의 Done 선택

7) Scripts 목록에서 Widget Clear Background 선택 > Continue 선택

8) 7-1) 에서 찍은 스크린샷 선택 > Large 선택 > Top 선택 > Export to Files 선택 > Scriptable 폴더 선택

9) 상단 중앙에 스크린샷의 썸네일과 옆에 image 라고 파일명이 보임

10) image 를 pixel 로 변경

11) 우측 상단의 이동 선택

 

 

7. 투명 배경 적용하기

1) Scriptable 앱 좌측 상단의 설정 아이콘 선택

2) 하단에 File Bookmarks 선택

3) 우측 상단의 + 선택 > Pick File 선택

4) 7번에서 저장한 이미지파일인 Pixel 선택

5) Choose name 에서 still 입력 후 Save 선택

6) 좌측 상단의 Settings 선택 > 좌측 상단의 Close 선택

 

 

8. 최종 테스트

1) Scripts 목록에서 PixelWidget_1.0.3 선택

2) 수동 새로고침 선택 > 뭔가 로딩 > 위젯 미리보기 화면이 떠야함

- 미리보기 안뜨고 에러뜨면 에러코드 스크린샷 찍은 후 문의 남겨주세요

3) 미리보기가 떴다면 Close 선택

 

 

9. 위젯 적용하기

1) 아이폰 바탕화면으로 이동

2) 첫 페이지로 이동 (아무페이지나 위젯 설정할 페이지로 이동)

3) 빈곳을 롱터치 (홈화면 편집 모드)

4) 좌측 상단의 (+) 선택

5) 아래로 스크롤을 해서 Scriptable 선택

6) 스와이프 해서 우측 세번째 가장 큰 사이즈 선택 > 하단의 위젯 추가 선택

7) 큰 위젯이 흔들흔들 거리고 있을테니 그녀석을 선택

8) Script 의 선택을 선택 > PixelWidget_1.0.3을 선택

9) 빈 화면을 선택

10) 우측 상단의 완료 선택

 

 

여기까지 문제 없다면 드디어 위젯 설치를 완료 하신거에요. 축하합니다.

하지만 잘 살펴보면 첫 스크린샷과는 조금 다른 모습일텐데요, 첫 스크린샷처럼 수정 할 수 있는 글을 아래에 링크 걸어 놓았습니다. 보시고 천천히 해보세요 :)

 

 

픽셀 위젯 심플 버전으로 꾸며보기

 

아이폰 홈화면 예쁘게 꾸미기 - 픽셀 위젯 심플 버전 (Scriptable Pixel Widget)

Scriptable 을 이용해서 Pixel Widget 설치에 성공 했다면 문구를 변경하거나 레이아웃을 변경하고 싶은 욕구가 생길겁니다. 제가 사용하는 디자인으로 간단히(?) 변경하는 방법을 알려드리겠습니다.

neoz.tistory.com

 

 

 

→ 이 글이 공감 되거나 도움이 되었다면 아래의 '하트' 부탁 드립니다.

 

 

 

반응형