AISongGen logoAISongGen

4 가지 테마, 하나의 곡 — 색으로 플레이어를 디자인하기

왜 aisonggen 은 단 하나의 결정판 룩 대신 4 가지 동등한 테마를 탑재했는지, 그리고 그 결정이 리스닝 화면에 어떤 영향을 주었는지.

6분 분량

음악 도구의 기본 외형은 그 도구로 사람들이 만들어 내는 음악의 장르를 결정해 버립니다. 검정과 보라의 신스 도구는 사용자를 신스 트랙 쪽으로 밀어내고, 따뜻한 종이 질감의 포크 도구는 포크 트랙 쪽으로 밀어냅니다. aisonggen 에서는 장르에 대해 중립적이고 싶었기에, 정문에 4 가지 테마를 동등하게 나란히 두었습니다.

도달한 4 가지 무드

  • Sonic Teal — 차갑고 임상적인 디폴트. 깊은 밤 마스터링 스튜디오 안에 있는 듯한 인상. 앰비언트, 테크노, 그리고 곡이 이야기보다 구축물에 가까운 작업에 잘 맞습니다.
  • Neon Orange — 시끄럽고 뜨거운 한 장. 브랜드 디폴트. 새벽 2 시 클럽 출구 같은 인상. 트랩, 하이퍼팝, 에너지 자체가 주제인 장르에 잘 맞습니다.
  • Studio Black — 조용하고 고급스러운 한 장. 차콜과 골드. 가죽으로 감싼 기타 앰프 같은 인상. 재즈, 소울, 진지하게 받아들여지길 원하는 싱어송라이터 작품에 잘 맞습니다.
  • Electric Magenta — 장난기 있는 한 장. 핑크와 크롬. Y2K 뮤직비디오 안쪽 같은 인상. 팝, 댄스, 그리고 농담이 노골적이어도 허용되는 음악에 잘 맞습니다.

테마가 가져온 비용

테마 1 개를 디자인한다는 것은 콘트라스트, 위계, 강조에 관한 작은 결정 1000 건입니다. 테마 4 개를 디자인한다는 것은 같은 1000 건의 4 배 — 게다가 동일한 컴포넌트 위에서 어느 것 하나 무너지지 않게 성립시켜야 합니다. 이를 다룰 만한 형태로 만든 방법은, 모든 색을 토큰 시스템으로 옮기는 것이었습니다. 컴포넌트 자체는 절대로 16 진 컬러 코드에 손을 대지 않고 역할만 참조합니다. --primary, --accent, --bg-elevated 처럼요. 테마는 값을 바꾸고, 컴포넌트는 전혀 바뀌지 않습니다.

테마가 가져온 것

예상하지 못했던 일: 사람들이 개인의 취향이 아니라 장르의 맥락으로 테마를 고르기 시작했습니다. 트랩 비트를 만드는 프로듀서는 디폴트가 Sonic Teal 이라도 Neon Orange 로 바꿔 갑니다. 테마 스위처는 설정 드롭다운이기를 그만두고 워크플로우의 일부가 되었습니다 — 지금 쓰고 있는 그 곡을 위해 방을 적절한 무드로 세팅하는 수단이 된 것입니다.

접근성에 대한 메모

4 가지 테마 모두 텍스트 콘트라스트와 포커스 링에서 WCAG AA 를 충족합니다. 상태를 색상 하나에만 의존하는 요소는 없습니다 — 어떤 액티브 스테이트든 형태, 두께, 또는 위치 중 하나가 함께 변합니다. Sonic Teal 과 Neon Orange 의 색상 차이를 인식하지 못하는 사용자도 버튼이 눌렸는지 여부는 구분할 수 있습니다.

다음 트랙은 무료 프롬프트 한 번 거리에 있습니다

스튜디오를 여시고, 분위기를 입력하시고, 30초 안에 완성된 곡을 들어보세요. 무료로 시작, 로열티 프리로 발매, 카드 등록 불필요.