본문으로 건너뛰기
피드

미래적인 텍스트를 만드는 6가지 영화 로고 꼼수

frontend 약 5분
vote
0
댓글
북마크

2016년에 나온 타이포그래피 글이지만, SF 영화 로고가 왜 비슷하게 ‘미래적’으로 보이는지 꽤 웃기고 정확하게 해부한다. 기울임, 각진 곡선, V자 형태, 글자 결합, 일부 획 제거, 금속 질감과 별 배경까지 더하면 대충 2092년 느낌이 난다는 식이다.

  • 1

    미래적인 로고는 무작위가 아니라 반복되는 시각 문법을 공유함

  • 2

    Blade Runner, Battlestar Galactica, Transformers, RoboCop, Star Wars, WALL-E 같은 사례가 거의 같은 규칙 조합으로 설명됨

  • 3

    개발자에게는 UI 브랜딩, 게임 UI, 사이드 프로젝트 로고를 만들 때 피해야 할 클리셰이자 써먹을 수 있는 레퍼런스임

  • ‘미래적인 텍스트’에는 꽤 뻔한 레시피가 있다는 글임

    • 시작점은 Eurostile Bold 같은 단순하고 넓은 산세리프 서체
    • 여기에 몇 가지 조작을 단계적으로 얹으면, 갑자기 영화 예고편에 나올 법한 2092년 로고가 됨
  • 첫 번째 규칙은 글자를 기울이는 것임

    • 그냥 반듯한 텍스트는 2016년 느낌인데, 이탤릭으로 살짝 밀면 2020년을 향해 질주하는 것처럼 보인다는 농담
    • 실제로 SF 로고나 게임 UI에서 앞으로 쏠린 글자는 속도감과 기술감을 쉽게 만들어냄
  • 두 번째는 어떤 부분은 더 둥글게, 어떤 부분은 더 각지게 만드는 것임

    • 곡선과 날카로운 각을 섞으면 평범한 글자가 갑자기 인공적이고 기계적인 인상을 줌
    • WALL-E 로고는 이 규칙을 특히 잘 보여주는 사례로 언급됨
  • 세 번째는 글자 안에 ‘V’자 형태를 집어넣는 것임

    • 글쓴이는 이걸 과장해서 “2050년 도착” 같은 식으로 설명함
    • RoboCop 로고가 대표 사례로 나오는데, 강한 V자와 과한 엠보싱이 결합돼서 진짜 과하게 미래적임
  • 네 번째는 글자들을 서로 결합하는 것임

    • 글자 사이 간격을 조정하는 kerning을 넘어서, 아예 몇 글자를 하나의 덩어리처럼 붙이는 방식
    • Star Wars 로고가 이 규칙을 끝까지 밀어붙인 예시로 나옴
    • Back To The Future 로고도 기울임, 형태 변형, 글자 결합이 동시에 들어간 사례로 소개됨
  • 다섯 번째는 글자의 일부 획을 뜬금없이 지우는 것임

    • 예를 들어 단어 대부분에서 가로선을 하나씩 빼버리면, 읽히긴 읽히는데 뭔가 첨단 장비 디스플레이 같은 느낌이 남
    • 이게 합리적인 디자인 원칙이라기보다는 ‘미래처럼 보이는 클리셰’라는 점이 포인트임
  • 여섯 번째는 질감과 배경을 과하게 얹는 것임

    • 노이즈 텍스처, 브러시드 메탈, 어두운 파란 조명, 엠보싱, 별 배경까지 넣으면 완성
    • Battlestar Galactica, Transformers, Guardians of the Galaxy, Captain America: The Winter Soldier 같은 로고가 이 규칙들을 거의 세트 메뉴처럼 사용함

ℹ️참고

> 이 글은 새 기술 발표는 아니지만, UI나 게임 화면에서 ‘미래 느낌’을 만들 때 어떤 시각적 약속이 반복되는지 보여주는 레퍼런스로 쓸 만함.

  • 재밌는 건 이 규칙들이 농담처럼 보이는데 실제 영화 로고에 너무 잘 맞아떨어진다는 점임

    • Blade Runner는 거의 원형에 가까운 사례로 제시됨
    • Star Trek: The Next Generation은 나중에 독자들이 지적한 “교과서급 예시”로 추가됨
    • 심지어 별 배경까지 있어서 글쓴이의 여섯 번째 규칙을 그대로 증명해버림
  • 개발자 입장에서는 ‘멋진 미래형 UI’를 만들 때 조심해야 할 체크리스트이기도 함

    • 기울임, 금속 질감, 끊어진 획, 과한 엠보싱을 전부 넣으면 바로 패러디처럼 보일 수 있음
    • 반대로 게임 UI, 해커톤 프로젝트, SF풍 랜딩 페이지처럼 의도적으로 장르감을 줘야 할 때는 꽤 빠르게 써먹을 수 있음

기술 뉴스라기보단 디자인 밈에 가깝지만, 개발자가 직접 제품 UI나 사이드 프로젝트 랜딩을 만질 때 이런 시각 문법을 알면 꽤 유용함. 특히 ‘미래 느낌’이 왜 매번 기울고, 붙고, 금속 질감이 되는지 한 번 보면 다시는 못 잊음.

댓글

댓글

댓글을 불러오는 중...

frontend

개인 웹사이트에 JSON-LD 넣는 법, 검색엔진과 크롤러가 내 사이트를 제대로 읽게 만들기

개인 웹사이트에 JSON-LD 구조화 데이터를 추가해 검색엔진과 크롤러가 사이트, 사람, 글, 프로젝트를 더 정확히 이해하게 만드는 실전 가이드야. WebSite, Person, ProfilePage, BlogPosting 같은 노드를 어떻게 연결하고 어느 페이지에 넣어야 하는지 예시 중심으로 설명해.

frontend

Deno, 웹 프로젝트를 데스크톱 앱으로 묶는 `deno desktop` 공개

Deno가 TypeScript 파일 하나부터 Next.js 앱까지 데스크톱 앱으로 패키징하는 `deno desktop`을 공개했다. 아직 안정 릴리스는 아니고 Deno v2.9.0 canary에서만 쓸 수 있지만, 운영체제 WebView 기반의 작은 바이너리, 프레임워크 자동 감지, 내장 자동 업데이트까지 한 번에 노린다.

frontend

파비콘 안에 웹사이트를 숨겨 넣은 개발자, 진짜 됨

한 개발자가 웹사이트의 파비콘 이미지를 작은 저장소처럼 사용해 HTML을 픽셀 RGB 값 안에 넣고, 브라우저에서 다시 읽어 렌더링하는 실험을 했다. 208바이트짜리 HTML payload에 4바이트 길이 헤더를 붙여 총 212바이트를 만들었고, 이를 9x9 픽셀 PNG 안에 87% 사용률로 저장했다.

frontend

스크린이 절대 못 보여주는 색은 어디에 있을까

이 글은 우리가 화면에서 보는 색이 인간이 볼 수 있는 색 전체가 아니라, sRGB와 Display-P3 같은 색역 안에 갇힌 일부라는 점을 파고든다. 특히 숲, 바닷속, 새와 나비의 구조색, 생물발광, 교통신호 LED 같은 실제 세계에는 모니터와 카메라가 제대로 담지 못하는 청록색과 녹색 계열이 꽤 많다는 얘기다. 디스플레이, 카메라, 조명, 렌더링을 다루는 개발자라면 “색상값 하나”가 생각보다 물리와 표준의 타협이라는 걸 체감하게 된다.

frontend

크롬, 매니페스트 버전 2 우회로까지 닫는다

구글 크롬이 매니페스트 버전 2 확장 지원을 사실상 최종 종료 단계로 밀어넣고 있다. 기존에는 플래그나 레지스트리 설정으로 유블록 오리진 같은 확장을 살리는 우회가 있었지만, 크로미움 150과 151을 거치며 그 우회 코드까지 제거되는 흐름이다.