윈도우 XP를 포트폴리오로 재현함

(mitchivin.com)

1P by GN⁺ 2일전 | ★ favorite | 댓글 1개

그래픽 디자이너 Mitch Ivin이 자신의 포트폴리오 사이트를 Windows XP 스타일로 재현함
자바스크립트가 활성화되어야 모든 시각적 효과와 기능 체험이 가능함
사이트 전체가 윈도우 XP 데스크톱의 느낌과 인터랙션을 충실하게 모방함
방문자는 로그인 사용자 인터페이스와 시작 메뉴, 작업 표시줄 등을 자유롭게 탐험 가능함
포트폴리오 경험 자체가 독특한 인터페이스 디자인 역량을 강조함

Mitch Ivin — 포트폴리오 웹사이트 소개

Mitch Ivin는 그래픽 디자이너로, 자신의 포트폴리오 웹사이트를 Windows XP 운영체제의 데스크톱 환경처럼 정교하게 구현함
방문자는 첫 화면에서 윈도우 XP 배경화면(Bliss) 이미지와 부트 로딩 애니메이션 등, 실제 사용 환경을 떠올리게 하는 시각 요소를 접할 수 있음
로그인은 ‘Mitch Ivin’을 클릭하여 진행하며, 해당 과정을 거치면 사용자는 실제 데스크톱을 활용하듯 사이트를 탐색할 수 있음
UI 곳곳에는 작업표시줄, 시작 메뉴, 사용자 프로필 아이콘, 재시작 및 로그오프 버튼 등이 있어, 모두 실제 OS의 분위기와 UX를 충실하게 반영함
본 사이트는 자신의 디자인 및 프론트엔드 개발 능력을 ‘경험’ 자체로 보여주는 창의적인 포트폴리오이자, 재미있는 웹 인터랙션의 예시임

주요 기능 및 특성

전체 구동에는 JavaScript를 반드시 요구함
F11 키로 전체화면 이용 시 실제 데스크톱 체험에 가까움
링크드인, GitHub, 인스타그램 등 외부 프로필 및 작업물로 이동할 수 있는 바로가기 버튼 제공
모바일 기기에서는 ‘기기를 세로모드로 돌려주세요’라는 안내창과 같은, 사용자 친화적 애니메이션 적용됨
각 아이콘, 버튼, 에니메이션은 목적 있는 디자인으로 심플하며, 오리지널 ‘Windows XP’ 감성을 그대로 전달함

인터페이스 구성

데스크탑 화면 및 로그인

초기화면에는 윈도우 XP 배경 이미지와 부팅 애니메이션 표시
‘Mitch Ivin’ 사용자 아이콘을 클릭하면 로그인 절차 진행
로그인 성공 시 작업표시줄과 시작버튼 등 인터페이스 활성화

작업표시줄(Taskbar) 및 시작 메뉴(Start Menu)

실제 Windows XP와 매우 유사한 작업표시줄 노출
Restart(재시작) 및 Log Off(로그오프) 등 시각적 버튼 구성
각 버튼 클릭 시 실제 OS처럼 인터랙션 연출

요약

Mitch Ivin의 윈도우 XP 포트폴리오 사이트는 개성있는 UI/UX로 차별화된 자기소개를 제공함
방문자들은 단순한 프로젝트 목록이 아닌, 직접 체험하는 방식의 포트폴리오를 경험함
디지털 디자이너 및 프론트엔드 개발자들이 참고할 만한 인터페이스 설계와 브랜딩 사례임

▲

GN⁺ 2일전 [-]

Hacker News 의견

사실 이 프로젝트 상당히 마음에 듦, 정말 멋지게 구현했다고 생각함
하지만 '그래픽 디자이너'로 자신을 소개하면서 Windows XP를 그대로 따라 만들었기에, 본인만의 디자인 실력을 얼마나 갖췄는지 바로 알아볼 수 없어 아쉬움
IE 아이콘 아래에 있는 다른 프로젝트를 보면 조금 더 본인의 색깔이 느껴지는데, 비주얼 일부가 AI로 생성된 듯해서 기대감이 적어짐
UX도 다소 이상함, 예를 들어 히스토리 컨트롤이 포트폴리오 내에서 캐러셀처럼 동작함. 뒤로/이전 버튼을 누르면 프로젝트 메뉴로 돌아갈 거라 기대했는데 그렇지 않음
만약 이런 포트폴리오로 내게 지원서를 낸다면 면접은 볼 기회 줄 것임. 분명 많은 노력을 들이고 높은 퀄리티를 만들어낸 점은 인상적임
하지만 위에서 언급한 부분, 특히 사용자 중심의 접근이 보여지지 않는 점이 염려돼서 면접에서 꼭 질문해보고 싶음
혹시나 해서 덧붙이면, 이런 디자인은 나도 만들 수 있음. 사실 이건 실질적으로 UX 디자이너가 준 시안을 구현하는 것과 똑같은 작업이고 그런 일 많이 해봄
실망스럽게 들릴까 걱정되지만, 어쨌든 상당히 멋진 작업이고 마음에 들었으며, 많은 곳에서 ‘첫 관문’용으로 확실히 통할 만한 포트폴리오가 될 것임. 진짜 본인 실력을 보여주는 건 그 다음 스텝임을 기억했으면 함
- 진짜로 이 디자인을 나도 만들 수 있고, 디자인 감각이 없는 편임이라 했는데, 그 말을 확실히 할 수 있겠는지 묻고 싶음
  지금껏 수많은 XP 모방 인터페이스를 봤지만 항상 뭔가 어색한 요소가 있었음
  MitchIvin XP가 완전히 일치하는 복제는 아니겠지만, 사용 경험만큼은 꽤 쾌적함
- 비슷한 우려를 가지고 있음
  단순 프로젝트로선 흥미롭지만 XP 복제라면 이미 더 정확하게 구현된 사례가 많음
  포트폴리오로서는 도리어 부정적 효과가 클 것으로 보임. 요즘 디자인에서는 무언가 독창적인 시도를 보여주는 게 훨씬 더 중요함
  그래픽 디자인이 단지 프로그램 숙련도로만 평가받거나, 멋진 것을 그리는 기술 정도로만 여겨지지만, 사실은 제약과 대상, 감정 등 메시지를 시각적으로 설계하는 커뮤니케이션임
  편법은 없으니 이미 해온 디자인을 연구하고 컬러, 레이아웃, 타이포그래피, 이미지로 자기가 무엇을 보여주고 싶은지 연습해야 함
  직접 그리기도 해보고, 제너레이티브 AI는 스스로 능숙해지기 전까지 피하는 게 좋음
  지금 단계에서는 포트폴리오로서 기억에 남을 만큼 아쉽고, 더 많은 연습이 필요함
  그래도 일단 완성해서 HN 상위까지 올린 점은 대단히 칭찬할 만함, 이 기회가 턴어라운드가 되어 계속 무언가 만들어가길 바람
- ‘면접에서 궁금한 부분이 있어 조건부로 뽑을 수는 있다’는 점에서 이 사이트는 포트폴리오의 역할을 다했다고 봄
  포트폴리오는 누군가로 하여금 ‘이 사람을 한 번 만나보고 싶다’는 호기심을 유발하는 용도면 충분함
  결과적으로 ‘첫 문을 두드리는 역할’인 것임, 이 자체로 일자리를 얻으려는 목적은 아님
- 사실 그래픽 디자인은 예술이 아님
  텍스트, 이미지, 레이아웃을 전략적으로 써서 정보를 시각적으로 효과적으로 전달하는 커뮤니케이션 방식임
  독창성이 중요한 건 브랜딩이나 저작권 이슈, 혹은 기존 문화를 무작정 갖다 쓸 때 정도임
  더 중요한 질문은 "왜 Windows XP를 통해 당신과 당신의 포트폴리오를 보여주려 하는가?"임
  내게 느껴지는 건 기술적 역량 정도임
  아마 의도는 기술업계 의뢰자(특히 프리랜서)를 겨냥해 향수를 자극하기 위한 것일 듯
  나는 아트디렉터라면 인터뷰로 부르지는 않겠지만, 아마 아트디렉터를 위한 포트폴리오는 아니었을 것
  그리고 ‘이건 나도 만들 수 있다’는 이야기는 디자인 작업에서 흔히 듣는 소리임
  구현은 사실 디자인에서 가장 쉬운 파트임, 이 포트폴리오는 XP보다 더 좋아 보여야 하는 게 당연하고, 그런 점이 실력임
  디자이너를 채용할 때는 XP의 어색함을 얼마나 정확하게 재현했는지에는 관심이 없음
  개발자라면 이런 걸 구현할 수 있는 게 당연하니 놀랍지 않음
  오히려 개발자가 좋은 타이포그래피나 레이아웃을 신경 쓸 때 더 감탄함. 실제로 가장 어려운 건 화면에 담기는 요소와 정보 구조를 결정하는 과정임
  무엇을 담을지, 어떻게 구조화할지가 성공의 핵심임
- 나는 이 사람을 채용하고 싶음
  경쟁자와 차별화될 만큼 근성, 끈기, 창의력이 풍부함
  HN 여러 천 명의 유저, 그들의 친구들, 테크 저널리스트 등 수많은 사람들이 이 작품을 즐겼고, 앞으로도 더 많은 사람들이 알게 될 것임
  요즘 일자리 잡는 게 쉽지 않은데, 이런 스타일을 보여주면 제안은 반드시 쏟아질 것임
  참고로 내 포트폴리오도 곧 업그레이드해야 하는데, 이걸 보고 영감 받아 나도 도전하고 싶어짐
‘디테일에 신경 쓴 XP 스타일의 커스텀 포트폴리오’라 소개한 것 보고 몇 가지 상세한 지적을 하고 싶음
- 로그인 화면의 ‘Welcome’은 소문자가 맞음
- 풍선 알림 위치가 높고, 닫기 버튼은 풍선 제목만큼 크게 만들어야 함
- Firefox에서 About Me에 스크롤바가 없음
- Social Links 그라데이션이 잘못됨
- 시작 메뉴에 그림자 효과 필요
- My Projects의 두 타일이 계속 로딩 중
- 최대화 불가 창도 최소화/닫기/최대화 세 버튼 다 있어야 하고, 가운데 버튼은 비활성화
- Paint에 Windows 로고가 모서리에 있지 않았고, JSPaint 메뉴바를 보여주는 게 Undo 등 설명에 더 적합함. JSPaint 제작자도 크레딧 필요
- Git Co-pilot은 존재하지 않음, Git은 GitHub와 같지 않음
  만약 본인이 이런 걸 만든다면, 부트와 로그인 화면은 생략할 듯. 특히 클라이언트가 'About Me'를 쉽게 찾을 수 있도록 시작시 바로 보여주는 편이 좋음
- 타이틀바 왼쪽 상단 아이콘을 더블클릭하면 창이 닫혀야 함. 타이틀바 본문을 클릭할 때와 달리 최대화가 아니라 닫기로 동작함이 원래 모습임
- 부트와 로그인 화면이 전체 재현의 매력에 한몫을 한다고 봄
  이런 세세한 디테일과 사용자 몰입감이 GUI 프로젝트에서 정말 중요한 포인트임
실제 Windows XP보다 더 부드럽게 느껴짐
설명하기 어렵지만 분명 UX/UI 측면에서 끌리는 매력이 있음
브라우저 탭의 계층 구조와도 자연스럽게 어우러지는 점이 흥미로움
별도의 영역감을 만드는 시작 화면, 로그인, 사운드 덕분에 "여기만의 공간"에 진입한 느낌을 잘 줄 수 있음
- Windows든 뭐든, 빠르면 훨씬 멋지게 느껴짐
  20ms 내에 동작해야 딜레이를 못 느끼게 되고 쾌적함
- 완전히 동의함
  macOS 26 베타를 사용 중이지만 이 Windows XP 클론이 오히려 업그레이드처럼 느껴짐
  이유는 심플하고 빠르며 사용법을 이미 다 알고 있기 때문임
  올드 윈도우는 싱글 코어라 멀티태스킹이 약한데, 오히려 그 덕에 집중에 효과적임
  최신 OS에서는 수십 개 윈도우와 수백 탭을 여러 워크스페이스, 모니터로 분산해서 쓰니 정신이 없다 느껴짐
- 향수가 주요 요인이지만, 로그인 사운드에서 뭔가 더 끌림
  로그아웃도 눌러봤는지 궁금함
- UI 상호작용 속도가 매우 빠름
  현대식 UI는 일부 전환만 빠르고 전체적으로는 반응이 느려서 어색하게 느껴지는 경우가 많음
솔직히 흥미롭긴 한데, 접근 방식이 뭔가 잘못된 느낌임
포트폴리오의 ‘그래픽 디자이너’라는 소개를 보고 들어갔더니, 사실상 옛날 남의 디자인을 단순 복제하는 느낌임
로그인 화면의 AI 이미지, 마우스오버로 이상하게 움직이는 아이콘도 눈에 띔
Windows XP에서도 이런 효과는 기억에 없어서 이상한 버그인지 헷갈림
이쯤에서 신뢰도가 떨어지기 시작함
‘그래픽 디자이너’임에도 AI로 생성한 그래픽을 쓰고, 비슷한 방식으로 코드 작성도 맡겼나 의문이 들었음
이력서를 가짜 PDF 파일로 보여주는 방식도 답답하게 느껴짐
여러 프로젝트도 작은 창에 갇혀서 제대로 보기 어렵고, 두 개는 로딩 애니메이션만 보여줌
처음에 코딩 경험이 없었고 AI 에이전트 도움을 받았으며 “모든 결정은 인간이 했다”고 했지만, 코드를 스스로 짤 실력이 없는 상태라면 실질적 결정권이 LLM에 더 많지 않았을까 싶음
스스로 이 프로젝트를 처음부터 다시 만들 수 있다고 확신하는지도 궁금함
흥미롭고 쿨한 프로젝트지만, 사실상 포트폴리오로서는 본인 실력을 과소평가하게 만드는 결과 같아 아쉬움
또, 이미 이런 유사 사례가 많음 win32.run
예전에 이걸 올리려고 했는데, 실패해서 아쉬웠음
지금 여러분이 즐기는 걸 보니 기쁨
HN은 새로 가입했으니 나도 이제 카르마 좀 얻고 싶음
- (운영자임)
  원래 올리셨던 Show HN 글을 다시 올렸고, 댓글도 합쳐놓았음
  스팸 필터에 걸릴 걱정 없도록 계정도 정상 계정으로 표기해드림
- 마감 아주 멋짐! XP 감성과 그 시대의 정신까지 정말 잘 표현해냈다고 생각함
  만약 Windows XP에 정말 프로페셔널한 ‘포트폴리오 생성기’ 앱이 있었고, 그 결과물이 이 정도 퀄리티였다면 다들 엄청나고 아름다운 제품이라 인정했을 듯
  본인 실력을 보여주는 동시에 Windows XP의 아름다움도 현대적으로, 그리고 역사적으로 재현한 훌륭한 작업임
- 너무 잘 만들었음! 굉장한 작품임
- 내 브라우저(Chrome 138, Windows 10)에서는 시작 메뉴가 몇 초 있다가 짧게 나타났다가 바로 사라짐
- 진짜 완성도가 높음, 정말 훌륭한 결과임
XP 유저로서 이 작업이 정말 마음에 듦
약간만 집요하게 지적하자면
- 작업 표시줄 탭이 실제 XP와는 아주 약간 다름(아마도 테두리?)
- 닫기/최대화/최소화 버튼에 호버 효과가 없음
- 데스크탑 아이콘도 기본적으로 호버 이펙트 없었음
- XP 마우스 커서를 재현하지 않은 점 의외임
- IE6의 경우:
  - 주소창에 진행 상태가 나타나지 않았음
  - 툴바 버튼에도 호버 전환 효과가 없었음
- 나는 이걸 오마주, 즉 고전 Windows XP 미학을 당대의 새로운 표현과 섞어 세련되게 업그레이드한 사례로 봄
  이렇게 예술과 스타일을 최신 방식으로 재해석, 계승하며 뿌리를 존중하는 것이 미적 감수성 진화의 흔한 방식임
- 작업 표시줄 탭 - 맞는 지적이고 엄청난 시간을 투자해 이 부분을 맞추려고 했음
  결국 약간 차이는 있지만 거의 비슷하게 구현했다고 생각함
  나머지 부분들은 의도적인 미학적 판단임. 사실 큰 차이 중 하나는 아무도 말하지 않은 것 같음
  데스크탑 아이콘을 드래그 셀렉션하면 XP보다 Windows 11에 더 가까운 식으로 하이라이트됨
  이 부분은 앞으로 더 개선하고 싶었음
이 작업 정말 멋지지만, 두 가지 점에서 아쉬움이 있음
첫째는 뭔가 ‘컴퓨터’같은 느낌이 완전히 살아있지 않음. 예를 들어 커맨드라인에서 "dir"을 입력했을 때 뭔가 재미난 상호작용이 추가됐다면 더 흥미로웠을 것임
둘째는 포트폴리오 내 컨텐츠 퀄리티가 이 웹사이트의 느낌을 못 따라감. 사이트는 매우 고퀄이지만, 거기서 본인의 다른 작업을 보면 너무 단순하고 허전한 느낌임
결과적으로 좋은 프로젝트이긴 함
정말 멋진 작업임
볼 때마다 Windows XP의 스타일링을 그리워하게 됨
XP는 유일하게 '재미'를 추구하려 했던 윈도우였고, 검색 결과에 강아지 마스코트가 있을 정도로 위트가 있었음
바닥의 작업표시줄도 Fisher Price 장난감 같고, Clippy도 그리움
예전에 전문가용 소프트웨어가 이렇게 유쾌함이 허용되었던 시절이 아쉬움
덧붙여서, 본인 아바타 스타일이 Simpsons나 Bob's Burgers 느낌이 나서 인상적임
- 가끔 짜증나는 순간도 있었지만, 거의 2006년 시절로 돌아간 듯한 즐거운 경험이었음
인상적인 작품이지만, 더 깊은 고민이 필요하다는 생각이 듦
복제와 창작 사이에는 근본적인 긴장이 존재함
물론 많은 창작물이 기존의 틀에서 출발함. 예를 들면 추리소설에는 시체, 술병, 재치있는 대사 등이 공식처럼 있긴 함. 하지만 그 틀을 자신만의 방식으로 재해석하느냐가 진짜 예술임
AI에게 스토리 라인을 맡길 수는 있지만, 선택, 목소리, 마찰 등 진짜 ‘존재감’과 영혼은 사람이 더해야 함
여기서는 그 ‘존재감’이 부족하다는 느낌임
프로젝트는 잘 만들어졌지만, 그냥 Windows XP 같고, 보기 좋지만 평면적임
원작자의 노력과 학습 과정을 존중하지만 결국 ‘복제’처럼 느껴짐
만약 내가 주인공이라면, 이게 첫걸음이라 생각함. ‘카피를 끝냈으니, 이제 뭘 개선할 수 있을까? 어떤 부분을 변화시키고, 위험을 감수할 수 있을까? 비포&애프터를 비교해 보여줄 수 있지 않을까?’
진짜 관건은 왜 모조품에서 멈추는가, 더 나아가 복제의 한계를 넘어 개선, 확장, 자신의 것으로 만들어 볼 수 있지 않을까?
AI와 협업할 때 무한한 템플릿과 빠른 반복에서 어떻게 나만의 차별화 포인트, 혹은 ‘영혼’을 보여줄 수 있을지 진지하게 고민해볼 문제임
(참고로 이 글도 Grammarly로 문장을 점검함, “남자는 자신의 한계를 알아야 한다”라는 유명한 대사가 생각남)
- 이렇게 명확한 복제 프로젝트는 포트폴리오에서 다른 차원의 깊이와 함께 추가하면 좋다고 생각함
  하나는 확장된 대규모 프로젝트, 하나는 기억에 남는 깔끔한 복제 프로젝트, 이 둘 조합이 여러 포트폴리오를 빠르게 훑어보는 사람에게는 더 매력적으로 다가갈 수 있음
  그렇지만 결국 포트폴리오가 균형 있게 다양화될 필요는 있다는 데 동의함
아주 마음에 듦
간단한 XP 오류 몇 가지를 집요하게 지적하자면
- 작업표시줄 탭이 약간 다르고, 창 역시 가장자리에 미묘한 차이가 있음
- 닫기/최대화/최소화 버튼에는 호버 트랜지션이 없음
- 기본적으로 데스크톱 아이콘은 호버 효과가 없음
- XP 마우스 커서를 재현하지 않은 점이 의외임
- IE6에서:
  - 주소창에 프로그레스 바가 없음
  - 툴바 버튼에도 호버 트랜지션 효과 없음
멋진 오마주 혹은 고전 스타일의 현대적 해석으로 봄
클래식 미학을 최신 감각과 결합해 새롭게 선보이면서도 뿌리를 잃지 않는 정통성의 진화 과정임
작업표시줄 탭 - 맞는 지적이고, 정말 시간을 많이 들였지만 완전히 동일하게 나오진 않아 어느 정도 포기함
나머지는 모두 미적 판단임. 사실 아무도 얘기하지 않은 부분이 하나 있는데, 데스크탑 아이콘을 드래그 셀렉션할 때 XP보다 Windows 11 스타일에 훨씬 가까움
개인적으로 이것도 변화가 필요하다고 생각했음
매우 멋진 작품이지만, 진짜 ‘컴퓨터 같다’는 느낌이 다소 부족함
예를 들어 명령줄에 ‘dir’을 입력하면 나오는 소소한 상호작용이 있었으면 훨씬 재미있었을 것임
두 번째는 포트폴리오의 컨텐츠 퀄리티가 너무 단순해서 사이트 퀄리티와 어울리지 않음
전체적으로 좋은 프로젝트이긴 함
정말 멋진 작업임
볼 때마다 Windows XP 시절 스타일이 그리워짐
XP는 유일하게 ‘재미’를 추구했던 윈도우였고, 귀여운 개 마스코트와 Fisher Price 장난감 같은 작업표시줄, Clippy 등 위트가 살아 있었음
전문가용 프로그램이 이렇게 유쾌하던 시절이 아쉬움
그리고 아바타가 Simpsons/Bob's Burgers 스타일이라 인상적임
- 어쩌면 짜증났던 부분도 있지만, 2006년으로 돌아간 듯한 재미를 느꼈음
이 프로젝트 정말 멋짐
본인 스킬, 학습 능력, 집요함, 디테일한 부분까지 잘 보여줌
복제나 세부 사항 미스에 대해서 비판하는 사람들과 달리, 나는 그런 게 중요한 포인트가 아니라고 생각함
멋진 프로젝트임, 축하함

답변달기