본문 바로가기

전체 글33

코드 화면을 다시 디자인 캔버스로 가져오는 법: Figma 변수 연결 업데이트 웹사이트를 만든 뒤 시간이 지나면 디자인 파일과 실제 화면 사이에 간격이 생깁니다. 색상과 글꼴, 간격이 코드에 흩어지고, 수정할 때마다 화면을 다시 그려야 하기 때문입니다.Figma가 2026년 7월 16일 공개한 업데이트는 이 간격을 줄이는 흐름을 보여줍니다. 코드로 만들어진 화면을 Figma 캔버스로 가져올 때 기존 파일의 변수와 오토 레이아웃을 연결해, ‘다시 그리기’보다 ‘검토하고 다듬기’에 집중할 수 있게 한 것입니다.## 무엇이 달라졌나Figma 공식 릴리스 노트에 따르면 다음 세 경로에서 가져온 화면이 대상입니다.- Figma Make 미리보기를 캔버스에 복사하기- Figma MCP 서버로 코드에서 디자인 생성하기- Chrome 확장 기능으로 실제 웹페이지를 편집 가능한 레이어로 캡처하기가.. 2026. 7. 18.

브랜드 웹사이트에 다크모드를 넣을 때 꼭 체크해야 할 7가지 보기 좋은 다크모드보다, 오래 보기 편한 다크모드가 더 중요하다몇 년 전까지만 해도 다크모드는 ‘있으면 멋져 보이는 옵션’ 정도로 받아들여졌다.특히 개발자 도구, 코드 에디터, SaaS 대시보드, 포트폴리오 사이트처럼 디지털 환경에 익숙한 사용자가 많은 서비스에서 다크모드는 하나의 취향이자 스타일처럼 여겨졌다. 하지만 2026년의 웹디자인 흐름에서 다크모드는 더 이상 단순한 취향의 문제가 아니다. 어떤 브랜드 웹사이트에서는 다크모드가 가독성, 몰입감, 사용 시간, 브랜드 인상까지 좌우하는 중요한 설계 요소가 되고 있다. 문제는 많은 사이트가 아직도 다크모드를 너무 단순하게 생각한다는 점이다.배경을 검정에 가깝게 바꾸고, 글자를 흰색으로 바꾸고, 버튼만 조금 밝게 조정하면 다크모드가 완성된다고 여기는 경우.. 2026. 7. 11.

2026 웹디자인 트렌드 총정리: AI 시대에 살아남는 웹사이트 디자인 8가지 한동안 웹디자인 트렌드는 “더 화려하게, 더 인터랙티브하게, 더 미래적으로” 흘러가는 것처럼 보였다.글래스모피즘, 메시 그라디언트, 과감한 애니메이션, 3D 요소, AI가 만든 듯한 SaaS 스타일 레이아웃까지. 실제로 이런 요소들은 여전히 2026년 웹디자인의 중요한 레퍼런스이기도 하다. 하지만 올해의 분위기를 조금 더 자세히 들여다보면, 단순히 시각적으로 화려한 웹사이트가 좋은 웹사이트로 평가받는 시대는 지나가고 있다. 오히려 지금은 반대다. “AI로도 쉽게 그럴듯하게 만들 수 있는 디자인”이 넘쳐나면서, 사용자와 브랜드 모두 조금씩 피로를 느끼기 시작했다. 예쁜데 다 비슷해 보이고, 화려한데 정작 읽기 어렵고, 움직이는데 무엇을 클릭해야 하는지는 잘 보이지 않는 웹사이트들이 빠르게 늘어났기 때문이다.. 2026. 7. 10.

mysql 에서 테이블 복사하는 방법 MySQL에서 테이블을 복사하는 방법은 여러 가지가 있으며, 목적에 따라 적절한 방법을 선택할 수 있습니다.아래는 데이터를 포함하거나 포함하지 않고 테이블을 복사하는 몇 가지 방법입니다.1. 테이블 구조만 복사CREATE TABLE new_table LIKE original_table;설명: original_table의 구조를 복사하여 new_table을 생성합니다. 데이터는 복사되지 않습니다.2. 테이블 구조 및 데이터 복사CREATE TABLE new_table AS SELECT * FROM original_table;설명: original_table의 구조와 데이터를 모두 복사하여 new_table을 생성합니다. 그러나 인덱스와 트리거는 복사되지 않습니다.3. 테이블 구조 복사 후 데이터 삽입CRE.. 2025. 1. 9.

mysql 에서 제품 이름으로 url slug 생성하기 MySQL에서는 내장 함수만으로 슬러그를 생성하기 어려울 수 있으므로, 이를 위한 사용자 정의 함수를 작성할 수 있습니다.아래와 같이 별도의 함수를 프롬프트에서 선언한 후 사용할 수 있습니다. 슬러그 생성용 함수 만들기 DELIMITER //CREATE FUNCTION generate_slug(str VARCHAR(255)) RETURNS VARCHAR(255)DETERMINISTICBEGIN DECLARE result VARCHAR(255); -- 공백을 하이픈으로 변경 SET result = REPLACE(str, ' ', '-'); -- 모든 문자를 소문자로 변환 SET result = LOWER(result); -- 알파벳과 숫자, 하이픈만 남기고 제거 SET.. 2025. 1. 9.

HTML, CSS 무한 롤링, 흐르는 텍스트 마우스 오버시 텍슽 색상이 변하면서 일시 정지됩니다. CSS 스타일 .marquee-text { display: flex; flex: 0 0 auto; white-space: nowrap; overflow: hidden; transition: 0.3s; font-size: 2rem; font-weight:300; color: #000000; } .marquee-text:hover { color: #999999; } .marquee-text:hover .marquee-wrap { animation-play-state: paused; cursor: pointer; } .marquee-wrap { animation: textLoop 10s linear infinite; padding-right: 1.4881v.. 2024. 2. 6.

이전 1 2 3 4 ··· 6 다음

티스토리툴바