forked from swhan0329/codex-101
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1865 lines (1775 loc) · 145 KB
/
Copy pathindex.html
File metadata and controls
1865 lines (1775 loc) · 145 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Codex 101 — OpenAI Codex Practical Guide for Real Work</title>
<meta name="description"
content="A bilingual practical guide to OpenAI Codex for first-time and advanced users: choose the right surface, learn the security model, and apply AGENTS.md, MCP, automation, and prompting with reviewed official guidance." />
<meta property="og:title" content="Codex 101 — OpenAI Codex Practical Guide for Real Work" />
<meta property="og:description"
content="Choose the right Codex surface for your workflow, then move from first-run setup to AGENTS.md, MCP, automation, and prompting with a bilingual KR/EN guide." />
<meta property="og:type" content="website" />
<link rel="icon" href="images/codex_cli.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="style.css?v=20260416-ui-refresh-2" />
</head>
<body data-page="home">
<!-- Language Toggle -->
<nav class="top-bar">
<div class="top-bar-inner">
<a href="index.html" class="logo">Codex 101</a>
<div class="top-bar-actions">
<button id="theme-toggle" class="icon-btn" title="Toggle theme" aria-label="Toggle theme">🌙</button>
<div class="lang-switch">
<button class="lang-btn active" data-lang="ko">한국어</button>
<button class="lang-btn" data-lang="en">English</button>
</div>
</div>
</div>
<div class="reading-progress" aria-hidden="true">
<span id="reading-progress-bar" class="reading-progress-bar"></span>
</div>
</nav>
<!-- Hero -->
<header class="hero">
<div class="hero-glow"></div>
<div class="container">
<div class="hero-layout">
<div class="hero-copy">
<p class="hero-badge">
<span data-i18n="hero_badge_prefix">공식 문서 기준 재검수</span>
<span aria-hidden="true"> · </span>
<span class="live-date" data-date-format="long">2026년 4월 23일</span>
</p>
<h1 class="hero-title" data-i18n="hero_title">OpenAI Codex를<br />한국 실무에 바로 붙이는 가이드</h1>
<p class="hero-sub" data-i18n="hero_sub">CLI · Desktop App (macOS/Windows) · IDE Extension · Web · iOS · SDK automation<br />최신 공식 문서를 기준으로 제품 면 선택, 모델 선택, 샌드박스/승인, MCP, 자동화를 처음 사용자와 실무 사용자 모두 읽기 쉽도록 다시 정리했습니다.</p>
<div class="hero-cta">
<a href="#start-here" class="btn btn-primary" data-i18n="hero_cta">빠른 시작 경로 보기</a>
<a href="#s17" class="btn btn-ghost" data-i18n="hero_cta_secondary">Prompting 실전 가이드</a>
</div>
<div class="hero-jump-wrap" id="chapter-jumps">
<p class="hero-jump-kicker" data-i18n="hero_jump_label">챕터 바로가기</p>
<div class="hero-jump-list" aria-label="Chapter quick jumps">
<a href="#s1" class="hero-jump">
<span class="hero-jump-num">01-03</span>
<span class="hero-jump-text" data-i18n="toc_home_1_t">Foundations</span>
</a>
<a href="#s4" class="hero-jump">
<span class="hero-jump-num">04-09</span>
<span class="hero-jump-text" data-i18n="toc_home_2_t">Setup and Surfaces</span>
</a>
<a href="#s10" class="hero-jump">
<span class="hero-jump-num">10-11</span>
<span class="hero-jump-text" data-i18n="toc_home_3_t">Execution Model</span>
</a>
<a href="#s12" class="hero-jump">
<span class="hero-jump-num">12-14</span>
<span class="hero-jump-text" data-i18n="toc_home_4_t">Context and Tools</span>
</a>
<a href="#s15" class="hero-jump">
<span class="hero-jump-num">15-16</span>
<span class="hero-jump-text" data-i18n="toc_home_5_t">Sessions and Automation</span>
</a>
<a href="#s17" class="hero-jump">
<span class="hero-jump-num">17</span>
<span class="hero-jump-text" data-i18n="toc_home_6_t">Prompting Codex Agents</span>
</a>
<a href="#s18" class="hero-jump">
<span class="hero-jump-num">18-21</span>
<span class="hero-jump-text" data-i18n="toc_home_7_t">Decision Help</span>
</a>
</div>
</div>
</div>
<aside class="hero-rail" aria-label="Guide launch points">
<div class="hero-rail-card hero-rail-intro">
<p class="hero-rail-kicker" data-i18n="hero_panel_kicker">Launch paths</p>
<h2 class="hero-rail-title" data-i18n="hero_panel_title">지금 필요한 흐름부터 바로 들어가기</h2>
<p class="hero-rail-desc" data-i18n="hero_panel_desc">처음 실행, 팀 운영, 프롬프팅 실전 중 현재 목적에 맞는 경로를 먼저 잡고 아래 섹션으로 내려가면 훨씬 덜 헤맵니다.</p>
</div>
<div class="hero-path-grid">
<a href="#s5" class="hero-path-card">
<span class="hero-path-tag" data-i18n="hero_path_1_tag">First run</span>
<strong class="hero-path-title" data-i18n="hero_path_1_title">10분 안에 설치와 첫 작업</strong>
<span class="hero-path-desc" data-i18n="hero_path_1_desc">앱 설치, 로그인, 첫 로컬 작업, Git 체크포인트까지 빠르게 훑습니다.</span>
</a>
<a href="#s12" class="hero-path-card">
<span class="hero-path-tag" data-i18n="hero_path_2_tag">Team setup</span>
<strong class="hero-path-title" data-i18n="hero_path_2_title">프로젝트 규칙과 도구 접근 고정</strong>
<span class="hero-path-desc" data-i18n="hero_path_2_desc">AGENTS.md, config.toml, MCP, 승인 정책을 팀 기준으로 맞춥니다.</span>
</a>
<a href="#s17" class="hero-path-card">
<span class="hero-path-tag" data-i18n="hero_path_3_tag">Prompting</span>
<strong class="hero-path-title" data-i18n="hero_path_3_title">긴 작업이 덜 흔들리는 프롬프트 계약</strong>
<span class="hero-path-desc" data-i18n="hero_path_3_desc">tool loop, verification, runtime tuning을 한 번에 정리합니다.</span>
</a>
</div>
<div class="hero-signal-row" aria-label="Guide snapshot">
<div class="hero-signal">
<span class="hero-signal-value">21</span>
<span class="hero-signal-label" data-i18n="hero_signal_1">chapters</span>
</div>
<div class="hero-signal">
<span class="hero-signal-value">KR/EN</span>
<span class="hero-signal-label" data-i18n="hero_signal_2">live language toggle</span>
</div>
<div class="hero-signal">
<span class="hero-signal-value">Daily</span>
<span class="hero-signal-label" data-i18n="hero_signal_3">official-doc review</span>
</div>
</div>
</aside>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content guide-page home-page" id="toc">
<div class="container guide-shell home-shell">
<aside class="guide-sidebar home-sidebar">
<div class="guide-sidebar-inner home-sidebar-inner">
<p class="guide-sidebar-kicker" data-i18n="home_nav_kicker">Guide map</p>
<h2 class="guide-sidebar-title" data-i18n="home_nav_title">Codex 101 chapters</h2>
<p class="guide-sidebar-lead" data-i18n="home_nav_lead">최신 사실 확인부터 시작 표면 선택, 실행 규칙, 자동화, prompting까지 실무 적용 순서대로 묶었습니다.</p>
<nav class="home-nav" id="home-nav" aria-label="Codex 101 sections">
<!-- JS injects home nav groups -->
</nav>
</div>
</aside>
<div class="guide-main home-main">
<section class="section overview-section" id="start-here">
<p class="overview-kicker" data-i18n="overview_kicker">Start here</p>
<h2 data-i18n="overview_title">처음 사용자와 실무 사용자를 위한 읽기 경로</h2>
<p class="overview-lead" data-i18n="overview_lead">OpenAI 공식 문서에서 현재 확인되는 핵심 사실을 먼저 압축하고, 그 다음 이 페이지를 초보자용 흐름과 실무 운영 흐름으로 나눠서 읽을 수 있게 정리했습니다.</p>
<div class="overview-visual-card overview-visual-card-intro">
<div class="overview-visual-copy">
<p class="overview-action-kicker" data-i18n="overview_visual_kicker">Visual guide</p>
<h3 data-i18n="overview_visual_title">그림으로 먼저 이해하는 Codex 시작 흐름</h3>
<p data-i18n="overview_visual_desc">처음 보는 사용자라면 이 그림만 먼저 훑어도 됩니다. 어떤 표면에서 시작할지 고르고, 작은 작업으로 시작하고, sandbox와 Git으로 안전하게 진행한 다음, AGENTS.md와 Docs MCP로 점점 더 똑똑하게 쓰는 흐름을 한 장에 압축했습니다.</p>
<p class="overview-visual-meta" data-i18n="overview_visual_meta">이 안내 그림은 ImageGen으로 제작했고, 언어 전환에 따라 영어/한국어 버전이 다르게 보입니다.</p>
</div>
<figure class="overview-visual-figure">
<img class="overview-lang-visual overview-lang-visual-ko" src="images/codex_beginner_map_ko.png" alt="Korean beginner-friendly Codex onboarding illustration" loading="lazy" />
<img class="overview-lang-visual overview-lang-visual-en" src="images/codex_beginner_map.png" alt="English beginner-friendly Codex onboarding illustration" loading="lazy" />
<figcaption data-i18n="overview_visual_caption">초보자용 요약 그림: 표면 선택 → 작은 작업 → 안전하게 실행 → AGENTS.md와 Docs MCP로 확장</figcaption>
</figure>
</div>
<div class="overview-bridge-grid">
<article class="overview-bridge-card">
<p class="overview-action-kicker" data-i18n="overview_plain_kicker">Plain language</p>
<h3 data-i18n="overview_plain_title">전문 용어를 일단 이렇게 생각하면 쉽습니다</h3>
<ul class="overview-list">
<li data-i18n="overview_plain_1">`Local`은 내 컴퓨터에서 일하는 것, `Cloud`는 원격 작업실에 맡기는 것이라고 보면 됩니다.</li>
<li data-i18n="overview_plain_2">`Sandbox`는 작업 울타리, `Approval`은 울타리 밖으로 나가기 전에 한 번 더 묻는 버튼입니다.</li>
<li data-i18n="overview_plain_3">`AGENTS.md`는 “이 프로젝트에서는 이렇게 일해 주세요”라고 적어두는 작업 설명서입니다.</li>
<li data-i18n="overview_plain_4">`MCP`는 문서, 브라우저, 외부 도구를 Codex와 연결해 주는 케이블에 가깝습니다.</li>
</ul>
</article>
<article class="overview-bridge-card overview-bridge-card-pro">
<p class="overview-action-kicker" data-i18n="overview_analogy_kicker">Analogy</p>
<h3 data-i18n="overview_analogy_title">Codex를 “옆자리 개발 보조”처럼 생각해도 됩니다</h3>
<p data-i18n="overview_analogy_desc">코드를 대신 전부 알아서 만드는 마법 상자라고 보기보다, 파일을 읽고 수정하고 테스트까지 도와주는 꽤 유능한 보조 개발자라고 생각하면 이해가 쉽습니다. 그래서 처음에는 작은 일부터 맡기고, 안전 장치와 프로젝트 규칙을 같이 붙이는 흐름이 가장 자연스럽습니다.</p>
</article>
</div>
<div class="overview-fact-panel">
<div class="overview-fact-head">
<div>
<p class="overview-kicker" data-i18n="overview_fact_kicker">Officially verified today</p>
<h3 data-i18n="overview_fact_title">오늘의 업데이트</h3>
</div>
<p class="overview-fact-date">
<span data-i18n="overview_fact_date_prefix">업데이트 기준일</span>
<span class="live-date" data-date-format="long">2026년 4월 23일</span>
</p>
</div>
<details class="overview-update-log" open>
<summary>
<span class="overview-update-log-title" data-i18n="overview_update_toggle_title">오늘 반영한 변경 보기</span>
<span class="overview-update-log-hint" data-i18n="overview_update_toggle_hint">매 실행마다 먼저 확인한 공식 변경 사항</span>
</summary>
<div class="overview-update-strip" aria-label="Today update summary">
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_1_title">모델/표면 매트릭스 재확인</p>
<p class="update-pill-desc" data-i18n="overview_update_1_desc">`codex/models`를 우선 확인해 오늘은 `gpt-5.5`가 최우선 추천 모델로 올라왔는지, `gpt-5.4`가 fallback이 되었는지, `gpt-5.4-mini`와 `gpt-5.3-codex`의 역할이 어떻게 갈리는지까지 다시 대조했습니다.</p>
</article>
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_2_title">요금제/크레딧 구조 재정리</p>
<p class="update-pill-desc" data-i18n="overview_update_2_desc">개인 플랜 한도뿐 아니라 `GPT-5.5` 사용량 표, `Free $0`·`Go $8`·`Plus $20`·`Pro from $100`, Business·Enterprise의 pay-as-you-go 팀 경로, 토큰 기반 크레딧 구조를 다시 반영했습니다.</p>
</article>
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_3_title">Quickstart·IDE 경로 정리</p>
<p class="update-pill-desc" data-i18n="overview_update_3_desc">처음 사용자는 App 중심, 전문 사용자는 IDE/CLI + Docs MCP 중심으로 읽히도록 시작 경로를 유지하되, API 키 로그인 제한과 Windows/WSL 설명을 더 분명하게 다듬었습니다.</p>
</article>
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_4_title">4월 App 업데이트 반영</p>
<p class="update-pill-desc" data-i18n="overview_update_4_desc">2026년 4월 16일 `Codex for (almost) everything` 발표와 `app/features`·`app/automations`를 함께 대조해 background computer use, 더 많은 plugins, multiple terminal tabs, SSH devbox, richer artifact/sidebar 흐름을 현재 문서 구조에 맞게 다시 묶었습니다.</p>
</article>
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_5_title">관련 발표 전체 재점검</p>
<p class="update-pill-desc" data-i18n="overview_update_5_desc">`developers.openai.com/codex`, `openai.com/index`, `openai.com/codex`를 함께 다시 훑어보며 2026년 4월 23일 `Introducing GPT-5.5`, 4월 16일 App 확장 발표, 4월 2일 팀용 pay-as-you-go 좌석 업데이트가 지금 구조를 바꿀 수준인지 확인했고, 이번에는 상단 업데이트 토글과 모델/가격 설명에 직접 반영하는 편이 가장 정확하다고 판단했습니다.</p>
</article>
<article class="update-pill">
<p class="update-pill-title" data-i18n="overview_update_6_title">Docs MCP·설정 기준 재점검</p>
<p class="update-pill-desc" data-i18n="overview_update_6_desc">Docs MCP 가이드를 다시 확인해 `developers.openai.com/learn/docs-mcp`와 서버 URL `https://developers.openai.com/mcp`, CLI/IDE 설정 공유, AGENTS.md 유도 문구를 최신 흐름에 맞췄고, config reference 기준으로 `review_model`, granular approvals, `web_search`, permissions profile, plugins/skills/app 제어 키도 함께 다시 맞췄습니다.</p>
</article>
</div>
</details>
<p class="overview-sources-label" data-i18n="overview_sources_label">근거 문서</p>
<div class="overview-source-links">
<a href="https://developers.openai.com/codex/quickstart/" target="_blank" class="source-chip" data-i18n="overview_source_1">Codex Quickstart</a>
<a href="https://developers.openai.com/codex/" target="_blank" class="source-chip" data-i18n="overview_source_16">Codex Overview</a>
<a href="https://developers.openai.com/codex/models/" target="_blank" class="source-chip" data-i18n="overview_source_8">Codex Models</a>
<a href="https://developers.openai.com/codex/pricing/" target="_blank" class="source-chip" data-i18n="overview_source_2">Codex Pricing</a>
<a href="https://developers.openai.com/codex/learn/best-practices/" target="_blank" class="source-chip" data-i18n="overview_source_3">Codex Best practices</a>
<a href="https://developers.openai.com/codex/config-reference/" target="_blank" class="source-chip" data-i18n="overview_source_4">Codex Config Reference</a>
<a href="https://developers.openai.com/codex/agent-approvals-security/" target="_blank" class="source-chip" data-i18n="overview_source_5">Agent approvals & security</a>
<a href="https://developers.openai.com/codex/ide/" target="_blank" class="source-chip" data-i18n="overview_source_6">IDE extension</a>
<a href="https://developers.openai.com/codex/windows/" target="_blank" class="source-chip" data-i18n="overview_source_7">Windows guide</a>
<a href="https://developers.openai.com/learn/docs-mcp" target="_blank" class="source-chip" data-i18n="overview_source_20">Docs MCP</a>
<a href="https://openai.com/index/introducing-gpt-5-5/" target="_blank" class="source-chip" data-i18n="overview_source_9">GPT-5.5 announcement</a>
<a href="https://openai.com/index/introducing-gpt-5-4-mini-and-nano/" target="_blank" class="source-chip" data-i18n="overview_source_14">GPT-5.4 mini and nano announcement</a>
<a href="https://openai.com/index/introducing-gpt-5-3-codex-spark/" target="_blank" class="source-chip" data-i18n="overview_source_10">GPT-5.3-Codex-Spark announcement</a>
<a href="https://openai.com/index/introducing-the-codex-app/" target="_blank" class="source-chip" data-i18n="overview_source_13">Codex App announcement</a>
<a href="https://developers.openai.com/codex/app/automations" target="_blank" class="source-chip" data-i18n="overview_source_17">Codex App Automations</a>
<a href="https://developers.openai.com/codex/app/features" target="_blank" class="source-chip" data-i18n="overview_source_18">Codex App Features</a>
<a href="https://developers.openai.com/codex/app/windows" target="_blank" class="source-chip" data-i18n="overview_source_19">Codex Windows App</a>
<a href="https://developers.openai.com/codex/plugins/" target="_blank" class="source-chip" data-i18n="overview_source_15">Codex Plugins</a>
<a href="https://developers.openai.com/codex/skills" target="_blank" class="source-chip" data-i18n="overview_source_21">Codex Skills</a>
<a href="https://developers.openai.com/codex/community/codex-for-oss/" target="_blank" class="source-chip" data-i18n="overview_source_11">Codex for OSS</a>
<a href="https://developers.openai.com/codex/guides/build-ai-native-engineering-team/" target="_blank" class="source-chip" data-i18n="overview_source_12">AI-Native Engineering Team</a>
</div>
</div>
<div class="overview-track-grid">
<article class="track-card">
<span class="product-icon" data-i18n="overview_beginner_tag">처음 시작</span>
<h3 data-i18n="overview_beginner_title">설치부터 첫 작업까지</h3>
<p data-i18n="overview_beginner_desc">Quickstart와 App 문서를 기준으로, 프로젝트 선택, Local 실행, 첫 요청, Git 체크포인트 순서로 익히는 경로입니다.</p>
<ul class="overview-list">
<li data-i18n="overview_beginner_p1">04-06에서 설치, 로그인, 첫 CLI/App 실행을 먼저 익힙니다.</li>
<li data-i18n="overview_beginner_p2">10에서 sandbox와 approval이 왜 분리되는지 이해합니다.</li>
<li data-i18n="overview_beginner_p3">14에서 OpenAI Docs MCP를 연결해 답변 신뢰도를 높입니다.</li>
</ul>
<a href="#s5" class="btn btn-primary" data-i18n="overview_beginner_cta">설치부터 보기</a>
</article>
<article class="track-card track-card-pro">
<span class="product-icon" data-i18n="overview_pro_tag">실무 운영</span>
<h3 data-i18n="overview_pro_title">팀 규칙과 자동화까지</h3>
<p data-i18n="overview_pro_desc">AGENTS.md, config.toml, 세션 운영, non-interactive 실행, 웹 리뷰 자동화를 연결해서 팀 작업 방식으로 확장하는 경로입니다.</p>
<ul class="overview-list">
<li data-i18n="overview_pro_p1">12-14에서 규칙, 설정, 도구 접근을 프로젝트 단위로 고정합니다.</li>
<li data-i18n="overview_pro_p2">15-16에서 resume, codex exec, PR 리뷰 자동화를 한 흐름으로 묶습니다.</li>
<li data-i18n="overview_pro_p3">17에서 output contract, tool loop, verification을 팀 표준 프롬프트로 정리합니다.</li>
</ul>
<a href="#s12" class="btn btn-secondary" data-i18n="overview_pro_cta">운영 가이드 보기</a>
</article>
</div>
</section>
<!-- Section 1 -->
<section class="section" id="s1">
<h2><span class="section-num">01</span> <span data-i18n="s1_title">Codex 에코시스템 개요</span></h2>
<p data-i18n="s1_intro">OpenAI Codex는 소프트웨어 개발을 위한 코딩 에이전트입니다. 최신 공식 문서는 Codex를 앱, IDE, CLI, 웹/iOS, SDK 기반 자동화에서 사용할 수 있다고 설명하며, 지금은 모델 선택기에서 `gpt-5.5`가 보이면 대부분의 작업을 거기서 시작하라고 권장합니다. `gpt-5.5`는 복잡한 코딩·computer use·knowledge work·research workflow용 최신 프론티어 모델이지만 현재 ChatGPT 로그인 경로에서 우선 제공되고 API key 경로에서는 아직 사용할 수 없습니다. 따라서 `gpt-5.4`는 여전히 가장 중요한 fallback이고, 빠른 로컬 작업이나 보조 에이전트에는 `gpt-5.4-mini`, Codex Cloud와 클라우드 리뷰에는 `gpt-5.3-codex`, 거의 즉각적인 반복에는 `gpt-5.3-codex-spark`, 대안 모델로는 `gpt-5.2`를 보면 됩니다.</p>
<blockquote data-i18n="s1_philosophy">"단순 코드 생성 → 소프트웨어 엔지니어 팀원"</blockquote>
<p data-i18n="s1_desc">Codex는 코드 자동완성 도구가 아닙니다. 여러 파일을 동시에 수정하고, 테스트를 실행하고, 결과를 검증하며, 스스로 디버깅하는 자율
에이전트입니다.</p>
<h3 data-i18n="s1_timeline_title">타임라인</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th data-i18n="th_date">시기</th>
<th data-i18n="th_event">이벤트</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025.04</td>
<td data-i18n="tl1">Codex CLI 오픈소스 공개 (TypeScript, Apache 2.0)</td>
</tr>
<tr>
<td>2025.05</td>
<td data-i18n="tl2">Codex-1 출시 (o3 아키텍처), 클라우드 샌드박스 도입</td>
</tr>
<tr>
<td>2025.06</td>
<td data-i18n="tl3">Codex CLI Rust 리라이트 베타 공개</td>
</tr>
<tr>
<td>2025.08.27</td>
<td data-i18n="tl6">Codex IDE Extension(Visual Studio Code) 변경로그 첫 공개</td>
</tr>
<tr>
<td>2025.10.06</td>
<td data-i18n="tl4">DevDay 2025에서 GPT-5 Codex GA 발표</td>
</tr>
<tr>
<td>2025.12.18</td>
<td data-i18n="tl5">GPT-5.2-Codex 출시 (멀티파일 최적화, 컨텍스트 압축)</td>
</tr>
<tr>
<td>2026.02.02</td>
<td data-i18n="tl7">Codex macOS App 출시</td>
</tr>
<tr>
<td>2026.02.05</td>
<td data-i18n="tl8">GPT-5.3-Codex 출시</td>
</tr>
<tr>
<td>2026.02.12</td>
<td data-i18n="tl9">Codex-Spark 리서치 프리뷰 공개</td>
</tr>
<tr>
<td>2026.03.04</td>
<td data-i18n="tl10">Codex Windows App 공개</td>
</tr>
<tr>
<td>2026.03.05</td>
<td data-i18n="tl11">GPT-5.4 공개 및 Codex 추천 기본 모델로 반영</td>
</tr>
<tr>
<td>2026.04.23</td>
<td data-i18n="tl12">GPT-5.5 공개 및 Codex 최우선 추천 모델로 승격</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Section 2 -->
<section class="section" id="s2">
<h2><span class="section-num">02</span> <span data-i18n="s2_title">Codex 제품군 한눈에 보기</span></h2>
<div class="card-grid">
<div class="product-card">
<div class="product-icon">CLI</div>
<h3>Codex CLI</h3>
<p data-i18n="s2_cli">터미널 기반(TUI) 로컬 에이전틱 코딩 및 CI/CD 자동화. 2025.04 출시.</p>
</div>
<div class="product-card">
<div class="product-icon">App</div>
<h3>Codex App</h3>
<p data-i18n="s2_app">데스크톱 앱(macOS + Windows). 멀티에이전트 커맨드 센터, 내장 워크트리. macOS(2026.02.02)·Windows(2026.03.04) 공개.</p>
</div>
<div class="product-card">
<div class="product-icon">IDE</div>
<h3>Codex IDE Extension</h3>
<p data-i18n="s2_ide">VS Code, Cursor, Windsurf, JetBrains로 확장된 IDE 에이전트. 로컬 작업과 클라우드 위임을 함께 지원합니다.</p>
</div>
<div class="product-card">
<div class="product-icon">Web</div>
<h3>Codex Web</h3>
<p data-i18n="s2_cloud">ChatGPT 웹 대시보드. GitHub 연동, 자동 PR/코드 리뷰, Slack·Linear발 클라우드 작업까지 연결합니다.</p>
</div>
</div>
</section>
<!-- Section 3: Supported Models -->
<section class="section" id="s3">
<h2><span class="section-num">03</span> <span data-i18n="s3_title">지원 모델</span></h2>
<h3 data-i18n="s3_models_title">현재 모델 가이드</h3>
<h4 data-i18n="s3_rec_title">⭐ 추천 모델</h4>
<div class="model-grid">
<!-- GPT-5.5 -->
<div class="model-card">
<div class="model-banner">gpt-5.5</div>
<div class="model-body">
<p class="model-desc" data-i18n="m0_f">복잡한 코딩, computer use, 지식 작업, 리서치 워크플로를 위한 최신 프론티어 모델. ChatGPT로 로그인한 Codex에서 최우선 추천 모델입니다.</p>
<div class="model-cmd">codex -m gpt-5.5</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Cloud</span><span class="check-no">❌</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-yes">✅</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-no">❌</span></div>
</div>
</div>
</div>
<!-- GPT-5.4 -->
<div class="model-card">
<div class="model-banner">gpt-5.4</div>
<div class="model-body">
<p class="model-desc" data-i18n="m1_f">GPT-5.5가 아직 보이지 않거나 API key 경로를 써야 할 때의 기본 fallback 플래그십입니다. 강한 코딩·추론·tool use 균형이 계속 장점입니다.</p>
<div class="model-cmd">codex -m gpt-5.4</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Cloud</span><span class="check-no">❌</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-yes">✅</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-yes">✅</span></div>
</div>
</div>
</div>
<!-- GPT-5.4-Mini -->
<div class="model-card">
<div class="model-banner">gpt-5.4-mini</div>
<div class="model-body">
<p class="model-desc" data-i18n="m1mini_f">빠르고 효율적인 mini 모델로, 가벼운 코딩 작업과 subagent/보조 agent 작업에 적합합니다.</p>
<div class="model-cmd">codex -m gpt-5.4-mini</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Cloud</span><span class="check-no">❌</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-yes">✅</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-yes">✅</span></div>
</div>
</div>
</div>
<!-- GPT-5.3-Codex -->
<div class="model-card">
<div class="model-banner">gpt-5.3-codex</div>
<div class="model-body">
<p class="model-desc" data-i18n="m2_f">복잡한 소프트웨어 엔지니어링에 강한 업계 최고 수준의 코딩 모델입니다. 이 모델의 코딩 역량은 현재 GPT-5.4에도 반영되어 있습니다.</p>
<div class="model-cmd">codex -m gpt-5.3-codex</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Cloud</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-yes">✅</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-yes">✅</span></div>
</div>
</div>
</div>
<!-- GPT-5.3-Codex-Spark -->
<div class="model-card">
<div class="model-banner">gpt-5.3-codex-spark</div>
<div class="model-body">
<p class="model-desc" data-i18n="m3_f">텍스트 전용 리서치 프리뷰 모델. 거의 즉각적인 실시간 코딩 반복에 최적화되었으며 ChatGPT Pro
사용자에게 제공됩니다.</p>
<div class="model-cmd">codex -m gpt-5.3-codex-spark</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Cloud</span><span class="check-no">❌</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-no">❌</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-no">❌</span></div>
</div>
</div>
</div>
</div>
<div class="callout">
<p data-i18n="s3_rec_note">💡 최신 `codex/models` 기준 공식 가이드는 모델 선택기에서 `gpt-5.5`가 보이면 대부분의 작업을 거기서 시작하라고 권장합니다. 아직 rollout되지 않았거나 API key 경로라면 `gpt-5.4`를 계속 사용하면 됩니다. 더 빠르고 가벼운 코딩 작업이나 subagent에는 `gpt-5.4-mini`, 복잡한 소프트웨어 엔지니어링과 현재 Codex Cloud에는 `gpt-5.3-codex`, 거의 즉각적인 반복에는 `gpt-5.3-codex-spark`를 검토하세요. 현재 대표 대안 모델은 `gpt-5.2`입니다.</p>
</div>
<h4 data-i18n="s3_alt_title">🔄 대안 모델</h4>
<div class="model-grid">
<!-- GPT-5.2 -->
<div class="model-card collapsible">
<div class="model-banner">gpt-5.2</div>
<div class="model-body">
<p class="model-desc" data-i18n="m4_f">코딩과 에이전틱 작업 전반을 위한 이전 범용 모델. 현재는 `gpt-5.5`/`gpt-5.4` 조합 아래의 대안 모델로 보는 편이 맞습니다.</p>
<div class="model-cmd">codex -m gpt-5.2</div>
<div class="model-features">
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_cap">Capability</span><span class="model-feat-value"><span
class="dot-filled">✦</span><span class="dot-filled">✦</span><span
class="dot-filled">✦</span><span class="dot-filled">✦</span></span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_spd">Speed</span><span class="model-feat-value"><span
class="dot-filled">⚡</span><span class="dot-filled">⚡</span><span
class="dot-filled">⚡</span></span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cli">Codex
CLI & SDK</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_app">Codex
app & IDE extension</span><span class="check-yes">✅</span></div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_cloud">Codex
Web</span><span class="check-no">❌</span></div>
<div class="model-feat-row"><span class="model-feat-label"
data-i18n="feat_credits">ChatGPT Credits</span><span class="check-yes">✅</span>
</div>
<div class="model-feat-row"><span class="model-feat-label" data-i18n="feat_api">API
Access</span><span class="check-yes">✅</span></div>
</div>
</div>
<button class="model-toggle" data-i18n="model_show">Show details</button>
</div>
</div>
<div class="callout">
<p data-i18n="s3_other_note">⚠️ Codex는 위 모델들과 가장 잘 작동합니다. Chat Completions 또는 Responses API를 지원하는 다른
모델도 사용 가능하지만, Chat Completions API 지원은 향후 제거 예정입니다.</p>
</div>
<h4 data-i18n="s3_cfg_title">🛠️ 모델 설정 팁</h4>
<div class="callout">
<p data-i18n="s3_cfg_default">config.toml에서 기본 모델을 설정할 수 있습니다. 지정하지 않으면 추천 모델이 기본값입니다.</p>
</div>
<pre><code>model = "gpt-5.5"</code></pre>
<div class="callout">
<p data-i18n="s3_cfg_temp">CLI에서 <code>/model</code> 명령 또는 <code>codex -m 모델명</code> 플래그로 임시 변경 가능.
IDE에서는 입력창 아래 모델 선택기 사용.</p>
</div>
<pre><code>codex -m gpt-5.5</code></pre>
<div class="callout">
<p data-i18n="s3_cfg_cloud">Codex 클라우드 작업의 기본 모델은 현재 변경할 수 없습니다.</p>
</div>
</section>
<!-- Section 3 -->
<section class="section" id="s4">
<h2><span class="section-num">04</span> <span data-i18n="s4_title">시스템 요구사항 & 가격</span></h2>
<div class="two-col">
<div>
<h3 data-i18n="s4_req_title">시스템 요구사항</h3>
<div class="table-wrap">
<table>
<tbody>
<tr>
<td><strong>OS</strong></td>
<td>macOS 12+, Ubuntu 20.04+, Windows 11 권장 / 최신 Windows 10은 best-effort (CLI: PowerShell or WSL, IDE agent mode: WSL, App: Native)</td>
</tr>
<tr>
<td><strong>Node.js</strong></td>
<td>v18+</td>
</tr>
<tr>
<td><strong>Git</strong></td>
<td data-i18n="s4_git">강력히 권장</td>
</tr>
<tr>
<td data-i18n="s4_acct_label"><strong>계정</strong></td>
<td>ChatGPT Free / Go / Plus / Pro / Business / Edu / Enterprise</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 data-i18n="s4_price_title">ChatGPT 구독 요금</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th data-i18n="th_plan">플랜</th>
<th data-i18n="th_price">가격</th>
<th data-i18n="th_codex">Codex 범위</th>
</tr>
</thead>
<tbody>
<tr>
<td>Free</td>
<td>$0</td>
<td data-i18n="s4_codex_free">빠른 코딩 작업 위주의 Codex 탐색</td>
</tr>
<tr>
<td>Go</td>
<td>$8/mo</td>
<td data-i18n="s4_codex_go">가벼운 코딩 작업을 위한 저가형 Codex 사용</td>
</tr>
<tr>
<td>Plus</td>
<td>$20/mo</td>
<td data-i18n="s4_codex_plus">웹/CLI/IDE/iOS + 최신 모델 + 클라우드 리뷰/Slack + credits 확장</td>
</tr>
<tr>
<td>Pro</td>
<td>From $100/mo</td>
<td data-i18n="s4_codex_pro">Spark 리서치 프리뷰 + 우선 처리 + Pro `$100` 10x / Pro `$200` 20x(+한시적 25x) + 더 큰 코드 리뷰 범위</td>
</tr>
<tr>
<td>Business</td>
<td>Pay as you go</td>
<td data-i18n="s4_codex_business">표준 Business seat 또는 Codex-only pay-as-you-go seat + 더 큰 VM + credits + SAML SSO/MFA</td>
</tr>
<tr>
<td>Enterprise & Edu</td>
<td data-i18n="s4_custom">맞춤 / credits</td>
<td data-i18n="s4_codex_enterprise">Business 포함 + Codex-only pay-as-you-go 가능 + 우선 처리 + RBAC/감사/거버넌스</td>
</tr>
<tr>
<td>API Key</td>
<td data-i18n="s4_usage_based">토큰 사용량 기반</td>
<td data-i18n="s4_codex_api">CLI/IDE/SDK 전용, 클라우드 기능 없음, 최신 모델 접근 지연 가능</td>
</tr>
</tbody>
</table>
</div>
<p class="callout-inline" data-i18n="s4_note_access">현재 공식 문서는 모든 ChatGPT 플랜에 Codex가 포함된다고 설명합니다. 개인 사용자는 `Free $0`, `Go $8`, `Plus $20`, `Pro from $100` 기준을 먼저 보면 되고, Pro는 현재 `$100` tier가 2026년 5월 31일까지 10x, `$200` tier가 상시 20x에 같은 날짜까지 25x 5시간 한도 부스트를 반영합니다. 팀은 Business·Enterprise에서 Codex-only pay-as-you-go seat, 최대 `$500` 크레딧 프로모션, 그리고 현재 새/기존 Business와 신규 Enterprise부터 적용되는 토큰 기반 과금 전환 범위를 함께 확인해야 정확합니다. 가격 페이지는 모델별 5시간 로컬/클라우드 한도, 주간 코드 리뷰 범위, 플랜별 크레딧 소비 구조를 보여주며, `gpt-5.4-mini`는 Plus 기준 GPT-5.4보다 최대 3.3배까지 더 넓은 로컬 메시지 한도를 보여주는 선택지로 제시됩니다. 또 내장 이미지 생성은 일반 Codex 한도를 평균 3-5배 더 빠르게 쓰고, Fast mode는 적용 모델에서 크레딧을 2배 더 소모합니다. 실제 체감 한도는 항상 Codex Pricing과 usage dashboard를 같이 확인하세요.</p>
</div>
</div>
</section>
<!-- Section 4 -->
<section class="section" id="s5">
<h2><span class="section-num">05</span> <span data-i18n="s5_title">설치 및 인증</span></h2>
<div class="code-tabs">
<article class="setup-block">
<h3 data-i18n="s5_cli_install">CLI 설치</h3>
<pre data-i18n-html="code_s5_install"><code><span class="c"># npm</span>
npm install -g @openai/codex
<span class="c"># Homebrew (macOS)</span>
brew install codex
<span class="c"># Update</span>
npm update -g @openai/codex</code></pre>
</article>
<article class="setup-block">
<h3 data-i18n="s5_auth">인증</h3>
<pre data-i18n-html="code_s5_auth"><code><span class="c"># ChatGPT 계정 로그인 (권장)</span>
codex login
<span class="c"># 또는 API 키 사용</span>
export OPENAI_API_KEY="your-api-key-here"</code></pre>
</article>
<article class="setup-block">
<h3 data-i18n="s5_app_install">Desktop App 설치 (macOS/Windows)</h3>
<ol class="setup-steps">
<li data-i18n="s5_app1">macOS: openai.com/codex 에서 다운로드 (.dmg)</li>
<li data-i18n="s5_app2">Windows: Microsoft Store에서 설치하거나 `winget install Codex -s msstore` 사용</li>
<li data-i18n="s5_app3">앱 실행 후 ChatGPT 계정 또는 API 키로 로그인 (API 키 로그인은 cloud threads와 일부 credits 기반 기능이 제한될 수 있음)</li>
</ol>
<div class="callout waitlist-box">
<div class="setup-meta" aria-hidden="true">
<span class="setup-chip" data-i18n="s5_waitlist_tag">Windows App</span>
<span class="setup-chip" data-i18n="s5_waitlist_scope">지원 범위는 수시 변경</span>
</div>
<p data-i18n="s5_waitlist_text">업데이트: Windows에서는 Codex 앱이 가장 쉬운 기본 경로입니다. Microsoft Store나 `winget`로 설치할 수 있고, `elevated` Windows sandbox가 기본 권장값이며 `unelevated`는 차선책입니다. 네이티브 성능이 중요하면 Windows sandbox를, Linux 툴체인이 중요하면 WSL2를 고르고, 앱에서 agent를 WSL로 전환할 때는 재시작이 필요합니다.</p>
<a href="https://developers.openai.com/codex/app/windows" target="_blank" class="btn btn-secondary"
data-i18n="s5_waitlist_btn">Windows App 공식 문서 보기</a>
</div>
</article>
<article class="setup-block">
<h3 data-i18n="s5_vsc_install">IDE Extension 설치</h3>
<ol class="setup-steps">
<li data-i18n="s5_vsc1">VS Code/Cursor/Windsurf는 확장을 설치하고, JetBrains는 전용 통합을 사용합니다. JetBrains 쪽은 ChatGPT, API 키, JetBrains AI 로그인 방식을 지원합니다.</li>
<li data-i18n="s5_vsc2">설치 후 사이드바에서 Codex 패널 활성화</li>
<li data-i18n="s5_vsc3">ChatGPT 계정으로 인증</li>
</ol>
</article>
</div>
</section>
<!-- Section 5 -->
<section class="section" id="s6">
<h2><span class="section-num">06</span> <span data-i18n="s6_title">Codex CLI 사용법</span></h2>
<figure class="screenshot">
<img src="images/codex_cli.png" alt="Codex CLI v0.104 running in terminal" loading="lazy" />
<figcaption data-i18n="img_cli">Codex CLI — 터미널 기반 에이전틱 코딩 워크플로
</figcaption>
</figure>
<pre data-i18n-html="code_s6_usage"><code><span class="c"># 인터랙티브 모드</span>
codex
<span class="c"># 프롬프트와 함께</span>
codex "explain this codebase"
<span class="c"># 특정 디렉토리</span>
codex --cd /path/to/project
<span class="c"># 파일 참조</span>
@src/components/Button.tsx 리팩토링해줘
<span class="c"># 쉘 명령어 실행</span>
!npm test</code></pre>
</section>
<!-- Section 6 -->
<section class="section" id="s7">
<h2><span class="section-num">07</span> <span data-i18n="s7_title">Codex App (macOS + Windows)</span></h2>
<figure class="screenshot">
<img src="images/codex_app.png" alt="Codex Desktop App interface" loading="lazy" />
<figcaption data-i18n="img_app">Codex Desktop App — 멀티에이전트 커맨드 센터와 워크트리 관리</figcaption>
</figure>
<p data-i18n="s7_intro">Codex App은 여러 프로젝트를 넘나들며 병렬 agent thread를 운영하고, built-in Git와 integrated terminal로 결과를 리뷰하며, chats·artifact preview·computer use·in-app browser·image generation·memories·thread automations를 한곳에서 다루는 데 가장 적합한 데스크톱 표면입니다. 최신 App 문서와 2026년 4월 업데이트 기준으로 multiple terminal tabs, richer summary/sidebar, 더 넓어진 plugins, SSH devbox 흐름까지 함께 보는 것이 현재 상태에 가깝고, 로컬 작업은 기본적으로 cached web search를 쓰며 Windows에서는 네이티브 sandbox 또는 WSL2 경로를 선택할 수 있습니다.</p>
<h3 data-i18n="s7_modes_title">쓰레드 모드</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th data-i18n="th_mode">모드</th>
<th data-i18n="s7_th_where">실행 위치</th>
<th data-i18n="s7_th_desc">설명</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Local</strong></td>
<td data-i18n="s7_mode_local_where">내 맥</td>
<td data-i18n="s7_mode_local">현재 프로젝트 디렉토리에서 직접 작업</td>
</tr>
<tr>
<td><strong>Worktree</strong></td>
<td data-i18n="s7_mode_wt_where">내 맥</td>
<td data-i18n="s7_mode_wt">Git Worktree로 변경사항 격리. 병렬 작업에 적합</td>
</tr>
<tr>
<td><strong>Cloud</strong></td>
<td data-i18n="s7_mode_cloud_where">클라우드</td>
<td data-i18n="s7_mode_cloud">원격 클라우드 환경에서 실행</td>
</tr>
</tbody>
</table>
</div>
<h3 data-i18n="s7_feat_title">핵심 기능</h3>
<div class="feature-list">
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f1">멀티에이전트 병렬
실행</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f2">내장 Git
도구 (diff, commit, PR)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_skills">Skills & Plugins 지원</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_auto">Automations
(정기 작업 자동화)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_voice">Voice
Dictation (Ctrl+M)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_float">플로팅 팝아웃
창</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_sync">IDE
Extension 실시간 동기</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_img">이미지 입력 (Drag
& Drop)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_browser">In-app browser와 브라우저 코멘트</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_computer">Computer use (GUI 조작)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_imagegen">이미지 생성/편집</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_memory">Memories & thread automations</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_term">내장 터미널
(쓰레드별)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s7_f_sleep">작업 중 절전
방지</span></div>
</div>
<h3 data-i18n="s7_playbook_title">이번 대규모 업데이트 기능 실전 가이드</h3>
<p class="callout-inline" data-i18n="s7_playbook_intro">아래 블록은 단순 소개가 아니라 “언제 쓰고, 어떻게 시작하고, 무엇을 주의해야 하는지”를 기능별로 압축한 실전 챕터입니다. 이번 릴리스에서 중요도가 큰 기능부터 읽으면 됩니다.</p>
<div class="overview-visual-card computer-use-spotlight" id="s7-computer-use">
<div class="overview-visual-copy">
<p class="overview-action-kicker" data-i18n="computer_use_kicker">Computer use</p>
<h3 data-i18n="computer_use_title">Computer use를 하나의 기능 챕터로 이해하기</h3>
<p data-i18n="computer_use_desc">공식 문서 기준으로 `gpt-5.4`는 첫 mainline built-in computer use 모델입니다. 즉, 화면을 보고 다음 행동을 정하고, 클릭이나 입력을 실행하고, 바뀐 화면을 다시 확인하는 루프를 모델 자체가 더 잘 돌 수 있게 됐다는 뜻입니다.</p>
<ul class="overview-list">
<li data-i18n="computer_use_p1">단순 채팅형 답변보다 “직접 UI를 보면서 작업”하는 자동화에 더 잘 맞습니다.</li>
<li data-i18n="computer_use_p2">핵심 흐름은 `screenshot → action → screenshot → verify/fix` 입니다.</li>
<li data-i18n="computer_use_p3">브라우저 테스트, 폼 입력, 단계가 많은 업무 플로우 검증에서 특히 설명이 쉬워집니다.</li>
<li data-i18n="computer_use_p4">`Plugins`가 외부 서비스를 연결하는 도구 상자라면, `computer use`는 눈과 손으로 화면을 직접 다루는 기능에 가깝습니다.</li>
<li data-i18n="computer_use_p5">`Skills`는 일을 하는 방법을 설명하는 설명서이고, `computer use`는 그 설명서를 따라 실제 버튼을 누르고 입력하는 실행 수단입니다.</li>
</ul>
<a href="https://developers.openai.com/api/docs/guides/tools-computer-use" target="_blank" class="btn btn-secondary" data-i18n="computer_use_cta">공식 Computer use 가이드 보기</a>
</div>
<figure class="overview-visual-figure">
<img class="overview-lang-visual overview-lang-visual-ko" src="images/computer_use_ko.png" alt="Korean explainer for GPT-5.4 computer use" loading="lazy" />
<img class="overview-lang-visual overview-lang-visual-en" src="images/computer_use_openai_en.png" alt="OpenAI computer use diagram" loading="lazy" />
<figcaption data-i18n="computer_use_caption">영어는 OpenAI 공식 다이어그램, 한국어는 이해를 돕기 위한 설명 그림입니다.</figcaption>
</figure>
</div>
<div class="tip-grid">
<div class="tip-card" id="s7-browser">
<h4 data-i18n="s7_pb_browser_t">In-app browser</h4>
<p data-i18n="s7_pb_browser_d">로컬 개발 서버나 공개 페이지를 렌더 상태 그대로 검토할 때 씁니다. 로그인 없는 URL만 열고, 브라우저 코멘트로 특정 요소를 찍은 뒤 “이 코멘트만 반영해 달라”고 좁게 요청하는 흐름이 가장 안정적입니다.</p>
</div>
<div class="tip-card" id="s7-image-generation">
<h4 data-i18n="s7_pb_image_t">Image generation</h4>
<p data-i18n="s7_pb_image_d">배너, 배경, UI 목업 자산, 일러스트를 코드 작업과 같은 thread에서 바로 만들거나 수정할 때 적합합니다. 작은 단위 자산은 내장 기능으로, 대량 생성이나 비용 분리는 API 키 경로로 넘기는 식으로 구분하면 좋습니다.</p>
</div>
<div class="tip-card" id="s7-memories">
<h4 data-i18n="s7_pb_memory_t">Memories</h4>
<p data-i18n="s7_pb_memory_d">반복해서 설명하는 선호, 스택, 프로젝트 관례를 Codex가 다시 기억하게 할 때 유용합니다. 다만 팀의 필수 규칙은 여전히 `AGENTS.md`에 두고, memory는 개인 리콜 레이어로 쓰는 것이 공식 권장 흐름입니다.</p>
</div>
<div class="tip-card" id="s7-thread-automations">
<h4 data-i18n="s7_pb_thread_t">Thread automations</h4>
<p data-i18n="s7_pb_thread_d">같은 대화 문맥을 유지한 채 주기적으로 다시 깨워야 하는 작업에 씁니다. 긴 실행 상태 확인, PR 댓글 재점검, Slack/GitHub 폴링처럼 “이전 대화의 맥락”이 중요한 경우에 project automation보다 thread automation이 맞습니다. 현재 문서 기준으로 thread automation은 분 단위 간격이나 일/주간 스케줄에 잘 맞습니다.</p>
</div>
<div class="tip-card" id="s7-plugins">
<h4 data-i18n="s7_pb_plugin_t">Plugins</h4>
<p data-i18n="s7_pb_plugin_d">skills, app integrations, MCP server를 묶어 배포하는 단위입니다. 반복 프롬프트가 안정화된 뒤 팀에 공유할 때 plugin으로 올리고, 설치 후에는 작업 설명만 하거나 `@plugin`으로 특정 workflow를 직접 호출하는 방식이 좋습니다.</p>
</div>
</div>
</section>
<!-- Section 7 -->
<section class="section" id="s8">
<h2><span class="section-num">08</span> <span data-i18n="s8_title">Codex IDE Extension</span></h2>
<figure class="screenshot">
<img src="images/codex_IDE.png" alt="Codex VS Extension marketplace page" loading="lazy" />
<figcaption data-i18n="img_ide">Codex VS Extension — 마켓플레이스 (4.6M+ 다운로드)</figcaption>
</figure>
<p data-i18n="s8_intro">VS Code, Cursor, Windsurf, JetBrains IDE에 통합되는 AI 코딩 에이전트입니다. 일반적으로 설치 후 Agent mode가 기본이며, JetBrains 통합은 ChatGPT 계정, API 키, JetBrains AI로 로그인할 수 있습니다. 현재 공식 문서는 IDE 통합이 macOS·Windows·Linux에 걸쳐 제공된다고 설명하지만, Windows에서 agent mode 안정성을 우선하면 여전히 WSL2 워크스페이스가 가장 무난한 경로입니다.</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th data-i18n="th_mode">모드</th>
<th data-i18n="th_file_access">파일 접근</th>
<th data-i18n="th_edit">코드 수정</th>
<th data-i18n="th_exec">명령 실행</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Chat</strong></td>
<td data-i18n="s8_chat_file">△ 수동 컨텍스트만 (@file/열린 파일/선택 영역)</td>
<td>❌</td>
<td>❌</td>
</tr>
<tr>
<td><strong>Agent</strong></td>
<td>✅</td>
<td data-i18n="s8_approval">✅ (승인 필요)</td>
<td data-i18n="s8_approval2">✅ (승인 필요)</td>
</tr>
<tr>
<td><strong>Agent (Full Access)</strong></td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
</tr>
</tbody>
</table>
</div>
<p class="callout-inline" data-i18n="s8_mode_note">Chat 모드는 자동으로 파일을 탐색/수정하지 않지만, @file·열린 파일·선택 영역을
컨텍스트로 포함해 질문할 수 있습니다.</p>
<h3 data-i18n="s8_key_title">핵심 기능</h3>
<div class="feature-list">
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s8_f_context">@file
에디터 컨텍스트 자동 참조</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s8_f_cloud">클라우드 위임
(Cloud Delegation)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s8_f_effort">추론 노력 조절
(low/medium/high/xhigh)</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span
data-i18n="s8_f_jetbrains">JetBrains
IDE 지원</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s8_f_cursor">Cursor,
Windsurf 호환</span></div>
<div class="feature-item"><span class="feature-icon">—</span><span data-i18n="s8_f_sync">App 실시간 동기
(Auto Context)</span></div>
</div>
</section>
<!-- Section 8 -->
<section class="section" id="s9">
<h2><span class="section-num">09</span> <span data-i18n="s9_title">Codex Web (ChatGPT
대시보드)</span></h2>
<figure class="screenshot">
<img src="images/codex_cloud.png" alt="Codex Web Dashboard in ChatGPT" loading="lazy" />
<figcaption data-i18n="img_cloud">Codex Web - ChatGPT 웹 대시보드에서 GitHub 연동 작업</figcaption>
</figure>
<p data-i18n="s9_intro">ChatGPT 웹의 `chatgpt.com/codex`에서 GitHub 환경을 연결하고 클라우드 코딩 작업을 실행할 수 있습니다. PR 댓글에서 `@codex`로 위임하거나, 브라우저에서 바로 diff를 보고 PR을 만들 수 있습니다.</p>
<div class="steps">
<div class="step"><span class="step-num">1</span><span data-i18n="s9_s1">GitHub 계정 연결 → 레포 선택</span>
</div>
<div class="step"><span class="step-num">2</span><span data-i18n="s9_s2">작업 설명 입력</span></div>
<div class="step"><span class="step-num">3</span><span data-i18n="s9_s3">클라우드 샌드박스에서 자동 작업</span>
</div>
<div class="step"><span class="step-num">4</span><span data-i18n="s9_s4">결과 diff 확인</span></div>
<div class="step"><span class="step-num">5</span><span data-i18n="s9_s5">GitHub PR로 제안 또는 머지</span>
</div>
</div>
<div class="callout">
<strong data-i18n="s9_auto_title">자동 코드 리뷰</strong>
<p data-i18n="s9_auto_desc">Codex Web에서 GitHub 연결 후 리뷰 대상 저장소를 선택하고 "Automatic reviews"를 활성화하면 새
PR마다 자동 리뷰됩니다. AGENTS.md 규칙 기반 커스터마이징 가능.</p>
</div>
</section>
<!-- Section 9 -->
<section class="section" id="s10">
<h2><span class="section-num">10</span> <span data-i18n="s10_title">승인 + 샌드박스 조합</span></h2>
<div class="table-wrap">
<table>
<thead>
<tr>
<th data-i18n="th_mode">모드</th>
<th data-i18n="th_read">파일 읽기</th>
<th data-i18n="th_write">파일 수정</th>
<th data-i18n="th_exec">명령 실행</th>
<th data-i18n="th_net">네트워크</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Read-only</strong>
</td>
<td>✅</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
</tr>
<tr>
<td><strong>Auto</strong> <span class="badge" data-i18n="default_badge">기본</span></td>
<td>✅</td>
<td>✅</td>
<td>✅</td>
<td>❌</td>
</tr>
<tr>
<td><strong>Workspace-write + untrusted</strong></td>
<td>✅</td>
<td>✅</td>
<td>△ trusted commands only</td>
<td>❌</td>