julian/submanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor screens to MVC architecture with modular widgets

Browse Source 
- Extract business logic from screens into dedicated controllers
- Split large screen files into smaller, reusable widget components
- Add controllers for AddSubscriptionScreen and DetailScreen
- Create modular widgets for subscription and detail features
- Improve code organization and maintainability
- Remove duplicated code and improve reusability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
JiWoong Sul
2025-07-11 00:21:18 +09:00
parent 4731288622
commit 83c5e3d64e
56 changed files with 9092 additions and 4579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
doc/color.md
View File

@@ -1,58 +1,79 @@
## 구독관리 앱 글래스모피어즘 색상 가이드
**신뢰성, 편안함, 트렌드함**을 모두 잡는 컬러 조합 추천
# 구독관리 앱 글래스모피어즘 컬러 & 텍스트 컬러 가이드
### 1. 컬러 선정 원칙
구독관리 앱에 글래스모피어즘을 적용할 때, **신뢰성, 편안함, 트렌드함**을 모두 잡으면서도 **텍스트 가독성**을 최우선으로 고려한 컬러 팔레트와 활용법을 안내합니다.
- **신뢰성:** 블루 계열, 그레이, 화이트 등 안정적이고 전문적인 느낌의 색상
- **편안함:** 저채도 파스텔, 연한 블루·민트, 따뜻한 베이지 등 눈에 부담 없는 색상
- **트렌드함:** 그라디언트, 반투명 레이어, 약간의 네온 포인트 등 현대적 감각
## 1. 컬러 팔레트 제안
### 2. 추천 컬러 팔레트
| 용도 | 컬러명 | Hex 코드 | 설명/느낌 |
|--------------|--------------|--------------|--------------------------|
| 메인 | Deep Blue | #2563eb | 신뢰, 포인트 |
| 서브 | Sky Blue | #60a5fa | 트렌디, 그라디언트 |
| 포인트 | Soft Mint | #38bdf8 | 상쾌함, 포인트 |
| 배경 | Light Gray | #f1f5f9 | 편안함, 밝은 배경 |
| 글래스 효과 | White Glass | #ffffff(투명)| 반투명 글래스 효과 |
| 포인트 | Pink Accent | #f472b6 | 트렌디, 액센트 |
| 그림자 | Shadow Black | rgba(0,0,0,0.08) | 깊이감 부여 |
| 용도 | 추천 색상 예시 (Hex) | 설명 |
|--------------|-------------------------------|---------------------------------------|
| 메인 | #2563eb, #60a5fa, #e0e7ef | 신뢰감 주는 블루 계열 그라디언트 |
| 서브 | #f9fafb, #f1f5f9, #f3f4f6 | 밝은 화이트·그레이, 편안한 배경 |
| 포인트 | #38bdf8, #7dd3fc, #f472b6 | 트렌디한 민트, 연핑크, 밝은 블루 |
| 테두리/블러 | rgba(255,255,255,0.3) | 글래스 효과용 반투명 화이트 |
| 그림자 | rgba(0,0,0,0.08) | 부드러운 깊이감 부여 |
## 2. 텍스트 색상 가이드
### 3. 실전 적용 예시
밝은 배경(예: #f1f5f9, #ffffff(투명)) 위에는 **어두운 텍스트**를,
진한 컬러(예: #2563eb, #38bdf8) 위에는 **밝은 텍스트**를 사용해야 가독성이 좋습니다.
- **배경:**
연한 블루(#e0e7ef) 또는 밝은 그레이(#f9fafb)
- **글래스 카드:**
반투명 화이트(예: rgba(255,255,255,0.2)), 블루 그라디언트 테두리
- **포인트 버튼:**
밝은 민트(#38bdf8) 또는 연핑크(#f472b6)
- **아이콘/텍스트:**
진한 블루(#2563eb), 다크 그레이(#334155)
- **그라디언트 예시:**
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF2563eb), Color(0xFF60a5fa), Color(0xFFe0e7ef)],
)
| 배경 컬러 | 추천 텍스트 컬러 | 용도/설명 |
|------------------|----------------------|-----------------------------------|
| Light Gray (#f1f5f9) | Dark Navy (#1e293b) | 메인 텍스트, 타이틀, 버튼 |
| White Glass (투명) | Deep Blue (#2563eb) | 강조 텍스트, 버튼 |
| Deep Blue (#2563eb) | Pure White (#ffffff) | 버튼, 반전 텍스트 |
| Sky Blue (#60a5fa) | Navy Gray (#334155) | 서브 텍스트, 부가 설명 |
| Soft Mint (#38bdf8) | Navy Gray (#334155) | 포인트 텍스트 |
| Pink Accent (#f472b6)| Deep Blue (#2563eb) | 강조, 포인트 텍스트 |
### 4. 참고 팁
## 3. 실전 적용 예시
- 글래스모피어즘은 **투명도·블러**와 함께 **밝고 깨끗한 색상**을 조합하면 신뢰감과 트렌디함을 동시에 줄 수 있습니다.
- 포인트 컬러를 너무 강하게 쓰기보다는, 전체적으로 **밝고 부드러운 톤**에 약간의 컬러만 더하는 것이 편안함을 극대화합니다.
- 실제 인기 앱(Reflect, T.RICKS, Coffee 등)도 블루·화이트·민트 계열을 주로 활용합니다.
- **배경**: Light Gray (#f1f5f9)
- **글래스 카드**: White Glass (rgba(255,255,255,0.2)), 테두리 Deep Blue (#2563eb)
- **메인 텍스트**: Dark Navy (#1e293b)
- **서브/설명 텍스트**: Navy Gray (#334155)
- **버튼 배경**: Deep Blue (#2563eb)
- **버튼 텍스트**: Pure White (#ffffff)
- **포인트/액센트**: Soft Mint (#38bdf8), Pink Accent (#f472b6)
### 5. 컬러 팔레트 예시
## 4. 그라디언트 및 글래스 효과 예시
| 이름 | Hex 코드 | 용도/느낌 |
|-------------|------------|-------------------|
| Deep Blue | #2563eb | 신뢰, 메인 |
| Sky Blue | #60a5fa | 트렌드, 그라디언트|
| Soft Mint | #38bdf8 | 포인트, 상쾌함 |
| Light Gray | #f1f5f9 | 배경, 편안함 |
| White Glass | #ffffff(투명도) | 글래스 효과 |
| Pink Accent | #f472b6 | 포인트, 트렌디 |
```dart
// Flutter 예시 (Dart)
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF2563eb),
Color(0xFF60a5fa),
Color(0xFFe0e7ef),
],
)
```
- 글래스 카드 배경: rgba(255,255,255,0.2) + blur + border(Deep Blue)
- 텍스트: #1e293b(진한 네이비) 또는 #2563eb(딥블루) 사용
### 6. 마무리
## 5. 디자인 팁
- **블루+화이트+민트** 조합은 신뢰성, 편안함, 트렌드함을 모두 만족시킵니다.
- 글래스모피어즘 효과와 함께라면, 위 팔레트로 세련되고 현대적인 구독관리 앱 UI를 완성할 수 있습니다.
- 실제 적용 시, 밝은 배경과 부드러운 그라디언트, 포인트 컬러를 적절히 조합해보세요.
- **텍스트 대비**를 항상 체크하세요.
밝은 배경에는 어두운 텍스트, 진한 배경에는 밝은 텍스트!
- **포인트 컬러**는 버튼, 아이콘, 강조 텍스트에만 제한적으로 사용하면 세련됨이 살아납니다.
- **글래스 효과**는 투명도와 블러, 그리고 경계선 컬러(예: #2563eb, #60a5fa)로 깊이감을 더하세요.
## 6. 컬러/텍스트 조합 요약표
| 배경색 | 텍스트색 | 용도 예시 |
|------------------|------------------|--------------------|
| #f1f5f9 | #1e293b | 메인 타이틀, 내용 |
| #ffffff(투명) | #2563eb | 카드 내 강조 |
| #2563eb | #ffffff | 버튼, 반전 강조 |
| #60a5fa | #334155 | 서브, 설명 |
| #38bdf8 | #334155 | 포인트, 서브텍스트 |
## 결론
- **블루+화이트+민트** 조합과, **밝은 배경+어두운 텍스트** 원칙으로 신뢰성, 편안함, 트렌드함, 가독성 모두 챙길 수 있습니다.
- 실제 앱에 적용할 때는 위 표를 참고해 각 상황별로 텍스트 컬러를 꼭 맞춰주세요.
- 글래스모피어즘 효과와 대비 높은 텍스트 조합으로, 세련되고 사용성 좋은 구독관리 앱을 완성할 수 있습니다.