1P by GN⁺ | ★ favorite | 댓글 1개
  • PuTTY 아이콘은 1990년대 말~2000년대 초에 만들어진 구식 스타일을 유지한 채, 화면 크기와 플랫폼 요구 변화에 맞춰 여러 번 다시 렌더링됨
  • 초기 버전은 MSVC 아이콘 편집기에서 픽셀 단위로 그린 32×32 이미지였고, Windows 권장 16색 팔레트와 흑백 아이콘 같은 당시 제약을 반영함
  • 두 컴퓨터와 번개, 문서, 모자, 키, 스패너 같은 요소는 각 도구의 역할을 구분하면서도 PuTTY 제품군처럼 보이게 하려는 장치였음
  • 2007년 무렵 Windows의 48×48 아이콘 표시 때문에 32×32 확대 품질이 나빠지자, 48×48·32×32·16×16과 흑백 버전을 스크립트로 자동 생성하게 됨
  • 이후 큰 크기에서 비트맵 스크립트의 한계를 보완하려고 SVG 생성 스크립트를 만들었지만, 작은 아이콘은 기존 스크립트가 더 나은 결과를 냄

PuTTY 아이콘의 출발점

  • 2025년 3월, PuTTY Windows 실행 파일 아이콘인 “로고”의 기원과 변화 과정을 묻는 이메일이 정리의 계기가 됨
  • 현재 아이콘 디자인의 뼈대는 1990년대 말과 2000년대 초에 만들어졌고, 이후에도 큰 스타일 변화 없이 유지됨
  • 시간이 지나며 아이콘은 여러 제약 아래 다시 렌더링되어야 했고, 그래픽 디자인 문제이면서 동시에 기술 문제이기도 했음

손으로 픽셀을 찍던 시기

  • 초기에는 여러 크기의 아이콘이 필요할 것을 예상하지 못해, 자동화 없이 MSVC 아이콘 편집기에서 직접 그림
  • Windows GUI 프로그램은 아이콘이 없으면 식별성이 떨어져 PuTTY 초기부터 별도 아이콘이 필요했음
  • PuTTY 본체

    • 남아 있는 가장 이른 PuTTY 아이콘은 1999년 초에 쓰이던 버전이며, 프로젝트 시작 시점인 1996년 여름까지의 소스 관리 이력은 남아 있지 않음
    • 아이콘은 32×32 픽셀이고, 원색과 회색 계열로 구성된 제한된 팔레트를 사용함
    • 1990년대 중반에는 truecolour가 아닌 디스플레이가 흔했고, Windows 아이콘에는 고정된 16색 팔레트 사용이 권장됐음
    • GUI 전체 아이콘이 같은 16개 팔레트 항목을 재사용해 화면 색상 자원을 덜 쓰게 하려는 방식이었음
    • 흑백 버전도 당시 권장 사항에 따라 제공됨
    • Win95 이후 흑백 디스플레이에서 실제로 본 기억은 없지만, Windows 3.1에서 32비트 프로그램 실행을 시도하게 해 주는 Win32s와 관련됐을 가능성이 있음
    • 디자인은 1990년대에 흔한 CRT 모니터와 시스템 박스 형태의 컴퓨터 두 대를 번개로 연결한 모습임
    • 번개는 전기적 통신을 암시함
    • 노란색 번개와 파란 화면을 쓴 이유는 명확히 남아 있지 않음
    • 파란 화면은 Windows Blue Screen of Death를 뜻한 것이 아니며, 일반적인 PuTTY 사용에서는 한쪽만 Windows이고 어느 쪽도 크래시한 상태가 아니기 때문임
  • PSCP와 PSFTP

    • 1999년 기여자가 SCP 구현을 보내면서 PSCP가 생겼고, 별도 아이콘도 그려짐
    • PSCP는 명령줄 인자가 없으면 쓸 수 없어 GUI에서 실행하거나 Start Menu에서 식별할 실용적 필요가 크지 않았음
    • PSCP 아이콘은 PuTTY 아이콘의 한쪽 컴퓨터를 문서로 바꾸고, 나머지 컴퓨터와 문서를 번개로 연결한 형태임
    • 이후 파일 전송 도구인 PSFTP도 같은 아이콘을 재사용함
    • PSFTP는 명령줄 인자 없이 실행해도 대화형 프롬프트에서 접속 대상을 입력할 수 있어, 같은 아이콘을 PSCP보다 더 실용적으로 활용함
    • 두 도구가 같은 아이콘을 쓰면 Explorer에서 구분에 주의해야 하지만, 차이를 시각적으로 표현할 쉬운 방법을 찾지 못함
  • Pageant

    • Pageant는 SSH agent로, 처음에는 비밀 요원의 얼굴을 아이콘으로 그리려 했음
    • 얼굴 표현은 실패했지만 만족스럽게 그린 챙 넓은 모자를 PuTTY 컴퓨터 위에 올린 형태가 그대로 남음
    • 같은 컴퓨터 디자인을 재사용해 제품군과 시각적으로 맞고, Pageant의 agent가 인간이 아니라 컴퓨터화된 agent라는 점에도 어울림
    • Pageant의 초기 아이콘에는 흑백 버전이 없었고, 대신 System Tray에 들어갈 16×16 작은 아이콘이 필요했음
    • Windows가 32×32 아이콘을 축소하면 품질이 좋지 않아, 작은 크기에서 모자띠와 모니터 윤곽을 손으로 안티앨리어싱함
    • 외곽선은 배경과 구분되도록 검은색으로 유지함
  • PuTTYgen

    • PuTTYgen 아이콘은 컴퓨터, 번개, 키를 조합한 형태임
    • 키는 암호학적 키를 생성하고 다루는 도구라는 점을 나타내는 약한 시각적 말장난임
    • PuTTYgen은 네트워크 통신을 하지 않으므로 번개는 기능적으로 부정확하지만, PuTTY 제품군 도구라는 시각적 일관성을 주기 위해 들어감
    • PSCP와 달리 컴퓨터와 객체의 배치 방향이 반대라 두 아이콘을 구분하기 쉬워짐
  • 설정 대화상자

    • PuTTY 설정 대화상자의 taskbar 항목은 기본 Windows 창 아이콘을 사용했고, 이 모습이 보기 좋지 않았음
    • 본체 아이콘을 그대로 재사용하지 않고, 구성·수정을 나타내는 큰 스패너를 덧씌운 아이콘을 그림
    • 이 아이콘에는 다시 흑백 버전이 포함됐는데, 기존 흑백 버전이 있는 아이콘을 수정했기 때문일 수 있음

스크립트로 다시 그린 아이콘

  • 2007년 무렵 32×32 아이콘이 보기 나쁘다는 불만이 생김
  • 디스플레이가 커지고 Windows가 48×48 아이콘 표시를 기본으로 하면서, 32×32만 가진 애플리케이션 아이콘은 확대되어 보였음
  • 48은 32의 배수가 아니어서 Windows가 아이콘을 균등하지 않게 늘렸고, 결과가 더 나빠짐
  • 새 아이콘 세트를 모두 손으로 다시 그리는 대신, 각 아이콘 구성 요소를 프로그램으로 그리는 생성 스크립트를 작성함
  • 이 스크립트로 모든 도구에 대해 48×48, 32×32, 16×16 아이콘을 자동 생성함
    • 어떤 아이콘만 작은 버전이나 흑백 버전이 있는 불일치가 사라짐
    • 모든 아이콘이 모든 버전을 갖게 됨
  • 가장 어려운 부분은 16×16 아이콘이었음
    • Pageant에서 손으로 적용했던 안티앨리어싱 판단을 코드로 재현해야 했음
    • 같은 방식을 모든 그래픽 구성 요소에 적용해야 했음
  • 스크립트 결과는 원본 손그림과 완전히 같지는 않음
    • PuTTY 아이콘은 몇 픽셀만 달라진 가까운 결과였음
    • Pageant 아이콘은 모자띠 안티앨리어싱뿐 아니라 컴퓨터 크기도 달라짐
  • 스크립트는 흑백 아이콘도 생성할 수 있게 만들어짐
    • 2007년에는 흑백 디스플레이에서 Windows를 쓰는 경우가 더 드물었을 것으로 보임
    • 자동화 덕분에 48픽셀 흑백 아이콘까지 만들 수 있었음

pterm과 X11 아이콘

  • 2002년에 PuTTY 코드 상당 부분이 Linux로 포팅됐고, Linux용 GUI PuTTY와 X11 터미널 에뮬레이터 pterm이 만들어짐
  • X11 프로그램은 창 속성에 아이콘 비트맵을 설정할 수 있음
    • 창 관리자는 이를 최소화 아이콘, taskbar 항목, 창 프레임의 아이콘 등으로 사용할 수 있음
  • 2002년에는 GTK 1이 창 아이콘 설정을 지원하지 않는다고 알고 있었고, 여러 비트맵 파일 형식을 제공하는 것도 번거로워 아이콘을 만들지 않음
  • 생성 스크립트가 생긴 뒤에는 여러 파일 형식 출력이 쉬워졌고, GTK 1도 아이콘 속성 설정이 가능하다는 점을 알게 됨
  • pterm 아이콘은 네트워크 통신을 하지 않기 때문에 번개 없이 컴퓨터 하나만 크게 그린 형태임
  • pterm 설정 대화상자에는 PuTTY 설정 아이콘처럼 스패너 오버레이를 재사용함
  • 2021년에는 Windows에서 동작하는 pterm을 만들 수 있게 됐고, 이 아이콘이 Windows pterm에도 쓰이게 됨

설치 프로그램 아이콘과 색상 처리

  • 생성 스크립트는 true colour 아이콘도 출력할 수 있어 기존 16색 팔레트에 묶이지 않게 됨
  • PuTTY 설치 프로그램 아이콘에는 열린 골판지 상자와 컴퓨터를 향해 나오는 번개가 들어감
    • “PuTTY가 상자에서 사용자의 기계로 튀어나온다”는 이미지를 의도함
  • 골판지 상자에는 갈색이 필요했지만, 갈색은 기존 Windows 16색 아이콘 팔레트에 없었음
  • true-colour 아이콘에서는 실제 갈색을 사용할 수 있었음
  • 그래도 하위 호환성을 위해 16색 아이콘을 유지함
    • 어두운 빨강 #800000을 검정 #000000, 어두운 노랑 #808000, 노랑 #ffff00과 각각 50:50으로 섞어 갈색에 가까운 세 가지 색을 만듦
    • true-colour에서는 평균색을 쓰고, 16색 버전에서는 두 팔레트 색 픽셀을 번갈아 배치하는 하프톤으로 표현함

SVG로 다시 만든 아이콘 세트

  • 기존 아이콘 스크립트는 32×32와 48×48에서는 잘 동작하고 16×16 축소도 괜찮지만, 더 크게 키우면 품질이 좋지 않음
  • 실패한 Mac 포팅 시도 중 MacOS dock에 128×128 아이콘이 필요했고, 기존 스크립트의 해당 크기 출력은 만족스럽지 않았음
  • Mac 포팅은 사실상 포기했지만, 완전 확장 가능한 아이콘은 다른 용도로도 유용할 수 있음
    • GUI 아이콘 밖의 맥락에서도 사용할 수 있음
    • 티셔츠나 노트북 스티커 같은 용도도 가능함
  • 두 번째 아이콘 생성 스크립트는 기존 스크립트의 사고방식을 흉내 내되, 비트맵 대신 SVG 파일을 출력함
  • 현재 SVG 버전은 PuTTY, PuTTY 설정, pterm, pterm 설정, PSCP, Pageant, PuTTYgen, 설치 프로그램까지 8개 아이콘으로 구성됨
  • 작은 아이콘에서는 SVG가 안티앨리어싱 판단을 알 수 없으므로 기존 스크립트가 더 나은 렌더링을 함
  • 큰 아이콘, 특히 true colour 큰 비트맵이 필요할 때는 SVG를 기반으로 렌더링하는 방식이 권장됨

오래된 스타일을 유지하는 이유

  • PuTTY 아이콘 세트의 현재 상태는 1990년대 스타일을 유지한 채 여러 렌더링 방식을 추가한 형태임
  • 전체 1990년대 스타일에 반대하며 새 디자인 세트를 제안한 사람들도 있었지만, 채택할 만큼 마음에 드는 제안은 없었음
  • 1990년대 스타일은 PuTTY를 안심될 만큼 구식으로 보이게 하는 요소로 받아들여짐
  • 큰 재설계가 실제로 받아들여질 가능성은 낮아 보이며, 프로젝트 수명 동안 현재 아이콘이나 거의 같은 형태가 유지될 것으로 예상됨

댓글과 토론

Hacker News 의견들
  • 번개가 노란색인 게 이상하다는 대목에서 잠깐 멈칫했는데, 나에게는 노란색이 “당연히” 맞는 색처럼 느껴졌음
    이미지 검색을 해봐도 노란 번개가 전기를 나타내는 가장 보편적인 상징이고, 표준적인 검정-노랑 위험 표지도 함께 떠오름
    이 표현이 역사적으로 얼마나 오래됐고 어디서 유래했는지는 모르지만, 만화와 카툰에서는 오래전부터 널리 쓰였던 것 같음

    • Simon Tathum은 영국인이고, 여기서는 청록색 번개를 본 기억이 없음
      영국의 감전 사망 위험 표지도 검정 바탕이 아니라 노란 바탕에 검정색임: https://www.hse.gov.uk/electricity/nearelectric.htm#signs
      다만 번개 이미지 검색을 해보면 왕실색 파랑 위의 청록, 보라, 빨강 등 선택지가 꽤 보이긴 함
    • 특히 당시 WinAmp 아이콘도 노란 번개였고, 90년대 거의 모든 Windows PC에 깔려 있었음
    • 이 부분이 나도 눈에 띄었음. 글쓴이는 화면이 왜 파란색인지도 의문을 제기함
      아마 90년대 후반에는 이런 색 선택이 완전히 자연스러웠고 Windows 디자인 관례를 따른 것이어서, 당시에는 별로 깊게 생각하지 않았던 걸 잊은 듯함
    • 순전한 추측이지만, PuTTY 아이콘의 노란 번개는 안전 경고 표지에서 빌려온 상징이라 계속 노란색으로 남았을 수 있음
      노란색은 오래전부터 고시인성 색상으로 선호됐고, 산업용 장비 외장에서도 감전 위험을 언어와 무관하게 명확히 알리는 그림문자로 잘 보였을 것임
      결국 “늘 그렇게 해왔으니까”라는 식의 관성으로 노란 번개가 유지된 듯함
    • 최근에 나도 이 생각을 했음. 전기차나 플러그인 하이브리드가 자신이 전기차임을 나타내려고 청록색 포인트를 많이 쓰는데, 그래도 전기를 나타내는 색으로는 노란색이 더 자연스럽게 느껴짐
  • PuTTY가 끌리는 이유 중 하나가 바로 그 지점임. PuTTY처럼 보이는 애플리케이션에는 어딘가 안심되는 느낌이 있음
    오래된 외형이 변화 없음에서 오는 안정감을 주는 건지, 운영체제 기본 요소를 써서 더 일관돼 보이는 건지는 모르겠음
    반대로 “현대적” 미학의 앱은 Material Design, 둥근 모서리, 전환 효과, 낮은 대비, 큰 여백이 많아질수록 불신과 회의감이 커짐
    심리 분석을 할 자격은 없지만, PuTTY식 디자인을 좋아하는 집단이 있는 걸 보면 이런 해석이 드문 편은 아닐 듯함

    • Win32 그래픽 기본 요소를 쓰는 소프트웨어는 정말 엄청나게 빠름
      그런 외형이라고 해서 반드시 빠르다는 보장은 없고, 다른 곳에서 시간을 낭비하거나 그 외형을 정교하게 흉내 내는 것일 수도 있지만, 예전 Notepad처럼 즉시 반응하는 진짜 물건일 가능성도 있음
      그 “그냥 텍스트 컨트롤에 파일을 넣고, \r 없는 \n 따위는 신경 쓰지 않는” Notepad가 그립다. 자신이 아닌 척하지 않고 정확히 자기 역할만 하던 프로그램이었음
      예전에 어셈블리로 Notepad를 다시 구현한 것을 본 것 같은데, 파일 접근을 텍스트 컨트롤에 연결하는 접착 코드가 화면 절반쯤이었고 ctrl+h 메뉴와 대화상자까지 있었을지도 모름
      Python이 자랑하는 접착 코드와 비슷하지만, 순수 어셈블리였고 파일 접근 DLL과 최소 표준 컨트롤 세트 외에는 의존성이 없었음
    • Win32 소프트웨어를 쓰던 시절이 그립다. 단순하고, 빠르게 그려지고, 깔끔하고, 정보 밀도가 높았음
      이제는 모든 것이 큰 “현대 Windows” 위젯을 쓰거나, 더 나쁘게는 Electron을 씀
    • PuTTY와 Winamp는 Windows에서 20년 넘게 써온 소프트웨어인데도 여전히 같은 느낌임. 낡거나 구식으로 느껴지지 않음
    • Material Design의 원칙 중 하나는 사각형이 클릭되기 전까지 자기 정체를 드러내지 않아야 한다는 것처럼 보임
      그게 버튼일 수도 있고, 텍스트 상자일 수도 있고, 그냥 사각형일 수도 있음
  • “원하는 아이콘을 그릴 때까지 기다리면 Pageant는 아예 출시되지 않을 거라는 걸 깨달았다”는 문장이 와닿음
    손대보고 싶은 프로젝트 상당수가 이런 자기 유발 장애물에서 멈춰 섬
    개인적으로는 저장소 이름이나 최상위 폴더 이름을 정하다가 막히는 게 대표적임

    • 마감이 필요함
      해커 문화에서는 프로젝트 관리가 늘 낭비처럼 무시되지만, 프로젝트를 앞으로 움직이게 하는 방법을 찾아내는 건 가치 있는 역할임
    • 개인적으로 LLM이 가장 도움이 된 영역 중 하나가 이름 짓기 장벽을 넘는 일이었음
      저장소, 변수, 구조체 이름 같은 것들을 이상하게도 잘 못 정하는 편임
    • 작업 중인 앱 아이콘을 그려보려 했는데, SVG 곡선은 정말 어렵다
      결국 처음 만들려던 것보다 훨씬 단순하지만 더 말이 되는 로고가 나왔음
    • 일명 바이크셰딩
  • 화면을 왜 파란색으로 골랐는지 기억나지 않는다고 했지만, Win 3.x와 Win95 아이콘에서 화면을 표현할 때 파란색은 표준적인 색이었으니 그냥 그 관례를 따른 것 같음

    • EDIT.COM과 MS-DOS 설치 프로그램도 파란 배경을 썼음
      실제로 파랑, 즉 CGA 색상 1번은 많은 도구에서 배경색으로 매우 인기가 있었음
      Turbo Pascal, Turbo C 같은 것들에서는 파란 배경에 흰 글자가 흔한 색 테마였고, Borland dBase는 여러 화면에서 파란색과 청록색 배경을 섞어 썼음
      당시 사용할 수 있는 색이 제한적이었기 때문에 파란색은 눈이 편한 몇 안 되는 배경색 중 하나였음
      Windows 3.1, 95, 98 등에서도 컴퓨터를 나타내는 아이콘의 화면색으로 파란색을 썼던 기억이 있음
      “네트워크 환경”처럼 컴퓨터 두 대가 있는 아이콘에서는 한쪽 화면이 파란색이고 다른 한쪽은 청록색이었음
    • 이 페이지에서 PuTTY가 쓴 것과 거의 같은 컴퓨터 아이콘 예시를 여러 개 볼 수 있음: http://toastytech.com/guis/win31.html
      같은 아이콘이 아닌지 확인하려고 확대해봐야 했음
    • 흑백 버전도 말이 됐다고 봄. 당시에는 아직 사용 중인 흑백 휴대용 컴퓨터가 꽤 있었을 테니까
  • 추억이 떠오름. 2000년쯤 PuTTY를 포크해서 “RedBrick PuTTy”라는 버전을 만들었고, redbrick.dcu.ie로 한 번에 SSH 접속하는 버튼을 넣었음
    redbrick.dcu.ie는 Dublin City University Networking Society의 터미널 서버였고, 당시 내가 시스템 관리자였는지 웹마스터였는지는 기억이 안 남
    하지만 로고를 손으로 편집해서 빨간 벽돌을 넣었던 건 기억남
    이 이미지에서 간신히 볼 수 있음: https://wiki.redbrick.dcu.ie/images/b/b8/Putty_configuration...
    이 작고 멍청한 포크 덕분에 Telnet 대신 SSH 사용률이 약 5%에서 사실상 100%가 됐음
    이런 일이 가능하게 해준 라이선스를 쓴 Simon에게 감사함

  • “각 아이콘 이미지의 모든 구성요소를 프로그래밍 방식으로 그리는 코드를 썼다”는 대목은 Simon이 문제에 접근하는 방식을 아주 잘 보여주는 예임
    2000년대에 Simon과 꽤 많은 시간을 보내며 온갖 주제에 대해 많은 것을 배울 수 있었는데, 이런 방식이 정말 그답게 느껴짐

  • 당시 Windows에서 기본 아이콘 표시가 32×32가 아니라 48×48이 되고, MacOS는 Dock에 128×128 아이콘을 원했다는 부분이 떠오름
    그 시절 Windows에서 Mac OS X로 옮긴 가장 피상적이지만 동시에 가장 강렬한 이유 중 하나가 바로 128×128 아이콘이었음
    Finder나 Dock에서 앱의 진입점이 되는 아이콘이 훨씬 매력적이고 본능적으로 더 아름다워 보였음
    특히 Windows 앱 아이콘은 Mac 앱보다 색을 더 적게 쓰는 경우가 많았음
    물론 전환한 이유는 여럿이었지만, 처음 Mac 데스크톱을 봤을 때 아이콘이 충분히 강한 인상을 줘서 더 깊이 들여다보게 만들었음

    • 당시 OS X가 어땠는지는 모르겠지만, Windows 애플리케이션에서 정말 짜증 났던 것 중 하나는 대부분의 아이콘이 너무 형편없어 보였다는 점임
      제대로 된 아이콘을 만드는 데 신경 쓰는 사람이 거의 없어 보였음
      기본 크기가 48×48로 바뀌었는데도 아이콘을 갱신하지 않아 확대 때문에 흐릿해진 경우도 있었고, 모든 크기를 넣어두긴 했지만 큰 크기에서만 보기 좋은 이미지를 축소해놓은 경우도 있었음
      그러면 일반적인 아이콘 크기에서는 모든 디테일이 뭉개져 엉망이 됐음
      데스크톱이나 작업 표시줄에서 못생긴 아이콘을 보기 싫어서, 직접 사용자 지정 아이콘을 만들고 리소스 편집기로 실행 파일 안의 아이콘을 바꾸곤 했음
  • 비트맵에서 SVG로 넘어가면서 뭔가 잃는 게 있음
    비트맵의 거친 입자감에는 특유의 매력이 있음

    • 픽셀 아트가 더 좋지만, 그게 전부는 아닌 것 같음
      그냥 1:1로 옮겨놓고 좋은 결과를 기대할 수는 없음. 게다가 실제로도 1:1이 아니고, SVG에서는 외곽선이 훨씬 얇아졌음
      저해상도 그림에서는 상상력이 빈틈을 채워줌
      해상도가 높아질수록 필요한 품질도 높아짐. 벡터 아트는 정의상 무한 해상도니까
  • “Agent” 모자 아이콘은 Windows용으로 가장 인기 있던 유즈넷 소프트웨어라고 생각하는 Forté Agent에서 영감을 받은 게 아닐까 싶음
    아주 비슷한 모티프를 썼음: https://archive.org/details/forte-agent-1.6
    이런 역사를 만든 사람에게서 직접 읽는 게 좋음

    • 이상하게도 Carmen Sandiego가 떠오름
      현대판인 2014년 버전에도 같은 위치에 필름 누아르 탐정이 있고, 애플리케이션 아이콘은 여전히 모자를 쓴 여성임: https://youtu.be/h-_UNm_gycU?t=94
    • Spy vs. Spy 만화에서 온 것임
    • 이미 다른 답글에서도 나오지만, 글의 표현은 거의 직접적으로 Spy vs. Spy 기반이라고 말하는 것에 가까움
      이를 문서화한 공식 링크는 모르겠지만, https://www.google.com/search?q=spy+vs+spy&udm=2 이미지 검색을 해보면 이 모자의 영감이 된 이미지를 많이 볼 수 있음