리뉴얼을 하게 된 계기
토마토미엔 앱을 만든 지 몇 개월이 지났습니다. 앱을 만들고 한동안 방치해 둔 것 같아서 다시 살펴보다가 ‘나의 문제’를 해결하는 것을 넘어서, 비슷한 문제를 가진 다른 사람들도 도와주면 좋겠다는 생각이 들었습니다.
‘다른 사람에게 써 보라고 권유를 해야 한다’는 생각으로 앱을 살펴보니, 이것저것 눈에 밟히는 것이 많았습니다.
가장 큰 것은 디자인이 너무 별로였습니다. 기존에는 사실 저만 쓰던 앱이다 보니 디자인에 크게 신경 쓰지는 않았습니다만, ‘다른 사람이 이 앱을 쓰고 싶어 할까?’ 라는 생각을 해 보니 그렇지 않을 것 같다는 생각이 들었습니다.
사용자를 끌어들이기 위해서는 첫인상도 중요하기 때문에 디자인을 싹 갈아엎기로 결정했습니다.
새로운 디자인
컬러 팔레트
우선 토마토미엔이라는 앱 이름에서 토마토색 Primary 색(#E03C3C)을 선정한 뒤 명도별 색상들을 추렸습니다. (Secondary 를 포함한 다른 시맨틱 색은 Tailwind 기본 색상들을 참고했습니다.)
@theme {
--color-tomato-50: oklch(0.971 0.015 25.6);
--color-tomato-100: oklch(0.935 0.033 25.6);
--color-tomato-200: oklch(0.885 0.061 25.6);
--color-tomato-300: oklch(0.81 0.108 25.6);
--color-tomato-400: oklch(0.715 0.178 25.6);
--color-tomato-500: oklch(0.64 0.205 25.6);
--color-tomato-600: oklch(0.603 0.201 25.6);
...
}타이포그래피
타이포그래피는 적당히 클로드의 도움을 받았습니다.
@theme {
/* ── Typography Tokens ── */
--font-size-heading-1: 1.5rem;
--font-size-heading-2: 1.25rem;
--font-size-heading-3: 1.125rem;
--font-size-body: 0.875rem;
--font-size-caption: 0.75rem;
--font-size-overline: 0.625rem;
}
@utility text-heading-1 {
font-size: var(--font-size-heading-1);
line-height: 2rem;
font-weight: 700;
}
...포트레이트로 변경
디자인 시스템을 어느 정도 완성하고 나니, 불현듯 ‘간단한 기능만 있는데 굳이 큰 화면을 차지할 필요가 있을까?’라는 생각이 들었습니다. 화면에 앱을 켜 놓은 상황을 가정해보면, 앱이 화면을 크게 차지하지 않는 편이 사용하기 좋을 것 같았습니다. 그래서 저는 앱을 랜드스케이프가 아닌 포트레이트로 변경하기로 했습니다.
시안 뽑기
Google Stitch를 활용해서 처음으로 시안을 뽑아봤습니다. 나쁘지 않았기 때문에 클로드 코드와 MCP를 활용해 코드로 번역한 뒤 디테일한 부분들을 함께 구체화했습니다.
마지막으로는 공용 컴포넌트들을 분리해 내어, 간단한 디자인 시스템을 구축했습니다.
기술적 변경점들
Context API에서 Jotai로
로컬에서 앱을 테스트하다가, 갑자기 앱이 멈춰버리는 현상이 발생했습니다. 파악해 보니, Context에 액션을 날리기 위한 dispatch 함수가 매번 새롭게 만들어져 무한 리렌더링이 되어버리는 것이 원인이었습니다.
// useRuleEditorActions.ts
function useRuleEditorActions() {
const dispatch = useRuleEditorDispatch();
return {
setOriginalRule: (rule) => dispatch(...),
initEdit: (rule) => dispatch(...),
// ... 모든 함수가 매 호출마다 새로 생성됨
};
}
// RuleEditor.tsx
// 🚨 매 렌더링마다 새로운 함수가 반환됨.
const { setOriginalRule } = useRuleEditorActions();
useEffect(() => {
setOriginalRule(rule || null);
}, [rule, setOriginalRule]);참조-안전한 함수를 사용하려면 메모이징을 해야 하는데, 보일러플레이트 코드가 지저분하게 붙는 것이 싫었습니다. 또한 Jotai를 사용하면 “읽기 동작”과 “쓰기 동작”을 명확히 분리할 수 있어, 쓰기만 하는 컴포넌트는 상태가 변경되어도 리렌더링되지 않는다는 장점이 있습니다.
(화면이 변경됨에 따라) 전체적인 구조를 재개편함과 더불어, Context 기반 상태 관리를 Jotai 기반으로 변경하여 상태를 작게 쪼개어 관리하고, 참조-안전한 쓰기 전용 아톰을 활용했습니다.
// RuleCard.tsx
// 💡 참조-안전한 setter 함수
const setEditorRuleId = useSetAtom(editorRuleIdAtom);
onClick={() => {
setEditorRuleId(rule.id);
setView("editor");
}}자세한 내용은 다음 링크를 참고해주세요.
Composite 패턴에서 ECA 패턴으로
기존의 시스템에서는 범위 조건을 OR로 묶을 경우, 그 시간 내에서는 매분마다 알림이 울리는 버그가 있었습니다. 근본적으로는 “범위 조건”, “특정 시각 조건”, “주기 조건”이 다른 의미론을 가지지만 이를 모두 동일한 의미로 사용한 것이 문제였습니다.
이를 해결하기 위해 ECA(Event-Condition-Action) 패턴을 도입하여 세 조건을 “트리거”와 “컨디션”으로 명확히 구분했습니다. 자세한 내용은 다음 링크를 참고해주세요.
GateKeeper에게 인정받기
이전 앱은 맥에서 실행하면 GateKeeper에 의해 신뢰할 수 없는 소프트웨어로 판단되어 사용자가 앱을 실행하기가 매우 귀찮았습니다.
저는 이 문제를 해결하기 위해 연간 약 12만원의 Apple Developer Membership에 가입한 뒤 인증서를 발급받아 코드 서명 및 공증 작업을 CI 과정에 추가했습니다.
애플 생태계에 공식으로 앱을 배포하는 과정이 악명이 높았던지라 걱정을 많이 했는데, 다행히 클로드가 친절히 안내해 주어서 반나절 만에 설정을 완료했습니다.
첫 공증은 자기 전에 신청해 두고 다음날 일어나 확인해보니 완료가 되어 있더라구요.
앱스토어 배포까지
앱스토어 외부로 앱을 배포하니 갑자기 앱스토어에 앱을 올리고 싶다는 생각이 들었습니다. 앱스토어에서 앱을 내려받는 것이 사용자에게 가장 자연스러운 경험이니까요. (그 외에도 분석과 같이 앱스토어가 제공해주는 여러가지 기능들을 사용할 수도 있습니다.)
앱스토어 배포를 하는 과정은 서명/공증 과정보다 더 복잡하고 챙겨야 할 것이 많았습니다. 인증서들을 발급받아 GitHub Secrets에 등록하고 CI/CD 과정에 반영하고 심사를 위한 정보들을 챙겨야 했습니다.
이 중에서 제일 짜증났던 과정은 미리보기 스크린샷을 준비하는 것이었습니다. 피그마를 디자이너로서 다뤄 본 적이 없었기 때문에 우선 Google Stitch를 이용해서 만들어 보려고 했으나 제가 원하는 결과물이 나오지 않았습니다. 큰 맥락에서는 요구사항이 잘 반영되었지만 디테일한 부분을 수정하려고 하니 다른 부분이 깨지거나 엉뚱하게 바꿔 버리는 등 시행착오가 많았습니다.
다른 서비스를 사용해 보려고 하니 회원 가입이나 결제를 유도하는 서비스가 많아서, 결국 클로드 코드를 이용해 HTML+CSS로 웹페이지를 만든 후 스크린샷을 찍는 방법으로 해결했습니다. (물론 이것도 완벽하지는 않습니다만..)
결국 어찌저찌 필요한 것들을 챙긴 뒤 심사를 제출했습니다!
후기
어쩌다 보니 앱을 재단장하여 애플 생태계를 통해 배포까지 하는 작업들을 했습니다. 마지막으로 개인적인 소감들을 나열하고 마무리하도록 하겠습니다.
좋았던 점
- 디자인 시안을 뽑는 데는 Google Stitch가 상당히 괜찮았습니다.
- 악명 높은 앱 서명/공증/배포도 클로드의 도움으로 빠르게 완료했습니다.
고민거리
- 배포는 했으나, 앱을 홍보하는 게 문제네요. (뭔가 부끄럽네요.)
- 원-투-텐 경험을 위해서는 데이터 기반 의사결정이 필요한데, 앱 정체성 중 하나가 ‘사용자 추적이 없는 순수 오프라인 앱’이다 보니 막막하네요.
이모저모
- 앱 미리보기 스크린샷은 캔바가 잘 뽑는다고 들은 것 같은데, 실제로도 그런지 유경험자의 얘기를 들어보고 싶습니다.
- 아직까지는 수익화에 큰 관심이 없어서, 토스 QR 송금 정도만 붙여놨습니다.