전체 글 149

웹플로우 컴포넌트 슬롯 기본값 | 마케터에게 넘기기 전 설정 순서

웹플로우(Webflow) 컴포넌트 슬롯 기본값(slot defaults)은 메인 컴포넌트의 슬롯에 버튼 같은 컴포넌트를 미리 넣어 두면, 그 컴포넌트를 페이지에 새로 넣을 때마다 같은 내용이 채워진 상태로 나오게 하는 기능이다. 웹플로우는 2026년 10월 23일 업데이트 노트에서 이 기능을 모든 플랜에 공개했고, 8월 28일에 먼저 나온 ‘슬롯 제한(허용 컴포넌트)’과 함께 쓰면 디자이너가 만든 컴포넌트 시스템을 마케터에게 넘길 때 “여기에는 무엇을 넣어야 하는지”를 화면 안에서 알려 줄 수 있다.웹플로우가 2026년 10월 23일 업데이트 노트에 실은 슬롯 기본값 화면. 슬롯의 Property settings 창 Default 구역에 Button이 들어 있고, 오른쪽 카드의 Slot 자리에는 Cont..

Design Posts 2026.11.09

토트넘 어웨이 유니폼 콜라보 | 기존 템플릿에 아티스트를 초대하는 기준

토트넘 홋스퍼가 2026/27 시즌 어웨이 유니폼을 다시 내놓으면서 로고나 스폰서를 바꾼 게 아니라 아티스트 한 명을 초대했다. 영국-나이지리아계 디자이너 인카 일로리(Yinka Ilori MBE)가 참여한 이번 협업에서 실제로 바뀐 자리는 앞면과 뒷면, 딱 두 곳뿐이다. 나머지는 나이키가 만든 기존 어웨이 템플릿 그대로다.이 글은 토트넘 공식 발표와 샵 공식 제품 이미지를 근거로 실제로 무엇이 바뀌었는지를 확인하고, 일로리가 브라반티아·던엠 같은 기존 브랜드 제품에서도 반복해 온 작업 방식을 비교한다. 이를 바탕으로 브랜드가 이미 완성된 제품에 외부 아티스트를 들일 때 무엇을 맡기고 무엇을 지키는지 판단하는 체크 프레임을 제시한다.사진: Tottenham Hotspur 공식 스토어(shop.totten..

Design Posts 2026.11.09

피그마 배경 제거 방법 | 클릭 선택·지우기·AI 크레딧 계산까지

피그마에서 이미지 배경을 지우려면 이미지를 선택한 뒤 아래 보조 도구 모음의 Remove background를 누르면 된다. 사진 속 물건 하나만 꺼내거나 지우고 싶다면 같은 도구 모음의 Select area로 영역을 잡고 Isolate(분리) 또는 Erase(지우기)를 고른다. 2026년 11월 6일부터는 macOS 데스크톱 앱에서 물체를 클릭만 해도 피그마가 영역을 잡아 준다.피그마 공식 도움말의 이미지 편집 도구 모음 화면. 이미지를 선택하면 기본 도구 모음 위에 Crop, Select area, Remove background, Edit with prompt, More가 한 줄로 뜬다. 이 글의 모든 단계는 이 줄에서 시작한다. 출처: Figma 도움말 - Generate and edit imag..

Figma 2026.11.09

캔바 브러시(Canva Brush) | 기존 디자인 수정 맡기는 법과 검수 기준

캔바 브러시(Canva Brush)는 이미 만든 캔바 디자인을 말로 고쳐 주는 캔바의 자체 AI 모델이고, 2026년 10월 30일 발표 이후 Canva Pro 구독자에게 Canva AI 안에서 먼저 제공되고 있다. 캔바는 브러시의 국가별 제공 여부나 한국어 프롬프트 지원을 따로 밝히지 않았으므로, 한국의 Pro 사용자는 Canva AI 화면에서 직접 확인해야 한다. 그래서 지금 확실하게 말할 수 있는 것은 ‘Pro 구독자 대상으로 순차 제공 중, 그 밖의 요금제는 추후 확대 예정’까지다.캔바 뉴스룸의 브러시 발표 배너. 캔바 로고 둘레에 정렬, 텍스트 크기, 색상, 선택 상자, 페이지 추가 같은 편집 도구 아이콘을 격자 위에 배치했다. 새 그림을 그리는 도구가 아니라 이미 있는 디자인의 요소를 고치는 ..

IT·AI 가이드 2026.11.09

프레이머 로컬라이제이션 콘텐츠 패널 | 홈부터 단계적으로 번역하는 순서

프레이머(Framer) 로컬라이제이션에 새로 생긴 콘텐츠 패널(Content panel)은 언어별로 페이지·CMS 컬렉션·컴포넌트를 ‘번역해서 포함’, ‘번역하지 않고 유지’, ‘이 언어에서 숨김’ 세 가지 중 하나로 정하는 화면이다. 프레이머는 2026년 11월 2일 업데이트 노트에서 이 패널과 함께, 새 언어를 추가할 때 모든 콘텐츠를 기본 포함할지 번역하지 않은 상태로 둘지 고르는 옵트인 방식을 공개했다. 덕분에 사이트 전체를 한 번에 번역하지 않고 홈페이지부터 조금씩 다국어로 여는 작업이 가능해졌다.프레이머가 2026년 11월 2일 업데이트 노트에 실은 콘텐츠 패널 이미지. Dutch 로케일의 Home 페이지 메뉴에 세 선택지가 열려 있고, 각각 아래에 ‘번역된 콘텐츠 표시’, ‘대체 언어로 표시..

Design Posts 2026.11.08

어도비 가격 인상 2026 | 내 갱신일 확인과 싸게 쓰는 플랜 선택법

어도비는 2026년 8월부터 한국을 포함한 9개 나라에서 환율을 이유로 Creative Cloud와 Document Cloud 가격을 순차 조정하고 있다. 이미 구독 중이라면 연간 플랜은 약정 기간이 끝나는 시점부터, 월간 구독은 다음 결제일부터 새 가격이 청구된다. 2026년 11월 8일 한국 공식 가격 페이지 기준으로 Creative Cloud 모든 앱은 월 87,900원(연간 약정, 매월 결제, 부가세 포함), 포토샵 단일 앱은 월 34,900원이다.어도비 한국어 도움말 ‘Adobe 환율 변경’ 화면. 마지막 업데이트 날짜(2026년 10월 2일), 대한민국이 포함된 9개국 목록, 8월부터 순차 적용과 연간 플랜 적용 시점이 한 화면에 있다. 2026년 11월 8일 직접 캡처. 출처: Adobe 도..

Design Posts 2026.11.08

피그마 산리오 콜라보 | 캐릭터 12개를 고른 제품 디자인 기준

업무용 협업 툴에 캐릭터를 넣자는 제안은 떠올리기는 쉬워도, 실제로 구현까지 이어지는 경우는 흔치 않다. '재미있을 것 같다'는 감각과 '실제로 작동하는 기능'은 다른 영역이기 때문이다. 그런데 Figma는 2026년 11월, 산리오(Sanrio)의 450개가 넘는 캐릭터 중 12개를 골라 FigJam 안에 들여놓았다. 피그마 산리오 콜라보는 '캐릭터를 넣는다'는 결정 자체보다, 그 결정을 구체적인 제품으로 옮긴 선택들이 더 흥미로운 사례다.Figma는 2026년 11월 2일 공식 블로그를 통해 산리오와의 협업을 발표했다. 이 글은 그 발표문과, 제작 과정을 상세히 설명한 두 번째 공식 글을 확인해, 협업 툴에 캐릭터 요소를 넣을 때 실제로 결정해야 하는 것들을 정리한다. 이 캠페인을 직접 사용해 본 결..

Design Posts 2026.11.08

뉴캐슬 유나이티드 엠블럼 리뉴얼 | 투표로 결정한 브랜드 교체 과정

로고를 바꿀지 말지는 보통 경영진이나 브랜드 에이전시가 결정한다. 그런데 잉글랜드 프리미어리그의 뉴캐슬 유나이티드는 이 결정을 다르게 내렸다. 세 가지 후보를 독립 기관이 운영하는 투표에 부쳐, 2만 7천여 명의 서포터가 직접 고르게 한 것이다. 뉴캐슬 유나이티드 엠블럼 리뉴얼은 디자인 결과물 자체보다, 그 결과물에 도달한 의사결정 구조가 더 눈에 띄는 사례다.구단은 2026년 10월 1일 공식 뉴스룸을 통해 새 엠블럼을 공개했다. 이 글은 그 공식 발표문과 구단이 함께 공개한 상세 설명·지원센터 문서를 확인해, 38년 만의 교체 과정에서 무엇을 묻고 무엇을 지켰는지 정리한다. 이 팀의 팬이거나 실제 투표에 참여한 입장에서 쓴 글은 아니며, 마지막의 동호회 적용 사례는 설명을 위한 가정이다.30초 요약·..

Design Posts 2026.11.07

웹플로우 Box 요소 사용법 | 태그 선택자까지 설정하는 순서

웹플로우 Box는 Div Block, Section, Container, Grid 같은 구조 요소를 하나로 대신하는 새 요소다. Add 패널에서 Box를 넣고 Settings 패널에서 태그를, Style 패널에서 Display를 고르면 된다.Designer의 Add 패널. Structure 구역 첫 칸이 Box이고 옆에 Quick Stack과 Page Slot만 남았다. 출처: Webflow Updates - Box element and expanded tag selectors, 권리자 Webflow, Inc. 별도 재게시 허가는 확인하지 못했고 제품 설명을 위해 인용했다.웹플로우에서 빈 영역을 하나 만들려고 해도 Div Block, Section, Container, V Flex 중 무엇을 꺼낼지 먼저..

Design Posts 2026.11.07

피그마 코드 레이어 사용법 | 프레임을 실제 작동 화면으로 바꾸는 순서

피그마 코드 레이어는 캔버스 위 프레임을 실제로 작동하는 코드 화면으로 바꾸는 오픈 베타 기능이다. 프레임을 고르고 툴바의 Code(단축키 B)를 누른 뒤 Build selection을 누르면 변환이 시작된다.코드 레이어(왼쪽)와 그 화면의 코드(오른쪽). 시안 옆에서 실제로 실행되는 코드가 이 기능의 핵심이다. 출처: Figma 블로그 - 캔버스에서 코드 레이어와 함께 디자인 진행, 권리자 Figma, Inc. 별도 재게시 허가는 확인하지 못했고 제품 설명을 위해 인용했다.피그마에서 만든 프로토타입으로는 확인하기 어려운 순간이 있다. 입력값에 따라 달라지는 화면, 로딩과 오류 상태, 여러 단계가 얽힌 흐름이 그렇다. 2026년 10월 15일 오픈 베타로 풀린 피그마 코드 레이어(code layers)는..

Figma 2026.11.07
728x90