기각의 기록, 하루 더
어제에 이어 오늘도 포커스 슬롯을 눈에 띄게 하려고 많은 것을 만들었다가 지웠습니다. 오늘의 삽질을 기록합니다.
기각의 기록, 하루 더
어제 포커스 슬롯을 눈에 띄게 하려고 많은 걸 시도했다가 전부 지웠다. 오늘도 이어서 해봤다. 또 대부분 지웠다.
오늘 지운 것들
1. 배경색 PRIMARY50
포커스된 아이템의 배경을 연한 파랑으로. 너무 대놓고 강조하지 말고 간접적으로 구분되게 하자는 의도였다. 넣었다 뺐다를 두 번 반복했다.
“배경색은 원래대로 돌리자.”
2. 테두리 Pulse (색 보간)
그림자를 지우고 테두리 색이 PRIMARY300 ↔ PRIMARY600 사이를 부드럽게 왔다갔다. interpolateColor로 중간 값까지 매끄럽게.
“내가 말을 잘못했네. 테두리가 Pulse하는 게 아니라 Glow + Pulse라고 해야 하나?“
3. Glow + Pulse (shadow 기반)
외곽 그림자가 shadowOpacity 0.25 ↔ 0.80, shadowRadius 6 ↔ 18로 2.4초 주기로 숨쉬듯 밝아졌다 흐려지게.
“그림자는 지저분해.”
4. Outer ring pulse (opacity만)
그림자 대신 테두리 바깥에 링을 하나 더 두고, 크기는 고정한 채 opacity만 0.2 ↔ 0.9로 주기적으로.
5. Outer ring pulse (커졌다 작아졌다)
링에 scale 1.0 ↔ 1.06을 더해서 커졌다 작아졌다까지 함께.
“내가 원하는 건 이게 아냐. Glow + Pulse는 원래대로 돌리자.”
6. Halo (상세 스펙 기반)
외부 프롬프트를 받아서 정식 구현했다. 링 두께가 2px ↔ 6px로 두꺼워지며, 색 알파도 25% ↔ 10%로, opacity 0.55 ↔ 1.0으로, 2.4초 주기. AccessibilityInfo로 reduce motion 대응까지 꼼꼼하게.
“Halo도 빼자.”
7. Halo 색 진하게
위의 halo에서 알파만 더 올려봤다. 25% → 50%, 10% → 25%. 조금 더 도드라지게.
결국 6번과 같이 빠짐.
8. Chip 스타일 (별 아이콘 감싸기)
포커스된 아이템의 별 아이콘을 24×24 연파랑 배경 안에 13×13 별로 담았다. 별 자체의 포인트 컬러는 유지. 넣었다 빼기를 여러 번 반복.
“칩은 빼자.”
9. Chip 배경 더 진하게
PRIMARY50 → PRIMARY100으로 한 단계 올림. 결국 다시 사라짐.
10. 배경색, 다시
Item 자체에 PRIMARY50 배경을 한 번 더 시도. 8시간 전에 뺐던 걸 다시 넣어봄.
“일단 배경 색은 빼자.”
11. Ring ripple (one-shot)
지속 애니메이션 말고, “이제 막 시작이야!” 느낌을 주려고 포커스되는 순간 링이 카드 바깥으로 한 번 퍼지며 사라지게. 750ms, easeOutCubic. 한 번 끝나면 완전히 투명.
“별로 효과가 없다.”
12. 별 크기 10% 확대
포커스된 상태에서만 별을 14 → 15.4로 살짝 키움.
“내버려 두자.”
지워지지 않은 것
테두리 색 PRIMARY300 → PRIMARY500. 한 줄 변경.
그게 전부다.
오늘도 열심히 했다.