Samsung Weather
같은 캐릭터로 전하는 날씨와 기온
Sunny, Rain, Thunder 캐릭터의 의상 선정과 시뮬레이션, 애니메이션 제작, 전달용 리소스 정리
얼굴, 체형, 헤드셋과 기본 걷기 동작은 유지했습니다. 삼성이 정한 기온 구간 세 개(영하, 0~27도, 28도 이상)에 따라 옷을 바꾸고, 날씨는 소품과 동작으로 구분했습니다.
프로젝트 개요
- 맡은 과제
- 기존 2D 캐릭터의 옷차림과 동작을 3D로 옮기는 일이었습니다. 날씨와 기온이 달라져도 같은 인물로 보이도록 담당 캐릭터의 의상과 동작을 맞췄습니다.
- 정한 규칙
- 얼굴, 체형, 헤드셋과 기본 걷기 동작은 유지했습니다. 삼성이 정한 기온 구간 세 개(영하, 0~27도, 28도 이상)에 따라 옷을 바꾸고, 날씨는 소품과 동작으로 구분했습니다.
- 결과
- Sunny, Rain, Thunder의 의상과 애니메이션을 작업하고 팀의 레이어 구성에 맞춰 리소스를 정리했습니다. 팀 결과물은 Galaxy S25 날씨 앱에 적용됐습니다.
같은 인물의 기온별 의상과 3D 동작 조정
같은 인물을 기준으로 기온별 옷차림을 맞췄습니다. 0~27도에는 오렌지색 셔츠 재킷, 28도 이상에는 반팔과 반바지, 영하에는 후드 패딩을 입혔습니다.
기존 2D 의상과 동작을 그대로 옮기기는 어려웠습니다. 스웨트 셔츠는 3D에서 몸이 왜소해 보였고, 아이스크림을 먹거나 주머니에 손을 넣는 동작에서는 옷과 소품이 손을 뚫고 지나가 시뮬레이션이 깨졌습니다. Thunder의 ‘번개 속에서 비를 확인하는’ 동작도 3D 장면에서는 어색했습니다.
Marvelous Designer에서 여러 의상을 시뮬레이션한 뒤 부피감 있는 재킷을 골랐습니다. 동작도 옷과 부딪히지 않도록 수정했습니다. 영하용 패딩 바지는 디테일이 과하다는 피드백을 받아, 기본 의상에 쓰던 바지의 재질을 바꿔 적용했습니다.
01 기온과 날씨별 의상 Sunny, 영하, 28도 이상, Rain, Thunder
Sunny
영하
28도 이상
Rain
Thunder
같은 인물의 옷차림으로 기온을, 소품과 동작으로 날씨를 구분했습니다.
02 3D에서 그대로 쓸 수 없던 세 가지 왜소해 보인 옷, 28도 이상 동작, Thunder 동작
왜소해 보인 옷
2D 옷을 그대로 입히면 3D에서는 몸이 왜소해 보였습니다. 부피감 있는 재킷으로 바꾼 이유입니다.
28도 이상 동작
아이스크림을 든 손이 옷을 뚫고 지나가 시뮬레이션이 깨졌습니다. 땀을 닦는 동작으로 바꿔 제안했습니다.
Thunder 동작
번개 속에서 비를 확인하는 2D 동작은 3D 장면에서 어색했습니다. 번개에 놀라 몸을 움츠리는 동작으로 바꿔 제안했습니다.
하늘을 먼저 보여 주는 장면 정리와 의상 색 조정
팀의 초기 장면에 캐릭터를 배치한 뒤, 디테일이 많아 휴대폰 UI에 어울리지 않고 하늘이 먼저 보여야 한다는 피드백을 받았습니다. 하늘, 사람, 지면 순으로 시선이 가는지, 해와 글자, UI 패널과 그래픽이 겹치지 않는지 확인했습니다.
Snow와 Sunny는 시점을 뒤로 옮기고 근경과 소품을 줄인 시안을 작업했으나, 구도는 채택되지 않았습니다. 대신 시점을 물려 하늘이 넓어지자 오렌지 셔츠 재킷이 하늘보다 먼저 눈에 띄어, Sunny의 재킷을 하늘색으로 바꿨습니다. 이 색은 최종안까지 유지됐습니다.
01 화면의 우선순위 팀 원안 위에 피드백 요지 표시
1하늘. 날씨가 가장 먼저 읽혀야 할 자리2사람. 옷차림과 동작으로 기온을 표현3지면과 물. 돌과 물가가 먼저 보이는 문제!해와 글자가 겹치지 않게!패널과 그래픽이 겹치지 않게화면의 우선순위와 영역별 역할
- 하늘날씨를 가장 먼저 보여 주는 영역
- 사람옷차림과 동작으로 기온을 표현
- 지면과 물가장 단순하게
피드백 원문 대신 요지만 표시했습니다. 이후 모든 시안은 하늘, 사람, 지면 순서와 겹침 두 가지로 확인했습니다.
02 장면 단순화와 의상 색 변경 Snow 시안, 초기 시안, 색 변경안
하늘이 먼저 보이도록 캐릭터의 색을 조정했습니다. 재킷을 하늘색으로 바꿔 하늘 다음에 사람이 눈에 들어오게 했고, 시점을 물린 구도는 쓰지 않았습니다.
등장 속도와 Rain 손 동작 수정
Mixamo의 걷기 동작을 바탕으로 RH_Character tool에서 손 동작의 키프레임을 직접 조정했습니다. 초기 등장 모션이 모델의 파워 워킹 같다는 의견을 받아, 날씨 앱을 여는 순간에 맞게 등장 속도를 늦췄습니다.
Rain은 팔을 들면 소매가 뭉치고, 가방 위치에 따라 코트와 몸의 움직임도 달라졌습니다. 손의 위치와 팔의 궤적, 멈추는 타이밍을 함께 조정했습니다. 요청받은 동작에서 의상과 소품이 부딪히면 다른 동작을 제안했습니다.
01 등장 속도 08.06 → 08.09 수정
모델의 파워 워킹 같다는 의견을 받고, 날씨 앱을 여는 순간에 맞게 등장 속도를 늦췄습니다.
02 손과 가방 Rain 손 동작 07.31 → 08.01 → 08.11
옷과 가방에 맞춰 손의 위치와 멈추는 타이밍을 세 번에 걸쳐 조정했습니다.
움직임을 살린 레이어 분리와 리소스 정리
장면 전체를 영상 하나로 출력하면 휴대폰에 싣기에는 용량이 너무 컸습니다(08.06 Sunny 272MB). 정지 이미지로 바꿀 수 있는 레이어를 찾으면서도, 물과 지면이 멈추면 장면이 어색해지는 문제를 함께 검토했습니다.
NAU 팀은 삼성 개발 PM팀의 의견을 받아 공통 레이어와 날씨별로 달라지는 레이어를 분리했습니다. 저는 이 구성과 전달 조건에 맞춰 Sunny, Rain, Thunder의 리소스를 정리했습니다.
01 레이어 구성 공통 레이어와 날씨별 레이어
- 01Gradient BG시간과 날씨에 따라 UI 패널과 어울리는 바탕
- 02Sky실제 시간과 날씨의 하늘
- 03WaterMotion날씨를 비추는 수면과 공간감, 날씨에 맞는 바다의 움직임
- 04Far Land공간감을 주는 먼 땅
- 05Sun날씨를 나타내는 해
- 06CloudMotion구름마다 다른 속도로 움직여 바람의 세기를 보여 줌
- 07CharacterMotion옷차림과 동작으로 기온을 전하는 사람
- 08GroundMotion날씨에 맞게 풀과 꽃이 움직이는 대지
- 09FlareMotion날씨를 나타내는 빛
9겹 중 날씨는 Cloud, 기온은 Character만 바꿔 끼우고, 나머지 7겹은 함께 씁니다. 화면 전환은 이해를 돕기 위한 예시입니다.팀 결과
상세 기록: 용량, 루프, 세트, 전달
인트로와 루프 30fps 구성 가이드
- Sunny
Intro 0~359Loop 360~539
- 28도 이상
Intro 0~359Loop 360~719
- Water, Ground, Flower
180f180f180f
- Cloud
전체 길이
출처: 구성안의 루핑 정리를 다시 그림
용량 날짜와 조건이 다른 두 기록
- 272MB08.06 Sunny, 장면 전체를 그대로 출력
- 이슈휴대폰에 적용하기에는 큰 용량. 용량을 줄여야 했지만, 지면이 멈추면 장면이 어색해짐
- 15.7MB10.13 Sunny 평균, 레이어를 분리한 Heavy 세트(Lite 9.6MB)
날짜와 출력 조건이 달라 두 용량을 같은 기준으로 비교할 수는 없습니다.
Set 1·2·3 → Set 4 지면의 움직임을 남기는 세트를 추가로 제안했습니다(팀)
Set 1 Set 2 Set 3 Set 4
10.08 Set 보고 영상에서 지면과 물을 같은 영역으로 잘라 비교했습니다.
Set 1
09.30 그대로
Set 2
정지 3장 + 걷는 사람
Set 3
정지 3장 + 서 있는 사람
Set 4
지면 한 장, 풀과 꽃만 움직임
10.04 삼성은 레이어 구조를 유지하면서 Low, 품질 80%, Trim 버전의 세 가지 세트를 요청했습니다. 지면이 멈추면 어색해져 NAU는 지면을 한 장으로 합치고 움직이는 요소만 남기는 Set 4를 추가로 제안했습니다. 각 세트의 Sunny, Rain, Thunder 리소스는 제가 정리했습니다. 팀 결과
출처: 10.04 삼성 요청 정리를 다시 그림
품질 단계 화질을 유지할 수 있는 Mid 단계 선택(팀)
초기에는 개발자와 WebP 파일로 주고받았습니다. 변환에는 팀과 함께 찾은 꿀뷰를 썼습니다.
High
1440×3120
596MB
Mid A
1000×2167
284MB
Mid B
구름 스틸 4장
117MB
Low
720×1560
107MB
Sunny+Mostly Cloudy 기준입니다. 화질을 유지할 수 있는 단계는 Mid였습니다. 반복 구간을 트림해 Rain은 107에서 26MB, Sunny는 102에서 45MB로 용량을 더 줄였습니다. Low 50%는 노이즈가 심해 사용하지 않았습니다. 팀 결과
최종 전달 레이어별 알파 MOV로 전달
- 01_Cloudy_High351MB
- 02_Cloudy_Mid_A143MB
- 03_Cloudy_Mid_B36.1MB
- 04_Cloudy_Low44.5MB
- 01_Gradient_BG.webp정지
- 02_Sky.webp정지
- 03_Water.webp반복
- 04_Far_Land.webp정지
- 05_Cloud.webp인트로와 루프
- 06_Character.webp인트로와 루프
- 07_Ground.webp반복
- 60fps
- 알파 MOV
- 2560 × 1600
출처: 09.10 전달 보드를 다시 그림
Galaxy S25 적용과 태블릿, 유지보수 대응
NAU 팀 결과물은 Galaxy S25부터 날씨 앱에 적용됐습니다. 이후 팀은 같은 리소스를 2560×1600 기준으로 다시 잘라 태블릿용으로 전달했습니다. 2025년 3월에는 유지보수 요청에 따라 캐릭터와 대지를 알파 MOV 60fps로 다시 출력했습니다.
Credit
- 캐릭터 셋업 대부분, Sunny(Clear), Rain, Thunder 캐릭터 애니메이션, 의상 선정과 시뮬레이션, Snow, Sunny 시안, 담당 캐릭터의 전달용 리소스 정리
- 이주영
- 초기 시안
- 팀장님
- 배경과 장면, 콘셉트와 인터랙션, 업무 분담에 따라 인계받은 Cloudy, Snow 캐릭터, 용량 전략
- NAU 팀
- 피드백, 기온 구간, 태블릿 요청, 개발 PM팀 전달 조건
- Samsung