Show HN: Lofi Cities – Pixel-art city nights with browser-generated lofi
Show HN: Lofi Cities — 브라우저에서 음악을 생성하는 픽셀 아트 도시의 밤
Lofi Cities는 여러 도시의 픽셀 아트 야경과 도시 소리를 보여주고, Web Audio API로 브라우저에서 음악을 실시간 생성하는 웹 앱입니다. 오프라인 재생과 OBS 배경 사용도 지원하며, AI로 만든 이미지와 영상 루프를 두고 커뮤니티에서는 미술의 완성도와 AI 활용을 논의했습니다.
- 주제
에디터 노트
이 앱에서 가장 재밌는 아이러니는 그림과 음악의 역할이 뒤바뀐 점입니다. AI가 만든 픽셀 아트는 HN 탐정들이 디더링 하나로 간파했습니다. 반면 아무도 트집 잡지 않는 음악은 AI가 아니라 코드가 만든 겁니다. 샘플 하나 없이 Web Audio API로 합성하니 매번 새 곡이 나오고, 오프라인에서도 돌아갑니다. 'AI 생성'이라는 간판보다 '절차적 생성'이라는 구식 기술이 더 좋은 결과를 낸 셈입니다. 힐링 앱의 적은 광고판이었는데, 제작자가 광고판을 팔아서 돈을 버는 구조라는 점도 묘합니다. 고요함을 파는데 시끄러운 방식으로 파는 겁니다.
AI 요약
Lofi Cities는 파리, 도쿄, 뉴욕 등 16개 도시의 애니메이션 야경을 감상하는 무료 웹 앱입니다. 도시별 주변 소리를 곁들이며, 음악은 Web Audio API로 코드, 드럼, 베이스, 멜로디를 합성합니다. 샘플이나 녹음 음원을 재생하지 않아 들을 때마다 음악이 새로 만들어집니다. 재즈홉, 로파이 피아노, 보사노바 등 분위기와 악기 구성을 바꿀 수 있습니다.
사용 기능
도시와 날씨를 직접 고르거나 일정 간격으로 도시를 순회하게 설정할 수 있습니다. 집중 타이머와 취침 타이머를 제공하고, 장면을 PNG로 저장하거나 OBS의 브라우저 소스로 불러올 수도 있습니다. 한 번 온라인으로 열면 도시 장면과 음악을 오프라인에서도 이용할 수 있습니다.
제작 방식과 커뮤니티 반응
제작자 Safa Elmali는 이미지와 영상 루프에 AI 도구를 사용했다고 밝혔습니다. 음악은 AI 음원이 아니라 브라우저에서 절차적으로 생성합니다. Hacker News에서는 AI 이미지의 픽셀 표현이 거칠다는 지적과, 수작업 큐레이션이 들어간다는 반응이 나왔습니다. 광고판이 장면에 어울리지 않는다는 의견도 있었고, 제작자는 숨김 옵션이나 장면에 더 자연스럽게 섞는 방법을 물었습니다.
- @andsoitis — 멋집니다. 로스앤젤레스, 케이프타운, 피렌체, 카이로, 아테네, 밴쿠버, 상파울루도 추가해 주세요. AI로 원하는 도시를 즉석에서 만들면 안 되나요?
- @vunderba — 어느 정도는 가능하겠지만, 첫 장면과 마지막 장면을 만들어 영상 루프로 엮는 것만으로 끝나지는 않습니다. 장면에 배치할 요소를 사람이 골라 다듬는 과정이 분명히 있습니다. 새나 사람, 차량 같은 애니메이션 요소를 만들더라도 각 요소가 움직일 경로와 지점을 자동으로 찾아내면 결과가 어색해질 수 있습니다.
- @safaelmali — 도시는 AI로 미리 만들고 루프를 준비한 뒤 추가합니다. 아직 앱에서 즉석으로 도시를 만들지는 못하지만 좋은 아이디어입니다.
- @andsoitis — 움직이는 배경화면은 사용성을 떨어뜨립니다.
- @Razengan — 사람마다 취향이 다릅니다. 움직임은 은은한 시차 효과나 빗방울처럼 만들 수도 있고, 사용자가 상호작용할 때만 움직이게 할 수도 있습니다.
- @andsoitis — 취향의 문제일 수는 있지만, 작업 중에는 움직이는 배경화면이 대체로 사용성을 낮춥니다. 움직임은 시선을 끌기 때문에 코드나 문서를 오래 보는 동안 주변 시야에서 주의를 분산합니다. 작업 중에는 움직임을 멈추고 화면 전환 때만 움직이게 하는 방법이 타협안입니다.
- @timenotwasted — 정말 아름답게 만들었습니다. 도시는 더 많이 추가될 것 같으니, 같은 도시를 실내나 스튜디오, 카페에서 보는 장면도 추가하면 좋겠습니다.
- @safaelmali — 실내 장면을 로드맵에 추가하겠습니다. 카페나 아파트를 넣으면 도시마다 느낌이 달라질 것 같습니다.
- @thih9 — Product Hunt 광고가 몰입을 깨뜨립니다. 광고판이 9층 건물보다 높은 장면도 있어 현실감이 없습니다.
- @safaelmali — 숨김 옵션이 있으면 좋을까요, 아니면 광고판이 장면에 더 잘 어울리도록 다듬는 편이 좋을까요?
- @prometheus1992 — 숨기는 옵션이 있으면 좋겠습니다.
- @bicx — 광고판을 장면에 더 잘 섞는 편이 좋겠습니다. 대비를 낮춰서 가장 먼저 눈에 띄지 않게 하면 좋겠습니다.
- @mft_ — 제 환경에서는 비 소리가 빗소리가 아니라 백색 소음처럼 들립니다.
- @safaelmali — 어떤 브라우저와 기기를 사용하시나요? 음악을 멈춰도 빗소리가 백색 소음처럼 들리나요?
- @mft_ — 네. macOS 15.6.1에서 Firefox 155를 사용합니다.
- @safaelmali — 알겠습니다. 음악을 멈춘 상태에서 Firefox의 빗소리를 확인하겠습니다.
- @safaelmali — 이미지를 만들고 영상 루프를 준비할 때 AI를 사용합니다. 음악은 Web Audio API로 브라우저에서 실시간 합성합니다.
원문: loficities.com / 번역·요약: Trawling