콘텐츠로 이동

디자인과 비주얼 편집

디자인 수정은 “예쁘게”보다 “어디를 어떻게”가 중요합니다. 화면, 요소, 기준을 함께 적어 주세요.

전체 디자인 리듬을 개선해줘.
지금은 비슷한 카드와 여백이 반복되어 단조로워 보여.
섹션마다 역할이 드러나게 히어로, 좌우 분할, 비교 표, 타임라인, 갤러리, FAQ, 문의 밴드를 섞어줘.
색상은 한 가지 계열만 과하게 쓰지 말고, 텍스트 대비와 버튼 상태도 함께 정리해줘.
모바일 최적화를 제대로 점검하고 고쳐줘.
375px, 390px, 430px 화면에서 상단 네비게이션이 잘 보여야 해.
데스크톱 메뉴를 숨겼다면 모바일 햄버거 버튼과 펼쳐지는 메뉴가 반드시 있어야 해.
버튼은 44px 이상 터치하기 좋게 만들고, 메뉴를 누르면 닫히게 해줘.
가로 스크롤이나 잘리는 텍스트도 함께 없애줘.
한국어 문구가 어색하게 줄바꿈되거나 버튼 안에서 잘리지 않게 고쳐줘.
긴 문장은 적절히 줄을 나누고, 제목에는 너무 큰 글자 크기를 쓰지 말아줘.
모바일에서는 긴 단어가 박스 밖으로 나가지 않게 하고, 버튼 텍스트가 한 줄에 억지로 끼지 않게 해줘.
전체 폰트는 특별한 요청이 없으면 Pretendard 계열로 자연스럽게 맞춰줘.
히어로 이미지와 주요 이미지의 품질을 개선해줘.
실존 장소/제품/인물이면 검증된 실제 이미지를 우선 사용하고, 이미지가 없을 때만 생성 이미지를 써줘.
해상도가 낮거나 흐릿한 이미지는 큰 히어로에 쓰지 말고, 더 좋은 원본을 선택하거나 작은 섹션 이미지로 내려줘.
이미지에는 의미 있는 alt 텍스트를 넣고, 실패해도 레이아웃이 깨지지 않게 fallback을 둬.

비주얼 편집으로 특정 요소만 고치기

섹션 제목: “비주얼 편집으로 특정 요소만 고치기”
전체를 다시 만들지 말고 선택한 요소만 고쳐줘.
선택한 영역의 텍스트, 여백, 색상, 버튼 상태만 수정하고 주변 레이아웃은 유지해줘.
수정 후에는 모바일에서도 같은 요소가 잘 보이는지 함께 확인해줘.
이미지가 예쁘긴 한데 실제 대상과 달라 보여.
실존 대상이면 생성 이미지를 쓰지 말고 실제 이미지 또는 대상이 드러나는 검증된 이미지로 교체해줘.
정확한 이미지가 없다면 대상 자체를 꾸며서 만들지 말고, 지도, 정보 카드, 아이콘, 다이어그램처럼 오해가 적은 시각 요소로 바꿔줘.
생성 중 화면이 멈춘 것처럼 보이지 않게 개선해줘.
단순 스피너만 보여주지 말고, 현재 단계, 완료된 작업, 다음 작업, 경과 시간을 보여줘.
오래 걸리는 단계에는 "코드 작성 중", "미리보기 준비 중", "배포 확인 중"처럼 실제로 진행 중인 일을 설명해줘.
실패했을 때는 재시도 버튼과 오류 요약을 보여줘.
접근성 기본을 점검해줘.
버튼과 링크에는 의미 있는 이름을 넣고, 이미지에는 alt 텍스트를 넣어줘.
키보드 포커스가 보이게 하고, 모달이나 드롭다운은 Esc로 닫히게 해줘.
색상 대비가 낮은 텍스트는 조정하고, 아이콘만 있는 버튼에는 aria-label을 넣어줘.