최근, VS Code 상에서 Codex를 사용하며 자신만의 네트워킹 Hub 사이트를 구축하고 있습니다.

이번에는 VS Code의 Codex 확장 기능(Extension)을 이용해, AI와 대화하며 HTML/CSS를 조정하는 방식으로 개발을 진행했습니다.

처음에는,

AI로 구현하면 상당히 편해질 것이다

라고 생각했습니다.

실제로 그 기대는 틀리지 않았습니다.

HTML이나 CSS의 수정 속도는 올라가고, 시행착오의 사이클도 상당히 고속화됩니다.

다만, 실제로 사용해보며 강하게 느낀 것은,

구현보다 인식 맞추기에 시간을 썼다

는 것이었습니다.

그리고 그 이유는,

AI와 인간은 같은 것을 보고 있지 않기

때문이었습니다.

예를 들어 UI를 조정할 때, 인간은 겉모습이나 감각으로 판단합니다.

• 뭔가 어긋나 있다
• 조금 더 오른쪽으로
• 경계선에 맞추고 싶다
• 밸런스가 나쁘다

이러한 표현은 인간끼리라면 통할 때가 있습니다.

반면 AI는,

• DOM 구조
• CSS
• margin
• padding
• flex
• 수치

를 기준으로 인식하고 있습니다.

즉, 같은 화면을 보고 있어도,

인간은 "겉모습"을 보고 있고,

AI는 "구조"를 보고 있는 것입니다.

예를 들어 프로필 이미지의 위치를 조정하고 있었을 때입니다.

처음에는,

프로필 이미지 아래쪽을 약간 위로 올려서, intro 영역과 cover 이미지의 경계에 배치하고 싶다

라고 전달했습니다.

의미는 전달되는 듯했지만, 미묘하게 어긋납니다.

몇 번이나 수정해도 제 이미지와 일치하지 않았습니다.

그래서 DevTools를 사용하여 직접 위치 조정을 시도해 보았습니다.

그러자,

profile-icon을 margin-top:-170px로 설정하면 딱 경계에 겹친다

라는 상태를 확인할 수 있었습니다.

그 수치를 그대로 전달하자, 단번에 정밀도가 올라갔습니다.

이때 깨달은 것은,

인간 측도 AI에게 전달되는 형식으로 번역할 필요가 있다

는 것이었습니다.

나아가, 예전부터 몇 번이고 마주해온 문제와도 재회했습니다.

Hero 이미지입니다.

예를 들어,

윈도우 사이즈에 맞춰서 예쁘게 표시하고 싶다

라고 생각합니다.

하지만 실제로는,

• 전체를 보여주면 여백이 생긴다
• 여백을 없애면 이미지가 잘린다

라는 문제가 발생합니다.

처음에는,

AI라면 이 문제도 해결해 주지 않을까?

라고 생각했습니다.

하지만 결국 이것은,

종횡비(Aspect Ratio)라는 물리적인 제약

이었습니다.

아이콘 위치 조정에서도,

Hero 이미지 설계에서도,

문제의 종류는 달라 보여도,

공통된 점은

인간의 감각을 AI가 이해할 수 있는 형태로 변환해야 했다

는 것이었습니다.

AI는 코드 생성을 지원할 수 있습니다.

하지만 가로가 긴 이미지와 세로가 긴 스마트폰의 비율 차이 그 자체를 없앨 수는 없습니다.

결과적으로,

• 브레이크포인트(Breakpoint)마다 이미지를 준비한다
• 레이아웃을 전환한다

라는 기존의 설계 방식으로 돌아왔습니다.

이번 체험을 통해 보인 것은,

AI와 협업하려면 인식 번역이 필요하다

는 것이었습니다.

인간은 감각으로 생각합니다.

AI는 구조로 생각합니다.

따라서,

감각을 구조로 변환하는 공정이 필요해집니다.

지금까지의 체험을 정리하면,

인간과 AI의 역할은 다음과 같이 파악될 수 있을지도 모릅니다.

이번에 Codex를 사용하며 느낀 것은,

AI는 "모든 것을 자동으로 해결해 주는 마법"이 아니라,

인간의 시행착오를 고속화하는 존재

라는 것이었습니다.

특히,

• 구현 속도
• 가설 검증
• 수정 사이클

은 크게 가속됩니다.

반면,

• 물리적 제약
• 인간의 시각 인지
• 정보 밀도
• UI의 감각

과 같은 부분은 여전히 인간 측의 설계나 판단이 중요합니다.

이번 체험을 통해,

AI 시대일수록 "감각을 구조로 번역하는 능력"이 중요해질 것이라고

느꼈습니다.

이는 UX나 디자인의 역할과도 비슷할지도 모릅니다.

AI는 코드를 본다.

인간은 감각으로 본다.

그렇기에,

그 사이를 잇는 사람이 필요하다.

이번에 되돌아보니,

제가 시간을 쓰고 있었던 것은 구현이 아니라,

인식 맞추기였습니다.

AI 시대는 구현 비용을 크게 낮춰줍니다.

그와 동시에,

• 무엇을 만들 것인가
• 어떻게 있어야 하는가
• 위화감을 어떻게 전달할 것인가

와 같은 인식 번역의 가치는,

오히려 높아질지도 모릅니다.

그런 점을 Codex로 사이트를 만들며 다시금 느꼈습니다.

• VS Code
• Codex (VS Code Extension)
• HTML
• CSS
• Vanilla JavaScript
• GitHub Pages

이번 기사에서 다룬 Hub 사이트는 이쪽입니다.

• Site:

• Repository:

🌾 본 기사의 문장 정리 및 도식 작성에는 ChatGPT를 보조로 활용하였습니다.