시각적 CSS 편집기 — 그라데이션·그림자·폰트 실시간 미리보기

CSS를 고치는 방법은 전통적으로 두 가지였습니다. 코드를 열어 수정하고 저장하고 새로고침하는 방법과, 개발자 도구로 눈대중 값을 바꿔 본 뒤 그 값을 다시 코드에 옮겨 적는 방법. 웰컴스 CSS 편집기(웰 디자인)는 이 두 가지를 하나로 합쳤습니다. 실제 화면에서 요소를 클릭하면 오른쪽 패널에 그 요소의 스타일 항목이 편집 폼으로 나오고, 값을 고치면 화면이 즉시 반영됩니다. 끝나면 수정된 CSS만 뽑아 갈 수 있습니다.

어떤 소스든 가져올 수 있습니다

세 가지 입력 방식이 있습니다. HTML·CSS·PHP 파일을 드래그해서 올리거나, 코드를 그대로 붙여 넣거나. CSS 파일만 올리면 미리볼 수 있는 샘플 페이지가 자동으로 만들어져서 스타일이 어떻게 보이는지부터 확인됩니다. 워드프레스 테마처럼 PHP 안에 스타일이 섞인 파일도 인식합니다.

화면은 미리보기와 코드 두 탭으로 나뉘고, 미리보기 상단의 편집 모드 토글로 "클릭해서 고치기"와 "클릭해서 누르기"를 전환합니다. 링크를 따라가며 봐야 할 때는 상호작용 모드로 놓으면 되고, 링크를 열어야 할 때만 Ctrl+클릭을 쓰면 됩니다.

클릭 → 폼 → 즉시 반영

편집 모드에서 요소에 마우스를 대면 선택 하이라이트가 붙고, 클릭하면 오른쪽 패널에 그 요소의 스타일이 여섯 그룹으로 정리되어 나옵니다.

값 폼 옆에 단위(px, %, em, rem, vw, vh)를 고를 수 있고, 색상 항목은 컬러 피커와 코드 입력이 양방향으로 연결되어 있습니다. 값을 고치면 미리보기가 그 순간 바뀌기 때문에 "이 값이면 어떻게 보일까"를 코드 저장 없이 몇 번이고 시험할 수 있습니다.

결과물은 세 가지로 내보내기

작업이 끝나면 선택지가 세 개입니다. 수정된 CSS만 복사·저장하거나, CSS가 반영된 HTML/PHP 전체를 받거나, 원본 형식 그대로 내보낼 수도 있습니다. PHP 파일을 가져왔다면 원본의 스타일 블록만 수정된 CSS로 교체된 채 나오기 때문에, 테마 파일에 바로 덮어 쓸 수 있는 형태로 정리됩니다.

지금까지 바꾼 내용은 변경 이력에 쌓여서, 잘못 고친 항목은 목록에서 되돌릴 수 있습니다.

이럴 때 씁니다

• 받은 시안 HTML의 색·간격을 손보고 결과를 돌려줄 때
• 운영 중인 페이지의 스타일을 건드리기 전에 미리 시뮬레이션할 때
• CSS 초보가 "이 요소 저 요소"를 바꿔 보며 속성을 배울 때

모든 편집은 브라우저 안에서만 처리됩니다.

30분 수정 워크플로 — 실제 예시

운영 중인 랜딩 페이지의 버튼이 눈에 안 들어 수정을 맡겼을 때의 흐름입니다.

1. HTML 파일을 드래그해 올립니다. 미리보기에 페이지가 뜹니다
2. 편집 모드에서 버튼을 클릭합니다. 오른쪽 패널에 여섯 그룹의 폼이 뜹니다
3. 배경색을 컬러 피커로 고르고, 모서리 둥글기를 8px로, 패딩을 늘립니다 — 화면이 즉시 반영됩니다
4. 폭을 줄여 반응형 동작을 확인하고, 마음에 드는 순간 변경 이력을 확인해 되돌릴 건 되돌립니다
5. "수정된 CSS만" 복사해 개발자에게 전달하거나, HTML 전체를 받아 직접 덮어 씁니다

이 흔한 작업이 코드 에디터에서는 저장-새로고침 왕복이 몇 번씩 붙습니다. 클릭해서 폼으로 고치는 구조는 왕복을 없애서, CSS 문법이 익숙지 않은 사람도 결과물을 만들 수 있게 합니다.

단위를 고른다는 것 — px에서 rem으로

값 폼마다 단위 선택기가 붙어 있는 것이 단순해 보이지만 학습 도구로도 쓸모가 있습니다. 같은 글자 크기를 px와 rem으로 바꿔 가며 화면 차이를 보거나, 너비를 %와 vw로 전환해 반응형 감각을 익히는 식입니다. CSS를 배우는 중이라면 이 편집기에서 "값 바꾸고 즉시 화면 확인"을 반복하는 것만으로 속성별 감각이 빨리 붙습니다. Flexbox 그룹의 방향·정렬 항목들도 값 조합을 바꿔 가며 보면 개념이 머리에 남습니다.

자주 묻는 질문

Q. CSS를 몰라도 쓸 수 있나요?
A. 폼 형태로 되어 있어서 숫자와 색을 고르는 방식으로 편집됩니다. 다만 항목 이름(마진, 패딩 등)은 알아 두면 훨씬 빠릅니다.

Q. 편집한 결과가 바로 사이트에 적용되나요?
A. 아니요. 내보낸 코드를 직접 적용해야 합니다. 실험은 미리보기 안에서만 일어납니다.

Q. 색상 조합이 고민될 때는요?
A. 웰컴스 색상 변환기에서 보색·유사색 팔레트와 대비율을 먼저 정해 오면 편합니다.

Q. 모바일 화면 미리보기도 되나요?
A. 미리보기 창 폭을 줄이면 반응형 레이아웃이 좁은 화면에서 어떻게 배치되는지 확인됩니다.

CSS 작업의 피로는 "고치고 확인하려고 저장하는" 그 왕복에서 나옵니다. 이 편집기는 그 왕복을 없애는 도구입니다.

👉 웰컴스 CSS 편집기에서 편집 시작 →