앱인토스 미니앱 8 – 날씨 코디

앱인토스 미니앱 제작기 여덟 번째는 날씨 코디입니다. 오늘 날씨를 보고 뭘 입을지 정해 주는 앱인데, 중·고등학생이 아침에 쓰는 상황에 맞춰 만들었어요.

기온에 맞는 옷을 알려 주는 데서 한 걸음 더 나가, 학교생활을 얹었어요. 등교할 때와 하교할 때 기온이 얼마나 다른지, 교복을 입는 날인지, 체육이 있는 날인지를 같이 봅니다.

날씨 코디는 어떤 앱인토스 미니앱인가

화면은 하단 탭 기준으로 오늘, 옷장, 기록, 가이드 네 개입니다. 오늘 화면에서 날씨와 추천을 보고 마음에 들면 저장해요. 옷장에서는 가지고 있는 옷을 체크해 두고, 기록에서는 저장한 코디를 입어 본 뒤 어땠는지 남깁니다.

아침 기온만 보면 안 되는 이유

아침에 쌀쌀해서 두껍게 입고 나갔다가 하교할 때 더워서 고생한 경험, 다들 있을 거예요. 학생은 한번 나가면 중간에 옷을 갈아입기 어렵습니다. 그래서 이 앱은 현재 기온과 함께 등교 시각과 하교 시각의 기온을 따로 뽑아 비교합니다.

// 등교(오전 8시)와 하교(오후 3시) 시각의 기온을 비교한다. 오늘 시간대별 데이터가 없으면 null.
export function getSchoolCommuteTemps(hourly: HourlyForecast[]): SchoolCommuteTemps | null {
  const today = new Date();
  const morningTemp = nearestHourTemp(hourly, MORNING_HOUR, today);
  const afternoonTemp = nearestHourTemp(hourly, AFTERNOON_HOUR, today);
  if (morningTemp === null || afternoonTemp === null) return null;
  return { morningTemp, afternoonTemp, diff: Math.abs(afternoonTemp - morningTemp) };
}

시간대별 예보에서 오전 8시와 오후 3시에 가장 가까운 값을 찾아 차이를 구합니다. 차이가 5도 이상이면 화면에 “등교 13°C → 하교 22°C” 같은 안내가 뜨고, 8도 이상이면 겉옷을 챙기라는 말이 붙어요.

교복 입는 날은 추천이 달라야 한다

교복을 입는 학생에게 “니트에 자켓”을 추천해 봐야 쓸모가 없습니다. 바꿀 수 있는 건 교복 위에 뭘 덧입느냐 정도니까요.

교복 모드의 추천은 이 함수가 정합니다.

// 교복 모드일 때 조절 가능한 요소(조끼·가디건·바람막이·양말)로 대체 제안한다.
export function getUniformAdjustment(temp: number): { items: OutfitItem[]; tip: string } {
  if (temp >= 20) {
    return { items: [], tip: '교복 셔츠만으로 충분해요.' };
  }
  if (temp >= 12) {
    return { items: [ITEMS.vest, ITEMS.cardigan], tip: '교복 위에 조끼나 가디건을 덧입으면 딱 좋아요.' };
  }
  if (temp >= 5) {
    return { items: [ITEMS.cardigan, ITEMS.windbreaker, ITEMS.socks], tip: '가디건 위에 바람막이를 겹치고 두꺼운 양말도 챙기세요.' };
  }
  return { items: [ITEMS.windbreaker, ITEMS.socks, ITEMS.scarf], tip: '바람막이와 목도리, 두꺼운 양말로 보온에 신경 쓰세요.' };
}

왜 이 옷인지 한 줄로 말해 준다

추천만 덜렁 보여주면 믿고 입기가 어렵습니다. 그래서 추천 위에 이유를 한 줄 붙였어요. 이 문장은 조건에 맞는 조각을 모아서 만듭니다.

  const reasonText = useMemo(() => {
    const parts: string[] = [];
    if (commuteDiff && commuteDiff.diff >= 8) {
      parts.push(`등교 ${commuteDiff.morningTemp}°C, 하교 ${commuteDiff.afternoonTemp}°C로 일교차가 커요`);
    }
    if (weather && isRainy(weather.current.weatherCode)) parts.push('비 소식이 있어요');
    if (weather && weather.current.windSpeed > 30) parts.push('바람이 강해요');
    if (situationInfo.id !== 'normal') parts.push(situationInfo.tip);
    return parts.length > 0 ? parts.join(' · ') : '오늘 기온 기준으로 추천했어요';
  }, [commuteDiff, weather, situationInfo]);

일교차가 크면 그 말을, 비가 오면 비 얘기를, 체육이 있는 날이면 여벌 옷을 챙기라는 말을 넣습니다. 해당하는 게 하나도 없으면 “오늘 기온 기준으로 추천했어요”가 나와요. 위 두 번째 화면의 이유 문장이 이렇게 만들어진 겁니다.

오늘 일정은 평소 수업, 체육 있는 날, 학원 늦게, 주말 약속 가운데 고릅니다. 고르지 않아도 기본 추천은 바로 나와요.

사람을 평가하지 않는다

10대가 쓰는 옷 앱이라 표현에 신경을 썼습니다. 스타일 무드는 깔끔, 캐주얼, 힙, 편안 네 가지인데, 성별이나 체형으로 나누지 않고 옷의 핏과 색, 소재로 설명해요. 옷장에서도 브랜드나 가격, 신체 치수는 받지 않습니다. 어떤 종류의 옷을 가지고 있는지만 체크합니다.

위치도 같은 기준입니다. 위치 권한을 허용하지 않아도 지역을 직접 골라 쓸 수 있고, 공유 카드에는 날씨와 코디, 한 줄 팁만 담깁니다.

입어 본 결과를 남긴다

저장한 코디에는 추웠어요, 딱 좋아요, 더웠어요 중 하나를 남길 수 있습니다. 기록 화면 위쪽에는 최근 7일 동안 “딱 좋아요”가 얼마나 나왔는지 비율로 보여줘요.

// 최근 7일 피드백 중 '딱 좋아요' 비율(적중률). 피드백이 없으면 null.
export function getRecentComfortRate(state: OutfitState): number | null {
  const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
  const recent = state.savedOutfits.filter(o => o.createdAt >= sevenDaysAgo && o.feedback !== null);
  if (recent.length === 0) return null;
  const good = recent.filter(o => o.feedback === 'good').length;
  return Math.round((good / recent.length) * 100);
}

피드백을 남긴 기록만 분모에 넣습니다. 저장만 하고 피드백을 안 남긴 날까지 세면 비율이 실제보다 낮게 나오니까요. 피드백이 하나도 없으면 0%가 아니라 null을 돌려주고, 화면은 이 카드를 아예 보여주지 않습니다.

알림은 먼저 묻지 않는다

평일 아침 8시에 코디를 알려 주는 알림이 있습니다. 다만 앱을 열자마자 알림을 받겠냐고 묻지는 않아요. 첫 코디를 저장한 뒤에야 홈에 “평일 아침 코디 알림 받기” 카드가 나타나고, 그 카드를 직접 눌렀을 때만 신청이 시작됩니다. 앱이 뭘 해 주는지 한 번은 겪어 본 다음에 정하는 게 맞다고 봤어요.

오늘 화면 아래쪽에는 시간별 날씨도 있습니다. 앞 시간보다 기온이 5도 이상 달라지는 시간에는 “변경” 표시가 붙어서, 언제쯤 겉옷을 벗거나 걸쳐야 할지 가늠할 수 있어요.

날씨를 못 불러올 때

날씨 정보를 가져오지 못하면 기온과 비 여부를 직접 고르는 화면으로 바뀝니다. 예전에 받아 둔 날씨를 지금 날씨인 것처럼 보여주지 않으려는 거예요. 직접 고른 값으로 추천할 때는 화면에 그렇다고 표시합니다.

다음에 할 일

쌓인 착용 피드백을 추천에 반영하는 방법을 찾아보려고 합니다. 같은 18도라도 추위를 타는 사람과 아닌 사람의 답은 다를 테니까요.

프로젝트를 어떤 식으로 진행하는지는 프로젝트 진행 방식에, 매일 쓰는 또 다른 앱 이야기는 물마시기 글에 있습니다.

이 글은 앱인토스 미니앱 「날씨 코디」의 기록입니다. 앱인토스는 토스 앱 안에서 미니앱을 서비스하는 플랫폼이고, 공식 안내는 앱인토스 개발자센터에 있습니다.

이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.