아이폰 날씨 서울특별시 - aipon nalssi seoulteugbyeolsi

Scriptable 은 자바스크립트를 이용한 위젯 만들기 앱입니다. 아이폰은 iOS14부터 본격적으로 위젯을 지원했지만, 아직 자유도가 높다고 하긴 힘든데요. Scriptable으로 더욱 자유로운 화면 구성과 기능을 담은 위젯을 만나봅시다.

목차

• 1. 왜 Scriptable이 매력적인가?
• 2. Scriptable 앱 다운로드 – WEATHER CAL WIDGET BUILDER 설치
• 3. Weather Cal Widget Builder 배경 바꾸기
• 4. 위젯 배경 투명하게 만들기
  • 4.1. 스크린샷 확보하기
  • 4.2. 위젯 배경 오려내기
  • 4.3. 기존 위젯 배경에 맞춤 배경 적용
• 5. 설정값 맞춤 적용
  • 5.1. 전체 설정(Overall settings)
  • 5.2. 인삿말과 텍스트(localization)
  • 5.3. 텍스트 사이즈, 색상, 폰트
  • 5.4. 날짜 표시 설정(date)
  • 5.5. 일정 표시 설정 (events)
  • 5.6. 날씨 관련 설정 (Weather)
• 6. 아이템 레이아웃
• 7. 예시
• 8. 다른 사용자들의 Scriptable 위젯 사용 화면
• 9. 나오며

지금까진 달력을 위젯에 띄우고 싶을 때 특정 달력 앱을 개발한 사람이 제공하는 디자인 중에서 골라야 했습니다. 하지만 Scriptable에서 누군가 만들어 놓은 위젯을 골라 조금 수정하면 원하는 위치에 원하는 디자인으로 일정을 표시할 수 있습니다.

레딧의 Scriptable 서브채널 가 보면 아이디어를 많이 얻을 수 있어요. 또한 Shareable이라는 사이트에서도 코드를 얻을 수 있습니다. 처음 오신 분들을 위해 제가 Scriptable을 사용해 날씨-캘린더 위젯을 세팅한 과정을 정리해보았습니다.

2. Scriptable 앱 다운로드 – WEATHER CAL WIDGET BUILDER 설치

먼저 앱스토어에서 Scriptable 앱을 다운로드합니다.

갤러리 탭에 가면 상단에 Weather Cal Widget Builder를 추천하고 있는데 GET 버튼을 눌러 가져옵니다. 안 보이면 가로 방향으로 휙휙~ 밀어보세요.

그럼 소스 코드가 화면에 나타나는데, “Add to My Scripts”를 눌러 폰으로 코드를 내려 받읍시다. 이어서 우측 하단에 ▶ 버튼을 눌러 코드를 실행해보면, 처음이라 “배경부터 선택하라(choose a background)”고 뜹니다. Continue를 누르고 일단 Image from photos를 선택해서 대충 일단 아무 사진이나 깔아줍니다. 다크 모드 사진 따로 지정할 거냐고 물으면 No 선택. 이제 미리보기를 통해 위젯 모양을 구경하고, close를 눌러 창을 닫고, Done을 눌러 일단 빠져나가요.

본격적으로 위젯 활용을 위해 아이폰 홈화면에 위젯을 추가합니다. 저는 Scriptable 위젯을 큰 사이즈로 위 쪽으로 추가하였어요.

3. Weather Cal Widget Builder 배경 바꾸기

보통 위젯을 넣고 바르게 스크립트를 연결했다면 아래와 같이 배경이 잘 적용되어 홈화면에 보이게 됩니다.

원하는 배경으로 다시 변경하는 건 간단합니다. 다시 Scriptable 앱 실행하면, Scripts 리스트에 Weather Cal Widget Builder 말고 “Weather Cal code”가 생성되었을 겁니다. 방금 전에 빌더가 만든 위젯 코드입니다. 실제 위젯의 코드는 “cal code” 안에 있고, 빌더를 실행해 손쉽게 세부 디자인을 수정할 수 있습니다. 이 놈은 지우지 말고 두세요.

대신 Weather Cal Widget Builder 를 누르면 메뉴 팝업이 뜹니다. 여기서 Change Background 메뉴로 들어가 쉽게 배경을 교체할 수 있어요. 보통 Image from Photos 항목을 통해 내 사진첩에 있는 사진으로 배경을 깔아주게 됩니다. 사진을 지정하면 다크 모드에는 다른 사진을 쓸 거냐고 한 번 더 물어오는데 귀찮으니까 No.

이제 위젯 기본 기능을 활용하면서 배경을 교체할 수 있습니다.

4. 위젯 배경 투명하게 만들기

다음으로 위젯 배경을 투명하게 보이도록 만들어볼게요. 실제 배경이 투명해지는 것은 아니고 그렇게 보이도록 오려 붙일 겁니다. 1) 배경 위에 글자와 아이콘이 표시될테니까 좀 깔끔한 단색 계열의 배경 사진을 준비하고, 2) 위젯의 위치에 맞게 정확하게 배경을 잘라주는 작업이 필요합니다.

4.1. 스크린샷 확보하기

우선, 적당한 배경화면을 구해서 아이폰 홈화면 배경으로 지정합니다. 저는 보라색 밤하늘이 있는 그림을 골랐습니다.

이제 배경 벽지를 오려내야 합니다. 아무 앱 아이콘이나 길게 눌러 편집 모드로 바꾼 뒤에 화면을 오른쪽으로 계속 넘겨서 아무런 앱도 표시되지 않는 빈 페이지가 보이도록 한 뒤, 이 상태를 스크린샷으로 저장합니다. 이제 위젯을 투명하게 보이는 것처럼 속이기 위한 배경 벽지가 마련되었습니다.

4.2. 위젯 배경 오려내기

다음은 화면의 위젯 위치에 따라 정확히 위젯 모양으로 배경 사진을 오려내는 작업이 필요한데요. 초기에는 좀 복잡했지만 갤러리에서 이제 쉽게 도움을 받을 수 있습니다.

Scriptable 실행 후 Gallery 탭에서 ‘Transparent & Blurred Widgets’ 를 찾아 Get 합니다.

이어서 스크립트를 실행합니다. Continue to select image .. 를 눌러서 아이폰에 있는 사진을 선택합시다. 우리는 이미 스크린샷을 찍어뒀으니까요. 아까 캡처한 사진을 선택합니다.

이후 위젯 사이즈를 물어보면 “Large”를 선택하고, 위젯 위치(position)를 물어보면 “Top”을 선택합시다. 물론 위젯 사이즈나 위치를 다르게 세팅중이시면 그에 맞게 선택하세요. Transparent 를 선택하면 그대로 미세하게 잘라 원래 홈화면 배경이 뒤에 깔리게 됩니다. 취향에 따라 블러 효과를 줄 수도 있습니다. 이후 “Export to the Photos app”을 눌러 오려낸 사진을 사진첩에 저장합니다.

4.3. 기존 위젯 배경에 맞춤 배경 적용

이제 다시 Weather Cal Widget Builder으로 갑시다. 그리고 배경을 교체해야겠죠? 교체 방법은 위 3번 설명을 참고하여 아까 오려낸 사진을 직접 지정하면 되겠습니다. 그럼 아래와 같이 위화감 없이 배경이 아름답게 맞춰 들어갑니다. 위젯 배경이 투명한 것처럼 보이지요?

마음에 드시나요? 이제 이 상태에서 쓰셔도 됩니다.

5. 설정값 맞춤 적용

환경설정 메뉴를 통해 나만의 화면 구성을 할 수 있습니다. 화면 표시 언어, 색상, 배치 등을 바꿀 수 있어요. Scriptable 실행 후, Weather Cal Widget Builder 를 누르면 Widget Setup 메뉴 팝업이 뜹니다. Edit Preference 항목을 선택해 다양한 값을 고쳐 봅시다. 정답은 없는데 제가 쓰는 거 기준으로 알려드릴게요.

5.1. 전체 설정(Overall settings)

Overall settings부터 시작합시다.

• Local code : 표시 언어입니다. 비워두면 아이폰 기본 표시 언어를 따라갑니다. 저는 영어가 더 깔끔하게 보이는 거 같아서 en 으로 지정했습니다. kr 로 지정해도 번역이 다 되어 표시되는 건 아닌 듯 하네요.
• Units : 미국 사람 아니면 metric 으로 설정
• Widget preview size : 위젯 크기입니다. 취향에 따라 선택하되, 변경하면 맞춤 설정한 배경화면도 다시 만들어야 할 수 있어요.
• Item padding : 화면에 뿌려지는 아이템 간격 값입니다. 전체 위젯 테두리 여백 값도 영향 받습니다. 더 오밀조밀하기를 원하면 값을 줄여주세요.
• Custom widget padding : 작은 아이템 간격값은 위 ‘item padding’으로 적용하고, 전체 위젯 테두리 여백은 따로 지정하고 싶은 경우 여기서 자세하게 지정합니다. 보통 투명 효과를 노려 배경화면을 지정하는 경우에 이 항목의 값을 ‘0’으로 설정하는 것이 좋습니다.
• Icons match text color : 아이콘 색상이 텍스트 색상 알아서 따라가게 할 건지 선택
• Location update frequency : 날씨 정보 등 가져오는 빈도. ‘0’이면 최대한 실시간에 가깝게. ‘-1’이면 업데이트 중지. ’60’이면 한 시간에 한 번씩 가져오기.
• Instant dark mode : 이건 뭐하는 건지 잘 모르겠네요 ;

5.2. 인삿말과 텍스트(localization)

여러 상황별 인삿말과 단위 표시 텍스트를 지정합니다.

• Greeting : 시간대별 보이는 인삿말을 미리 정해둘 수 있습니다. 문장은 미리 넣어두고 표시 여부는 나중에 정해도 됩니다. 오전에 보고 싶은 말, 하루가 끝났을 때 나에게 건넬 말을 적어두면 좋겠습니다.
• Label : 날씨에서 Next hour를 화면에 뭐라고 표시할 건지, Tomorrow를 뭐라고 화면에 보여줄 건지 정합니다. 우리말로 바꾸거나 약자나 기호로 대신할 수 있겠습니다.
• Message : 더 이상 일정이 없거나(no event), 미리알림이 남아있지 않을 때(no reminders) 나타날 메시지를 정합니다. 스스로에게 건네는 칭찬을 적어보는 건 어떨까요?
• Duration label : 일정의 지속시간을 분(minutes)이나 시간(hours)으로 표시할 수 있는데, 이 때 화면에 어떻게 표시할 건지 정합니다. 작고 좁은 영역이라 보통 m, h와 같이 대체합니다. 물론 지속시간 표시를 끌 수 있습니다만 표시 방법은 미리 정해두고 다른 설정에서 on/off 하면 됩니다.
• COVID data text : 코로나 데이터를 표시하는 경우 {cases} 확진, {deaths} 사망 .. 과 같이 실제 {} 값을 설명하는 텍스트를 자연스럽게 만들어서 사용할 수 있어요.
• week number : 연간 캘린더 기준 몇주차인지 표시할 때 뭐라고 보여줄 건지 정합니다. “번째 주” 또는 “주”와 같이 우리말로 바꿀 수 있겠네요.

5.3. 텍스트 사이즈, 색상, 폰트

Text sizes, colors, and fonts 설정 화면입니다.

이건 본인이 사용할 배경 사진에 따라 어울리게 수정하여 사용하면 되겠지요. Event title은 regular가 더 이쁜 거 같습니다.

디폴트 폰트의 경우 저는 14 포인트, 색상은 e4f7f9, regular 설정입니다. Capitalization은 대문자로 강제 전환 표시 기능으로, 기본은 사용하지 않음(none)으로 되어 있어요. 색상 코드는 color picker 기능 있는 아무 앱이나 사용하면 쉽게 알 수 있습니다.

대체로 배경 설정이나 화면 레이아웃 설정을 마친 뒤에 사용하다가 특정 정보 표시가 너무 크거나 작을 때, 가독성에 문제가 있을 때 이 메뉴에서 나중에 조정하면 되지 싶네요.

5.4. 날짜 표시 설정(date)

위젯의 날짜 표시(Date) 관련 설정입니다.

• Dynamic date size : 일정이 있으면 표시되는 날짜 크기가 작아지고, 없으면 크게 보여줍니다. false로 꺼두면 늘 고정된 크기로 보여줍니다.
• Static date size: 위 다이나믹dynamic 설정을 사용하지 않는 경우 고정값으로 사용할 날짜 폰트 크기입니다. small / large 에서 선택 가능해요. 더 자세히는 설정 못하냐고요? 그건 Text sizes, colors .. 메뉴로 다시 돌아가서 거기서 정합니다.
• Large date format : 날짜를 크게크게 보여주는 경우에 첫 번째 줄(line1)과 두 번째 줄(line 2)에 뭘 보여줄 건지 나눠서 정할 수 있습니다. 이 때 규칙이 있는데, Scriptable Docs(설명서)에 자세히 설명되어 있습니다. 자주 쓰는 표현은 아래와 같아요.
  • yy : “19”
  • yyyy : “2019”
  • M : “1” (한 자리 월 표현)
  • MM : “01”
  • MMM : “Jan”
  • MMMM : “January”
  • MMMMM : “J”
  • d : “9” (한 자리 날짜 표현)
  • dd : “09” (두 자리 날짜 표현)
  • E : “Fri”
  • EEEE : “Friday”
  • EEEEE : “F” (한 자리 요일 표현)
• URL to open when tapped : 위젯에서 날짜 부분을 탭했을 때 어디로 이동할 건지 정합니다. 기본값은 아이폰 캘린더 앱을 열도록 되어 있습니다. 아마 아래와 같은 옵션을 원하시는 분들이 계실지도요. 원하는 앱으로 점프하고 싶은 경우 보통 검색하면 URL을 찾을 수 있습니다.
  • calendars:// : Calendars 5 캘린더 앱을 엽니다.
  • fantastical2://show : Fantastical 캘린더 앱을 엽니다.

largeDateLineOne(첫 번째 줄)의 형식을 “d”로 변경해서 오늘 날짜만 표시하도록 하고, 두 번째 줄은 “eeee”로 변경하여 요일을 줄여쓰지 않고 모두 쓰도록 합니다. 매뉴얼에 표시 형식에 따른 약어가 잘 정리되어 있습니다.

// Determine the date format for each date type. See docs.scriptable.app/dateformatter
  ,smallDateFormat: "EEEE, MMMM d"
  ,largeDateLineOne: "d"
  ,largeDateLineTwo: "eeee"
}

5.5. 일정 표시 설정 (events)

Events 설정입니다. 일정은 아이폰 기본 캘린더에서 가져옵니다. 따라서 구글캘린더와 같은 외부 캘린더를 주로 사용한다면 아이폰과 일단 동기화 설정을 마쳐야 합니다.

• Maximum number of events shown : 표시할 일정의 최댓값입니다. 좁은 공간에 일정이 많이 표시되면 넘쳐흐르고 보기도 좋지 않고, 시간이 있는 일정일 경우 두 줄로 표시되면서 더 좁아집니다. 일정이 표시될 위치나 공간 배치를 고민하면서 적당한 값을 찾습니다.
• Minutes after event begins : 3시에 시작하는 일정이 있는데 3시 1분에 화면에서 바로 사라지면 좀 곤란하지요. 시작 후 몇 분까지 화면에 품고 있을지 정합니다.
• Show all-day events : 특정 시작 시간이 없는 하루종일 일정을 위젯에 표시할 것인지 정합니다.
• How many future days : ‘0’이면 오늘 일정만 표시하고, ‘1’이면 내일 일정까지 표시합니다. 저는 오늘 일정이 없으면 최대 모레 일정까지 보기 원해서 ‘2’로 했어요.
• Date format for future event days : 다가올 일정의 날짜를 어떤 형식으로 보여줄 건지 정해요.
• Future days shown at hour : 24시간제 기준 내일 일정을 보여주기 시작하는 시점을 정할 수 있습니다. 가령 “오늘” 일정만 나타나게 한 다음에, 밤 “22”시로 설정하면, 밤 10시에는 다음날 일정이 보이기 시작합니다.
• Event length display style : 일정의 지속시간을 보여주는 방식입니다. 실제 몇 시간이라고 표시할 수 있고, 아니면 시작 시각만 표시하거나, 감출 수 있습니다.
• Event location : 구글캘린더 일정에 ‘장소’ 항목을 자주 사용하는 경우 이를 표시할 수 있어요.
• Calenars to show : 캘린더를 여러 개 사용하는 경우 복수의 캘린더를 고릅니다.
• Show when no events remain : 더이상 표시할 일정이 없을 때 인삿말이나 커스텀 메시지를 표시하도록 할 수 있습니다.
• URL to open when tapped : 역시 일정 아이템을 탭하면 특정 앱이나 주소로 이동하게 할 수 있습니다.

5.6. 날씨 관련 설정 (Weather)

Weather 메뉴입니다.

• OpenWeather locale : 날씨 정보를 자꾸 못 가져오면 en 또는 kr 로 설정하면 불러오는 과정의 오류를 줄일 수 있다고 합니다. 이 정보는 날씨 표시 지역을 지정하는 것은 아니고요.
• Show location name : 지금 보여주는 날씨가 진짜 어디 날씨인지 불안하시면 true로 바꾸세요. 보통 “서울특별시” 정도로 표시됩니다.
• Display the condition and temperature horizontally : 현재 날씨 정보를 나타내는 그림과 온도를 가로로 나란히 표시할 건지 정할 수 있습니다. 세로가 예쁘긴 한데, 가로로 나란히 두면 공간이 절약됩니다.
• Show text value of the current condition : 날씨 그림 아래에 ‘clear sky’와 같이 설명 텍스트도 보여줄 건지 정합니다.
• Show today’s high and low temperatures : 오늘의 최고 최저 기온 표시 여부입니다.
• Show percent chance of rain : 비 올 확률을 따로 보여줍니다. 비 안 올 거면 “Clear / 맑음” 등으로 표시되고, 비 오면 퍼센트가 나옵니다.
• When to change tomorrow’s weather : 오늘이 끝났으므로 내일 날씨를 메인에 띄울 시점을 선택할 수 있습니다. 가령 ’22’로 두면 밤 10시에 내일 날씨를 큰 그림으로 보여줍니다.
• URL to pen when current weather is tapped : 저는 날씨나 예보가 나오는 정보 영역을 탭하면 네이버 날씨 사이트로 이동하게 해 두었습니다. 자세한 날씨 정보를 보기 좋더군요.

6. 아이템 레이아웃

위젯 리스트에서 우측 상단 ... 부분을 누르면 코드를 수정할 수 있습니다. 여기서 아이템 배열을 원하는 배열로 변경할 수 있는데, 보이지 않는 표를 작성한다고 생각하세요. 가로 행(row)와 세로열(column)으로 구성되어 있습니다.

제가 현재 사용하는 코드는 아래와 같습니다.

보시면 금방 이해가 되실 거에요. 가로줄(row)이 하나 있고, 그 아래 세로열(column)을 하나 만든 다음에, 그 안에 오늘 날짜(date), 배터리(battery), 일정(events), 여백(space)을 삽입했습니다. 그리고 오른쪽 열(column)을 하나 더 만들면서 폭을 95로 고정했고, 현재 날씨(current)와 일간 예보(daily)를 차례로 넣었네요.

어떤 항목을 어떤 순서로 어떻게 배열할 것인지 마음대로 정할 수 있습니다. 다른 사용자가 올린 그림인데, 아래와 같이 만드려면 어떻게 해야 할까요?

수정된 코드는 아래와 같습니다. 가로행(row) 첫 번째에 column을 두 개 넣었고 오른쪽 열을 78로 고정했습니다. 두 번째 행(row)에 공간(space)를 한 번 더 삽입해서 일정이 위젯의 아래 부분에 더 붙도록 해서 시원한 개방감을 살렸네요. 일간예보(daily)는 지웠고, 환경설정에서 현재 위치 정보가 표시되도록 하여 도시 이름이 나오고 있습니다.

const layout = `  
  row
     column
       greeting			
       date

     column(78)
       current
       battery
     
   row
     column
       space
       events
  `

7. 예시

제가 사용하고 있는 화면을 예시로 보여드립니다. 필요에 따라 레이아웃을 변경하세요.

8. 다른 사용자들의 Scriptable 위젯 사용 화면

full-weatherline-widget 은 12시간, 일주일 단위의 날씨 예보를 꺾은선 그래프로 보여줍니다.

Scriptable 서브 레딧에 방문하면 재밌는 코드와 배열 아이디어를 얻을 수 있습니다. 축구 스코어 표시하기, 코로나 확진자와 사망자 표시, 달의 위상 표시, 환율과 시스템 메모리 사용량 표시, 습관 추적하기, 매일 할일 기록, 삼성스타일 화면, 터미널 스타일로 각종 정보 표시 등등..

국내에도 한국 기준 코로나 확진자 표시를 위젯으로 구현하신 분도 계시고, 픽셀 스타일로 가장 임박한 일정만 심플하게 띄워주는 위젯도 제작하신 분이 계세요.

9. 나오며

Scriptable을 통해서 아이폰 첫 화면에 더 자유롭게 필요한 정보를 띄워놓을 수 있습니다. 다만 많은 정보를 표시하는 것이 반드시 생산성에 도움이 되는 건 아닐 거에요.

(2020년 11월 작성. 2022년 10월 고침.)

🍋 내용이 유익했다면 이메일 주소를 적어주세요. 다음 글을 보내드립니다.