Skip to main content
← 블로그

기각의 기록, 하루 더

VauDium ·

어제에 이어 오늘도 포커스 슬롯을 눈에 띄게 하려고 많은 것을 만들었다가 지웠습니다. 오늘의 삽질을 기록합니다.

기각의 기록, 하루 더

어제 포커스 슬롯을 눈에 띄게 하려고 많은 걸 시도했다가 전부 지웠다. 오늘도 이어서 해봤다. 또 대부분 지웠다.

오늘 지운 것들

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. 한 줄 변경.

그게 전부다.


오늘도 열심히 했다.