AI가 처음이라면 여기서 시작하세요 → 입문 1. ChatGPT와 Codex, 무엇이 다를까요?
기존 화면을 원하는 대로 수정하기
한 줄 요약
기존 화면을 원하는 대로 수정하기
한 번에 전부 바꾸기보다, 한 가지씩 확인하며 고쳐요.
개념 그림
그림이에요 (실제 화면과 조금 다를 수 있어요)
따라 하기
수정 전의 상태를 남겨두세요
독서 기록 예제를 대상으로 진행해요. 먼저 폴더를 복사해 보관하거나 사용 중인 버전 관리 도구로 현재 상태를 기록하세요. 브라우저 저장 데이터는 파일 복사만으로 함께 백업되는 것이 아니에요.
바꿀 것과 유지할 것을 나누세요
“예쁘게 바꿔줘” 대신 화면 위치와 원하는 변화를 적으세요. 저장 기능과 데이터까지 바뀌지 않도록 유지할 범위를 함께 지정하면 검토하기 쉬워요.
디자인 수정 후 세 번 확인하세요
1. 계획에서 수정 파일을 확인하세요
먼저 관련 파일과 수정 범위를 설명하게 하세요. 색상 하나를 바꾸는데 전체 구조를 다시 만들려 한다면 범위를 좁혀 요청하세요.
2. 같은 파일을 새로고침하세요
Codex가 파일을 저장한 뒤, 열어둔 브라우저에서 새로고침하세요. 변화가 없으면 수정한 파일 경로와 브라우저에서 연 파일이 같은지 확인해요.
3. 기존 기능도 다시 눌러보세요
책 추가 → 읽음 표시 → 새로고침 → 삭제를 순서대로 확인하세요. 브라우저 창 폭도 줄여 글과 버튼이 겹치지 않는지 보세요.
복사해서 쓰는 요청
화면 일부만 수정하기
원치 않는 변경 되돌리기
자주 막히는 부분
변경 전후를 비교하세요
그림이에요 (실제 화면과 조금 다를 수 있어요)
기대한 것과 다른 수정이 있으면 바뀐 파일과 변경 내용을 요청하세요. 이전 파일로 되돌릴 때는 이후 수정까지 덮어쓰지 않는지 확인해야 해요.
확인 문제: 색상을 바꾼 뒤에도 책 추가·저장 기능을 확인해야 하나요?
답: “네, 기존 기능도 확인한다”
디자인 수정도 기존 동작에 영향을 줄 수 있어요. 핵심 사용 흐름을 다시 확인하세요.
참고한 공식 자료
여기서 막혔어요
따라 하다가 막힌 곳이 있으면 알려 주세요. 다른 사람에게는 보이지 않고 운영자에게만 전달돼요. 답장을 받고 싶을 때만 이메일을 적어 주세요.
💌 새 팁 알림 받기
새 팁이 올라오면 이메일로 알려 드려요. 광고 메일은 보내지 않아요.