diff --git a/README.md b/README.md
index 2e2a22d..775b355 100644
--- a/README.md
+++ b/README.md
@@ -1,150 +1,361 @@
-
- 
-
-숫자 야구 게임
+# ⚾ 숫자 야구 게임 미션
-## 🔍 진행방식
+## 🎯 개인 목표 및 목표 달성을 위한 행동 가이드
-- 미션은 **기능 요구사항, 프로그래밍 요구사항, 과제 진행 요구사항** 세 가지로 구성되어 있다.
-- 세 개의 요구사항을 만족하기 위해 노력한다. 특히 기능을 구현하기 전에 기능 목록을 만들고, 기능 단위로 커밋 하는 방식으로 진행한다.
+이번 미션을 통해 다음과 같은 학습 경험들을 쌓는 것을 목표로 한다.
+
+**1. HTML, CSS, JavaScript 기본 문법 적용 및 체득**
+
+미션 요구사항을 직접 구현하면서 바닐라 JS의 DOM 조작, 이벤트 처리, 모듈 시스템 등 기본 문법을 코드로 체득한다.
+
+**2. MVC 패턴 이해 및 적용**
+
+Model, View, Controller의 역할을 명확히 구분하여 설계하고, 각 레이어가 서로의 구현 세부사항을 알지 못하도록 의존 관계를 관리한다.
+
+**3. 몰랐던 개념과 새롭게 알게 된 사실 정리**
+
+헷갈리거나 처음 접한 개념은 단순히 넘어가지 않고 이유를 찾아 정리한다.
+
+**4. AI와 스터디를 활용한 리팩토링**
+
+구현 이후 스터디 과정에서 코드를 다시 보며 개선점을 찾고 리팩토링한다. 또한 AI 에이전트를 활용하여 과거 코드, 나의 코드, 팀원의 코드를 비교 분석하고 그 결과를 정리한다.
---
-## 🎯 기능 요구사항
+## 📝 기능 구현 목록
-기본적으로 1부터 9까지 서로 다른 수로 이루어진 3자리의 수를 맞추는 게임이다.
+2주차 미션에서 새롭게 추가한 기능은 없으므로 기능 목록은 1주차 기준으로 작성한다.
-- 같은 수가 같은 자리에 있으면 `스트라이크`, 다른 자리에 있으면 `볼`, 같은 수가 전혀 없으면 `낫싱`이란 힌트를 얻고, 그 힌트를 이용해서 먼저 상대방(컴퓨터)의 수를 맞추면 승리한다.
- - 예) 상대방(컴퓨터)의 수가 425일 때
- - 123을 제시한 경우 : 1스트라이크
- - 456을 제시한 경우 : 1볼 1스트라이크
- - 789를 제시한 경우 : 낫싱
-- 위 숫자 야구게임에서 상대방의 역할을 컴퓨터가 한다. 컴퓨터는 1에서 9까지 서로 다른 임의의 수 3개를 선택한다. 게임 플레이어는 컴퓨터가 생각하고 있는 3개의 숫자를 입력하고, 컴퓨터는 입력한 숫자에 대한 결과를 출력한다.
-- 이 같은 과정을 반복해 컴퓨터가 선택한 3개의 숫자를 모두 맞히면 게임이 종료되고, 재시작 버튼이 노출된다.
-- 게임이 종료된 후 재시작 버튼을 클릭해 게임을 다시 시작할 수 있다.
-- 사용자가 잘못된 값을 입력한 경우 `alert`으로 에러 메시지를 보여주고, 다시 입력할 수 있게 한다.
+**1. 랜덤 정답 생성**
-
+`MissionUtils.Random.pickNumberInRange(1, 9)`를 세 번 호출하여 한 자리씩 확정하는 방식으로 1~9 사이의 서로 다른 임의의 수 3개를 생성한다.
-### 💻 실행 결과
+**2. 사용자 입력 및 유효성 검증**
-
+- 사용자로부터 3자리 숫자를 입력받는다.
+- 입력값이 유효하지 않은 경우 `alert`로 에러 메시지를 표시하고 다시 입력할 수 있게 한다.
+ - 유효하지 않은 값: 1~9 사이의 숫자로 이루어지지 않은 경우, 중복이 있는 경우, 3자리가 아닌 경우
-
+**3. 결과 판별 및 출력**
+
+- 컴퓨터 숫자와 사용자 입력값을 비교하여 볼/스트라이크/낫싱을 판별하고 결과를 출력한다.
+ - 수 O, 자리 O : 스트라이크
+ - 수 O, 자리 X : 볼
+ - 모든 수 X : 낫싱
+- 스트라이크와 볼이 함께 있는 경우 볼을 먼저 출력한다.
+
+**4. 게임 종료 및 재시작**
+
+- 정답(3스트라이크)인 경우 재시작 버튼을 화면에 노출한다.
+- 재시작 버튼 클릭 시 새로운 정답을 생성하고 게임을 처음부터 다시 시작한다.
+
+**5. 코드 품질 요구사항**
+
+- 순수 Vanilla JS로만 구현한다.
+- `var`를 사용하지 않는다.
+- 함수 길이는 15라인을 넘지 않도록 한다.
+- 인덴트 depth는 2를 넘지 않도록 한다.
+- 함수가 한 가지 일만 하도록 최대한 작게 만든다.
---
-## ✅ 프로그래밍 요구사항
+## 📚 학습 내용
+
+**1. 생성자 함수와 객체 (Constructor Function)**
-- `play`(컴퓨터의 랜덤 값, 유저의 입력 값) 메서드를 만들어 게임을 진행한다.
-- `play`메서드는 `String`으로 결과값을 return 한다.
- - 스트라이크와 볼이 같이 있는 경우 볼을 먼저쓰고, 스트라이크를 쓴다.
-- `index.js`에서 아래의 function 또는 class 형태를 활용한다.
+`function BaseballGame() { this.play = function(...) {} }` 형태의 생성자 함수는 `new` 키워드로 호출하면 객체를 생성한다. 단순 함수와 다르게 내부 상태(데이터)와 해당 데이터를 조작하는 메서드를 함께 묶어 캡슐화할 수 있다.
+
+> **단점 (메모리 낭비):** `new` 키워드로 객체를 생성할 때마다 내부의 함수가 메모리에 중복하여 생성된다. ES6 클래스 문법을 사용하면 메서드가 프로토타입 공용 공간에 단 한 번만 저장되어 모든 인스턴스가 공유하므로 메모리를 더 효율적으로 관리할 수 있다.
```javascript
-export default function BaseballGame() {
- this.play = function (computerInputNumbers, userInputNumbers) {
- return "결과 값 String";
- };
+// 생성자 함수 방식
+function BaseballGame() {
+ this.play = function (computerNumbers, userInputNumbers) { ... };
}
-export default class BaseballGame {
- play(computerInputNumbers, userInputNumbers) {
- return "결과 값 String";
- }
+// ES6 클래스 방식 (프로토타입 활용)
+class BaseballGame {
+ play(computerNumbers, userInputNumbers) { ... }
}
+```
+
+**2. DOM 조작**
+
+바닐라 JS에서는 `document.querySelector`로 HTML 요소를 직접 가져와 이벤트와 상태를 수동으로 연결해야 한다. CSS 선택자 규칙에 따라 id는 `#`, class는 `.`, 태그 이름은 그대로 사용한다.
+
+`innerHTML`에 HTML 문자열을 통째로 덮어씌우는 방식으로 화면을 갱신할 수 있으며, `input` 태그의 값은 `.value`로 접근한다.
+
+**3. `innerHTML` 동적 생성 vs `hidden` 속성**
+
+요소를 `innerHTML`로 동적 생성하면, JS가 처음 실행되는 시점에는 DOM에 요소 자체가 존재하지 않아 이벤트 리스너를 미리 등록할 수 없다는 문제가 생긴다. HTML에 미리 `hidden` 속성을 부여해두거나 CSS `display: none`을 적용하면 DOM에는 존재하면서 화면에만 보이지 않으므로, 이벤트 리스너를 초기에 등록해두고 필요한 시점에 `hidden = false`로 전환하는 방식이 더 안정적이다.
+
+**4. `event.preventDefault()`**
+
+`
-
+