AI가 처음이라면 여기서 시작하세요 → 입문 1. ChatGPT와 Codex, 무엇이 다를까요?

마지막 확인: 2026년 11월 10일

기존 화면을 원하는 대로 수정하기

한 줄 요약

기존 화면을 원하는 대로 수정하기
한 번에 전부 바꾸기보다, 한 가지씩 확인하며 고쳐요.

개념 그림

그림이에요 (실제 화면과 조금 다를 수 있어요)

제목과 색상은 바꾸고, 책 목록은 유지하기
그림을 누르면 크게 볼 수 있어요.

따라 하기

수정 전의 상태를 남겨두세요

독서 기록 예제를 대상으로 진행해요. 먼저 폴더를 복사해 보관하거나 사용 중인 버전 관리 도구로 현재 상태를 기록하세요. 브라우저 저장 데이터는 파일 복사만으로 함께 백업되는 것이 아니에요.

바꿀 것과 유지할 것을 나누세요

“예쁘게 바꿔줘” 대신 화면 위치와 원하는 변화를 적으세요. 저장 기능과 데이터까지 바뀌지 않도록 유지할 범위를 함께 지정하면 검토하기 쉬워요.

디자인 수정 후 세 번 확인하세요

1. 계획에서 수정 파일을 확인하세요

먼저 관련 파일과 수정 범위를 설명하게 하세요. 색상 하나를 바꾸는데 전체 구조를 다시 만들려 한다면 범위를 좁혀 요청하세요.

2. 같은 파일을 새로고침하세요

Codex가 파일을 저장한 뒤, 열어둔 브라우저에서 새로고침하세요. 변화가 없으면 수정한 파일 경로와 브라우저에서 연 파일이 같은지 확인해요.

3. 기존 기능도 다시 눌러보세요

책 추가 → 읽음 표시 → 새로고침 → 삭제를 순서대로 확인하세요. 브라우저 창 폭도 줄여 글과 버튼이 겹치지 않는지 보세요.

복사해서 쓰는 요청

화면 일부만 수정하기

현재 독서 기록 페이지에서 다음만 수정해줘. 변경: 제목을 나의 독서 노트로, 강조색을 파란색으로, 모바일 버튼 간격을 넓히기. 유지: 책 추가·읽음·삭제 기능, 기존 저장 키와 데이터 형식. 먼저 관련 파일과 수정 계획을 설명해줘. 수정 후 변경한 부분과 확인한 동작, 내가 직접 확인할 순서를 알려줘.

원치 않는 변경 되돌리기

방금 수정 중 [원치 않는 변경]만 원래대로 되돌리고 싶어. [유지하고 싶은 변경]은 유지해줘. 먼저 현재 변경 내역을 확인하고 어느 파일의 어느 부분을 되돌릴지 설명해줘. 기존 데이터나 관련 없는 파일을 삭제하지 말아줘.

자주 막히는 부분

여기서 많이들 막혀요. 내 상황과 비슷한 걸 찾아보세요!

변경 전후를 비교하세요

그림이에요 (실제 화면과 조금 다를 수 있어요)

브라우저 폭을 줄여 모바일 배치도 확인하기
그림을 누르면 크게 볼 수 있어요.

기대한 것과 다른 수정이 있으면 바뀐 파일과 변경 내용을 요청하세요. 이전 파일로 되돌릴 때는 이후 수정까지 덮어쓰지 않는지 확인해야 해요.

확인 문제: 색상을 바꾼 뒤에도 책 추가·저장 기능을 확인해야 하나요?

답: “네, 기존 기능도 확인한다”
디자인 수정도 기존 동작에 영향을 줄 수 있어요. 핵심 사용 흐름을 다시 확인하세요.

참고한 공식 자료

다음 팁

오류를 읽고 Codex와 해결하기 →

여기서 막혔어요

따라 하다가 막힌 곳이 있으면 알려 주세요. 다른 사람에게는 보이지 않고 운영자에게만 전달돼요. 답장을 받고 싶을 때만 이메일을 적어 주세요.