responsive-web-design

2 개의 포스트

figma

Config 2025의 비 (새 탭에서 열림)

Figma는 Config 2025의 브랜드를 고정된 스타일이 아니라 다양한 매체와 상황에 유연하게 적용되는 시각 시스템으로 설계했다. 기본 도형에서 출발한 애니메이션 글리프와 컴포넌트 라이브러리를 활용해 컨퍼런스의 주제인 창작, 표현, 변화, 적응성을 표현했다. 그 결과 무대 화면부터 공간 장식, 소셜 콘텐츠, 배지와 굿즈까지 일관되면서도 확장 가능한 몰입형 경험을 구축했다. ## 대규모 행사를 위한 유연한 브랜드 시스템 - Config는 샌프란시스코와 런던에서 1만 명 이상이 참석하고, 온라인으로 수만 명이 시청하는 대형 사용자 컨퍼런스다. - Brand Studio 팀은 행사 시작 약 10개월 전부터 시각 아이덴티티 개발에 착수했다. - 브랜드 작업 범위는 다음과 같이 넓었다. - 메인 스테이지 화면 - 디지털 콘텐츠와 소셜 미디어 - 행사장 공간 경험 - 참석자 배지 - 굿즈와 각종 인쇄물 - 행사가 진행되며 요구사항과 제약이 달라질 수 있으므로, 처음부터 여러 환경에 대응할 수 있는 시스템을 만드는 것이 중요했다. ## 기본 도형에서 출발한 글리프 콘셉트 - Figma 브랜드의 핵심인 형태, 글리프, 프리미티브를 Config의 시각 언어로 확장했다. - 초기 단계에서는 무드보드나 구체적인 스타일보다 콘셉트 자체를 먼저 탐색했다. - 실행 방식을 지나치게 일찍 제한하면 결과물이 뻔하고 평면적으로 보일 수 있기 때문에, 콘셉트는 명확히 하되 표현 방식은 열어두었다. - 시각 콘셉트는 소셜 게시물, 대형 디지털 스크린, 실제 공간 설치물 등 서로 다른 크기와 매체에 적용될 수 있어야 했다. ## ‘늘어나고 흔들리는’ 글리프의 구조 - 각 글리프는 내부 요소와 외부 요소로 구성되며, 두 요소가 서로 반응하도록 설계됐다. - 글리프와 구성 요소의 변화는 창작 과정에서 나타나는 역동성, 변화, 적응성을 상징한다. - 정적인 그래픽에 그치지 않고 움직임을 통해 시각적 에너지를 강화했다. - 하나의 글리프가 움직이면 주변에 파동을 일으킨다. - 파동은 전체 구성을 변화시키며 연쇄적인 움직임을 만든다. - 이 구조 덕분에 같은 시각 언어를 사용하면서도 각 화면과 공간에서 서로 다른 조합과 움직임을 구현할 수 있었다. ## 컴포넌트 기반의 협업과 확장 - 팀은 Figma 안에서 글리프 라이브러리를 만들었다. - 글리프를 컴포넌트로 제작해 파트너와 외부 제작업체가 쉽게 재사용하고 수정할 수 있도록 했다. - 컴포넌트 기반 시스템의 장점은 다음과 같다. - 여러 표면과 매체에 빠르게 적용 가능 - 구성 요소를 교체하거나 커스터마이즈하기 쉬움 - 행사 전체의 시각적 일관성 유지 - 새로운 요구사항이 생겨도 기존 시스템 안에서 대응 가능 ## 제품 출시와 연결된 창작의 메시지 - Config 2025에서는 Figma Draw와 Figma Sites 등 사용자의 창의적 표현을 확장하는 제품 출시가 예정되어 있었다. - 이에 따라 시각 콘셉트도 단순한 장식보다 “더 자유롭고 예상 밖의 방식으로 자신을 표현한다”는 메시지에 초점을 맞췄다. - 글리프의 유기적인 움직임과 다양한 조합은 제품이 사용자의 창작 가능성을 넓힌다는 의미와 연결됐다. ## 새 Figma 브랜드 요소의 적용 - Config 2025는 Figma가 최근 진행한 브랜드 리프레시의 색상 체계와 새 서체인 Figma Sans를 활용할 수 있는 시점에 진행됐다. - 기존 브랜드 요소를 그대로 복사한 것이 아니라 Config의 행사 목적과 분위기에 맞게 변형해 사용했다. - 이를 통해 Config만의 표현력을 확보하면서도 Figma 전체 브랜드와의 연결성을 유지했다. Config처럼 규모가 크고 여러 채널에서 동시에 운영되는 행사는 처음부터 완성된 이미지 하나를 만드는 것보다, 재조합과 변형이 가능한 디자인 시스템을 구축하는 편이 효과적이다. 명확한 콘셉트, 컴포넌트화된 자산, 애니메이션 규칙을 함께 설계하면 행사 규모가 커져도 일관성과 창의성을 동시에 유지할 수 있다.

figma

Figma Sites로 웹 (새 탭에서 열림)

Figma Sites는 Figma 안에서 웹사이트를 디자인하고, 반응형 동작과 인터랙션을 적용한 뒤 바로 게시할 수 있는 올인원 도구다. 기존의 디자인·프로토타이핑·개발·배포로 이어지는 선형 작업을 하나의 반복적인 흐름으로 통합해, 개발 도구나 별도 협업 과정 없이 실제 웹사이트를 제작하도록 돕는다. 템플릿과 디자인 시스템 연동, 반응형 레이아웃, 다양한 애니메이션 기능을 통해 디자이너와 소규모 팀도 표현력 있는 사이트를 만들 수 있다. ## 디자인부터 게시까지 하나의 작업 흐름 - 기존 웹 제작은 Figma에서 디자인한 뒤 프로토타입을 만들고, 브레이크포인트를 설정하며, 디자인을 코드로 변환하고 테스트·배포하는 수작업과 도구 전환이 필요했다. - Figma Sites에서는 Figma를 떠나지 않고 디자인, 인터랙션 구현, 반응형 조정, 웹 게시를 수행할 수 있다. - 포트폴리오, 이벤트 사이트, 제품 랜딩 페이지 등 다양한 목적의 실제 동작하는 웹사이트를 제작할 수 있다. - 템플릿, 반응형 웹 요소, 사전 제작된 인터랙션을 제공해 디자인·개발 인력이 제한적인 팀도 빠르게 시작할 수 있다. - 향후 Figma Make 기반의 채팅-투-코드 기능을 통해 원하는 애니메이션이나 인터랙션을 자연어로 설명하고 생성할 수 있게 될 예정이다. ## 템플릿과 디자인 시스템 연동 - Inserts 패널을 통해 게시된 디자인 라이브러리를 사이트에 연결할 수 있다. - 팀의 컴포넌트와 스타일을 재사용해 제작 속도와 일관성을 높일 수 있다. - 별도의 디자인 시스템이 없는 경우에도 내비게이션, 히어로 섹션, 전체 페이지 같은 기본 블록을 활용할 수 있다. - 디자인 시스템을 처음부터 구축하지 않아도 검증된 구성 요소를 조합해 사이트를 만들 수 있다. ## 다양한 화면에 대응하는 반응형 디자인 - 레이아웃, 텍스트, 디자인이 화면 크기와 브레이크포인트에 맞춰 자동으로 조정된다. - Multi-edit 기능으로 여러 화면 크기의 요소를 한 번에 수정할 수 있다. - 텍스트 스타일마다 브레이크포인트별 글자 크기와 간격을 설정할 수 있으며, 별도의 변수를 사용하지 않아도 된다. - 자동 조정 기능을 기반으로 하면서도 세부 요소는 수동으로 조정해 정교하게 다듬을 수 있다. - 미리보기 창의 크기를 바꾸면서 레이아웃 재배치와 브레이크포인트 전환을 확인할 수 있다. ## 웹사이트 수준의 프로토타이핑과 검수 - 협업자에게 인터랙티브한 라이브 웹사이트 미리보기를 공유하고 피드백을 받을 수 있다. - 미리보기는 HTML과 CSS로 렌더링되므로 일반적인 Figma 프로토타입보다 실제 게시 환경에 가까운 결과를 확인할 수 있다. - 반응형 동작뿐 아니라 웹사이트에 특화된 인터랙션도 게시 전에 테스트할 수 있다. ## 기본 제공되는 애니메이션과 인터랙션 - 마우스 패럴랙스: 커서 움직임에 따라 객체를 이동시킨다. - 라이트박스: 이미지를 강조하고 배경을 어둡게 처리한다. - 스핀: 객체를 무한 회전시킨다. - 드래그 가능 요소: 페이지 안의 요소를 자유롭게 이동시킨다. - 타자기 효과: 텍스트를 한 글자씩 표시한다. - 스크램블 텍스트: 문자를 무작위로 보여준 뒤 원래 텍스트를 드러낸다. - 마키, 리빌, 스크롤 패럴랙스 같은 사전 제작 효과도 제공된다. ## Figma Sites만의 확장 기능 - Figma Design에는 아직 없는 스크롤 패럴랙스와 스크롤 변환 기능을 지원한다. - 인터랙티브 컴포넌트를 별도로 만들지 않아도 호버 상태와 눌림 상태를 구현할 수 있다. - 향후 코드 레이어를 사용해 플러그인이나 외부 도구 없이 더 복잡한 인터랙션을 추가할 수 있다. - AI 채팅을 이용해 드래그 가능한 목록이나 실제 지리 정보를 반영한 시계처럼 복잡한 동작을 설명만으로 생성할 수 있게 될 예정이다. - 생성한 코드 레이어는 Figma Design의 라이브러리처럼 재사용·공유 가능한 컴포넌트와 인스턴스로 만들 수 있다. Figma Sites는 단순히 디자인을 웹으로 내보내는 기능보다, 디자인·반응형 구현·프로토타이핑·게시를 통합한 제작 환경에 가깝다. 빠르게 랜딩 페이지나 이벤트 사이트를 제작해야 하는 팀, 개발 리소스가 적은 디자이너에게 특히 유용하며, 복잡한 서비스 기능이나 세밀한 코드 제어가 필요한 경우에는 향후 코드 레이어 기능의 성숙도를 함께 확인하는 것이 좋다.