기능은 "되나 안 되나"인데, 편의성은 정답이 없다 — 비개발자가 UI를 열여섯 번 고쳐본 주

한 줄 요약: 9주 동안 “무엇을 담을까”만 생각했지 “어떻게 읽힐까”는 생각한 적이 없었다. 이번 주에 처음 손대봤더니, 기능 추가보다 훨씬 어려웠다. 코딩을 모르는 사람이 UI를 다섯 번 뒤엎으며 배운 것을 정리한 글이다.

이런 분께 도움이 돼요: AI에게 그림·디자인을 시켰는데 계속 원하는 게 안 나오는 분, 만들어놓고 “이게 맞나?” 싶은데 되돌리기는 아까운 분, 그리고 자료는 쌓이는데 읽히지는 않는 문서를 갖고 계신 분.

Before → After

배운 것 ① — “시각자료 추가해줘”라고 하면 시각자료가 안 온다

첫 프롬프트는 이거였다.

“지금 학습 위키에 있는거 말이야 svg 파일로 시각적 자료 좀 추가해 줄라?”

돌아온 건 용어를 5갈래로 나눈 분류 카드였다. 틀린 건 아니다. 그것도 시각자료다. 그런데 내가 원한 건 그게 아니었다.

“나는 HBM하면 HBM 모형을 갖고 와달라 그 뜻이었는데..”

말 안 해도 알 거라고 생각한 게 문제였다. 나에게 “시각자료”는 개념이 실제로 어떻게 생겼는지 그린 그림이었는데, 그 말 안에 그 뜻이 안 들어 있었다.

💡 머릿속 그림은 프롬프트에 안 담긴다. “시각자료”, “정리해줘”, “깔끔하게” 같은 말은 나에게만 구체적이다. 결과물이 엉뚱하면 AI가 못 알아들은 게 아니라 내가 덜 말한 것이다.

배운 것 ② — 분류 기준이 두 개면, 둘 다 안 보인다

분류 카드를 일단 붙여봤다. 클릭하면 해당 칸으로 가게까지 만들었고, 그림이 목차 역할을 하니 우측 목차는 껐다. 기능적으로는 완성이었다.

그런데 완성된 화면을 보고 있으려니 이상했다.

“근데 지식 지도하고 용어 지도하고 뭔가 겹쳐보이네…”

이미 지식 지도가 밸류체인 기준으로 용어를 나눠놨는데, 새로 만든 용어 지도는 그날 내가 즉흥으로 잡은 5분류로 같은 용어를 또 나누고 있었다. 같은 단어가 두 그림에서 서로 다른 칸에 들어가 있는 셈이다. 어느 쪽이 맞는지 나조차 헷갈렸다.

그래서 하루 만에 통째로 되돌렸다. SVG 3개(444줄) 삭제, 사전 3개 원복, 목차 복구.

💡 새 시각자료를 만들 땐 이미 있는 분류를 재사용한다. 독자적인 분류를 하나 더 만들면, 자료가 두 배로 늘어나는 게 아니라 둘 다 신뢰를 잃는다.

💡 편하게 하려고 만든 게 불편하면, 아까워도 뺀다. 판단 기준은 “잘 만들었나”가 아니라 “보는 사람이 편한가”다. 되돌린 비용(하루)보다, 틀어진 기준 위에 계속 쌓는 비용이 크다.

배운 것 ③ — 그래서 프롬프트를 이렇게 바꿨다 (재사용 자산)

②에서 얻은 교훈으로 다시 요청했다. 이번엔 원하는 걸 전부 적었다.

반도체 용어사전을 읽고, 그림이 있으면 이해하기 쉬운 항목을 골라 SVG 그림을 만들어 삽입해줘.

먼저 3개 항목부터 진행해줘. 구조·공정·작동 원리처럼 그림이 도움이 되는 항목을
우선하고, 단순한 뉴스 동향에는 억지로 그림을 넣지 마.

참고 사진은 내가 따로 제공하지 않을 거야. 기술적 내용은 제조사 등 공식 자료를
확인하고, 그 내용을 바탕으로 새로운 설명용 그림을 그려줘. 기존 글에 오류가 있으면
그림에 그대로 반영하지 말고 알려줘.

그림은 한글 라벨, 흰 배경, 통일된 색상과 글꼴로 제작해줘. 칩 구조는 단면이나
입체 그림으로, 작동 원리는 흐름 그림으로 표현해줘. 각 그림에 "구조 이해를 위한
개념도" 같은 적절한 캡션과 참고 자료 링크를 붙여줘.

기존 public/wiki-diagrams 폴더에 SVG를 저장하고 해당 항목 아래에 삽입해줘.
모바일에서도 글자가 읽히고 잘리지 않는지 미리보기로 확인해줘.

첫 프롬프트(“시각적 자료 좀 추가해 줄라?”)와 비교하면 길이가 20배다. 그리고 결과물은 한 번에 원하는 게 나왔다.

이 프롬프트가 담고 있는 것을 항목으로 풀면 이렇다. 다른 주제에도 그대로 쓸 수 있는 틀이다.

배운 것 ④ — 그림은 넣은 뒤가 진짜 일이다

프롬프트를 잘 써서 그림은 한 번에 나왔다. 그런데 거기서 네 번을 더 고쳤다.

세 번째는 내가 이렇게 부탁해서 생긴 기능이다.

“그림 크기 마음에 들어 근데 그림을 크게 보는 사람들도 있을 거 아니야 그 친구들을 위해서 클릭하면 크게 보여주는 기능도 추가해주면 안 될까?”

작게 하면 안 읽히고 크게 하면 칸을 넘는다. 둘 중 하나를 고르는 대신 둘 다 주는 방법이 있었다.

💡 증상이 난 곳이 아니라 원인이 있는 곳을 고친다. 모바일에서 페이지가 밀린 건 그림 문제가 아니라 그리드 문제였다. 그림 16장의 폭을 하나씩 깎았으면 다음 그림에서 또 터졌다.

💡 “기능은 추가하면 되는데, UI/UX는 사소해 보이는데도 어렵다.” 라이트박스가 되는지는 명확하다. 그런데 “이 그림이 읽히는가”는 정답이 없고, 화면 크기마다 다르고, 만든 사람 눈에는 잘 안 보인다.

배운 것 ⑤ — 기계적인 정리가 발견을 데려온다

용어가 쌓이면서 사전이 ## 항목 나열이라 길기만 했다. 그래서 부탁했다.

“용어 사전하고 이슈 노트 관련해서 지금 많이 싸이고 있으니 이제 묶어보는 것은 어떨까? 예를 들어서 에이전틱 AI라고 하면 에이전틱 AI로 나뉘는 분야로 묶는거야. 그리고 클릭하면 열고 닫고가 가능하게”

②의 교훈대로 분류는 새로 만들지 않고 지식 지도 것을 그대로 썼다. 파일 6개(용어 사전 3 + 이슈 노트 3)를 <details> 그룹으로 묶었다.

단순 작업이었는데, 묶인 결과를 훑어보다 눈에 걸린 게 있었다.

“반도체 쪽에 미분류란이 있는데 거기 일부분은 디스플레이랑 묶이는 구간이 있어 디스플레이 테마로 묶는게 어떨까”

‘미분류’ 칸에 디스플레이 용어가 10개 들어 있었다. QD-OLED, 듀얼 UTG 폴더블폰, RGB OLEDoS, 폴더블 디스플레이, OLED TV 출하량 전망… 전부 반도체가 아니었다. 뉴스 봇이 섹터를 반도체·배터리·AI 셋으로만 나누니 갈 곳 없는 디스플레이 용어가 계속 반도체 칸에 떨어지고 있었던 것이다.

• 반도체 사전·이슈 노트에 ‘디스플레이 — 별도 지도 참고’ 그룹을 만들어 10개를 꺼냈다
• 그중 지도에 없던 5개를 map-display에 편입하고, ④에 ‘시장 규모·전망’ 가지를 새로 팠다

💡 자동화가 3칸으로 나누면, 4번째 것은 영영 ‘미분류’에 쌓인다. 봇이 틀린 게 아니라 칸이 없는 것이다. 봇을 고치기 전에, 사람이 칸을 만들어주는 것으로 먼저 해결된다.

💡 정리는 정리로 끝나지 않는다. 지난주엔 링크를 눌러보다 오배정을 찾았고, 이번 주엔 묶어보다 오분류를 찾았다. 손으로 훑어야만 보이는 게 있다.

재사용 자산 — “만들었는데 아니네?”를 넘기는 루프

이번 주에 실제로 돌린 방법이다. 코딩을 몰라도 그대로 할 수 있다.

1. 작게 요청한다        → "먼저 3개 항목부터"
2. 바로 띄워서 본다      → "띄워줘봐" (미리보기)
3. 이상하면 그 자리에서 말한다 → "글자 위치 좀 신경써 줘"
4. 괜찮으면 커밋·푸시한다 → 여기까지가 한 덩어리
5. 다음 덩어리로 간다

이번 주 구조도 관련 커밋이 다섯 개인 게 이 루프 때문이다(추가 → 너비 축소 → 라이트박스 → 글자 위치 → 라벨 수정). 한 번에 완성하려 하지 않고, 매번 눈으로 봤다.

핵심은 4번이다. 괜찮은 상태마다 커밋을 남겨두면 되돌리는 게 안 무섭다. 용어 지도를 하루 만에 통째로 뺄 수 있었던 것도, 그 전 상태가 커밋으로 남아 있었기 때문이다.

체크리스트 — AI에게 그림을 시킬 때

• 무엇을 그릴지 고르는 기준을 줬나 (그리고 그리지 말 것도)
• 한 번에 다 말고 먼저 몇 개만 시켰나
• 출처를 확인하고 그리라고 했나
• 색·글꼴·배경·라벨 언어를 통일하라고 했나
• 캡션과 출처 링크를 붙이라고 했나
• 모바일에서 확인까지 시켰나
• 만든 그림이 이미 있는 분류와 겹치지 않나 ← 제일 중요

마무리

9주 동안 “무엇을 담을까”만 봤다. 뉴스를 모으고, 용어를 쌓고, 지도를 그리고. 이번 주에 처음으로 **“이게 읽히긴 하나”**를 봤는데, 기능을 붙이는 것보다 훨씬 어려웠다.

기능은 되거나 안 되거나 둘 중 하나다. 편의성은 **“됐는데, 보니까 아니네”**가 계속 나온다. 그래서 작게 커밋하고 매번 화면으로 보는 수밖에 없었다.

그리고 하루 만에 되돌린 그 그림이, 이번 주에 제일 많이 가르쳐줬다.

다음 주엔 이걸 작은 화면으로 이어간다 — 모바일 편의성, 접기 더 넣기, 글씨체와 색상 손보기.

이번 주 판단 근거는 지식 지도 분류 결정 기록에, 누적 교훈은 만들며 배운 것에 정리해두고 있어요.