본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

혹시 인터넷 초창기의 분위기가 그리워질 때가 있나요?

느린 다이얼업 연결, 아스키(ASCII)아트, 그리고 디더링(dithered) 이미지 같은 요소들은 이제는 아득한 추억처럼 느껴질지 모르지만, 어떤 이들에게는 여전히 특별한 의미로 남아 있습니다.

Monika Michalczyk는 오래된 인터넷에 대한 애정을 한 단계 더 끌어올려, Framer로 Macintosh Classic 감성의 개인 웹사이트를 제작했습니다. 이번 블로그 글에서는 이 복고풍 디자인을 완성하기까지의 과정과 활용한 도구들을 소개해 드리겠습니다.

Framer로 Macintosh Classic 감성 만들기

레트로 디자인에서 빠질 수 없는 것이 바로 ASCII 아트와 디더링 효과입니다.
특히 Alex Harris가 만든 Ditherit이라는 이미지 디더링 툴은 정말 유용합니다. 이 도구를 활용하면 이미지를 손쉽게 올드스쿨 스타일로 변환할 수 있어요. 이런 효과들은 디자인에 레트로한 느낌을 더하고, 90년대 인터넷 감성을 그대로 불러오게 해줍니다.

Framer의 드래그 효과를 사용하면 데스크톱 컴퓨터처럼 페이지에서 아이콘과 창을 이동할 수 있습니다. '효과' → '드래그 '로 이동해서 원하는 대로 설정을 조정해보세요.

모바일 기기를 위한 디자인

데스크톱에 최적화된 Macintosh Classic디자인은 작은 모바일 화면에서는 불편할 수 있습니다.
하지만 Framer에서는 브레이크포인트 기능을 활용해 모바일 전용 레이아웃을 쉽게 만들 수 있어요.

Framer에서 컴포넌트 사용하기

디자인을 더욱 역동적으로 만들기 위해 Framer의 컴포넌트를 사용하여 여러 파일 형식을 만들고 각 파일의 이름을 수정했기 때문에, 각 요소를 직접 업데이트하지 않고도 디자인을 빠르고 쉽게 변경할 수 있습니다.

마무리

Framer를 활용하면 단순히 옛날 느낌을 흉내 내는 것이 아니라, 실제로 사용 가능한 레트로 웹사이트를 만들 수 있습니다. Drag, Breakpoints, Components 같은 기능들을 적절히 조합하면, 추억과 실용성을 동시에 챙길 수 있죠.

여러분이라면 이 클래식 매킨토시 감성을 어떤 페이지에 적용해 보고 싶으신가요?

본 글은 Framer 공식 블로그의 ‘Recreating the classic Macintosh vibe in Framer’를 번역·각색한 콘텐츠입니다.