재사용 조각(컴포넌트)
버튼·메뉴·카드처럼 여러 페이지에 반복되는 조각을 부품 하나로 묶어 두는 것이에요. 부품 하나를 고치면 그 부품을 쓰는 모든 화면이 함께 바뀌어요.
이런 증상으로 오셨을 거예요
버튼 색을 바꿨는데 어떤 페이지만 옛 색으로 남아 있어요. 메뉴에 항목을 하나 넣었는데 다른 페이지에는 안 나와요. 전화번호를 고쳤는데 손님이 아직 옛 번호로 전화해요. 이 세 가지는 원인이 하나예요.
| 보이는 증상 | 실제 원인 |
|---|---|
| 버튼 색을 바꿨는데 한두 페이지만 안 바뀌어요 | 같은 버튼이 페이지마다 따로 만들어져 있어요. 그중 하나만 고쳐진 상태예요 |
| 글씨체나 여백이 페이지마다 조금씩 달라요 | 위쪽 머리글과 아래쪽 정보가 페이지마다 복사돼 있고, 복사본이 조금씩 어긋났어요 |
| 메뉴에 항목을 추가했는데 어떤 페이지엔 없어요 | 메뉴가 부품이 아니라 페이지별 사본이에요. 고친 사본에만 항목이 들어갔어요 |
| 전화번호를 바꿨는데 옛 번호가 아직 보여요 | 번호가 여러 곳에 각각 적혀 있어요. 한 곳만 고친 거예요 |
| 똑같은 카드 모양인데 하나만 그림자가 없어요 | 비슷하게 보이지만 각각 따로 만들어졌어요. 만들 때 미세하게 달라진 거예요 |
| 이벤트 배너를 내렸는데 어떤 페이지엔 아직 걸려 있어요 | 배너도 페이지마다 사본이라 내린 자리만 사라졌어요 |
해결은 하나예요. 반복되는 조각을 부품 하나로 묶고, 페이지들이 그 부품을 불러다 쓰게 하는 것. 그 부품을 개발하는 사람들은 컴포넌트라고 불러요. 사장님은 그냥 부품이라고 생각하시면 돼요.
쉽게 말하면
영업시간 안내판을 다섯 곳에 손으로 써서 붙였다고 해 봐요. 시간이 바뀌면 다섯 장을 다 떼서 다시 써야 해요. 한 장을 놓치면 그 앞에 선 손님이 헛걸음하죠. 반대로 도장을 하나 새겨서 다섯 곳에 찍어 뒀다면, 도장만 다시 새기면 다섯 곳이 한 번에 바뀌어요. 부품이 그 도장이에요.
색을 바꾸려면 세 곳을 각각 고쳐야 해요. 하나 놓치면 그게 사장님이 본 그 증상이에요.
부품 색을 한 번 고치면 세 화면이 같이 바뀌어요. 놓칠 곳이 아예 없어요.
부품은 손님 눈에 안 보여요. 손님에게는 그냥 버튼이에요. 차이는 사장님이 고칠 때 드러나요. 그래서 만들 때는 두 방식이 똑같아 보이고, 두 달 뒤에 값이 완전히 달라져요.
왜 사본이 생기나
누가 잘못한 게 아니에요. 화면을 하나씩 늘려 가는 자연스러운 순서가 사본을 만들어요.
- 1첫날. 홈 화면을 만들어요. 여기에 예약 버튼이 생겨요. 아직 하나뿐이니 문제가 없어요.
- 2며칠 뒤. "메뉴 화면도 만들어주세요"라고 해요. AI는 홈과 어울리게 예약 버튼을 하나 더 그려요. 여기서 사본 두 번째가 생겨요.
- 3그다음. "오시는 길도요"에서 세 번째가 생겨요. 이 단계까지도 아무 이상이 없어요. 눈으로는 똑같으니까요.
- 4두 달 뒤. "예약 버튼을 오렌지색으로 바꿔주세요"라고 해요. 지금 보고 있던 화면의 버튼만 바뀌어요.
- 5발견. 다른 화면에서 파란 버튼을 봐요. 이게 사장님이 이 문서를 찾은 이유예요.
그러니 묶어 달라고 말하는 게 사장님 일이에요
AI는 그때그때 시킨 대로 만들어요. 묶어 달라는 말을 들은 적이 없으면 묶지 않아요. 다행히 그 말은 한 문장이면 되고, 지금 이미 만들어진 것에도 나중에 적용할 수 있어요.
이럴 때 이렇게 말하세요
전문 용어를 외울 필요가 없어요. 증상을 그대로 말하고, 뒤에 "한 군데서만 고치면 전부 바뀌게 해주세요"를 붙이면 돼요. 아래 문장은 그대로 복사해서 쓰셔도 됩니다.
| 이 증상일 때 | 이렇게 말하세요 |
|---|---|
| 버튼 색이나 문구가 화면마다 달라요 | "예약 버튼이 화면마다 따로 만들어져 있는 것 같아요. 하나로 묶어서 한 군데서만 고치면 전부 바뀌게 해주세요" |
| 메뉴를 고쳤는데 일부 화면만 바뀌어요 | "위쪽 메뉴를 공용 부품으로 만들고, 모든 화면이 같은 걸 쓰게 해주세요" |
| 아래쪽 가게 정보가 화면마다 달라요 | "아래쪽 가게 정보를 한 곳에서 관리하게 만들어주세요. 한 번 고치면 모든 화면에 반영되게요" |
| 전화번호·주소를 한 번에 바꾸고 싶어요 | "전화번호와 주소를 한 곳에 모아 두고, 화면들은 거기서 가져다 쓰게 해주세요" |
| 상품 카드 모양이 제각각이에요 | "상품 카드를 부품 하나로 만들고, 목록은 그 부품을 반복해서 쓰게 해주세요" |
| 색과 글씨 크기를 한 번에 관리하고 싶어요 | "색과 글씨 크기를 한 곳에 정리해 두고, 모든 화면이 그 값을 가져다 쓰게 해주세요" |
| 뭘 묶어야 할지 모르겠어요 | "이 화면에서 반복되는 조각이 뭔지 알려주고, 부품으로 묶을 만한 걸 추천해주세요" |
| 이미 묶여 있는지 확인하고 싶어요 | "예약 버튼이 공용 부품인지, 화면마다 따로 있는지 알려주세요" |
묶은 뒤에 한 문장 더
"모든 화면에서 똑같이 보이는지 확인해주세요"를 붙여 주세요. 묶는 과정에서 한 화면이 빠지는 일이 종종 있어요. 그리고 묶은 다음 색을 한 번 바꿔 보세요. 전부 같이 바뀌면 제대로 묶인 거예요. 확인만 하고 되돌리기로 원래대로 두면 됩니다.
| 잘 안 통하는 말 | 잘 통하는 말 |
|---|---|
| "버튼 좀 정리해주세요" | "예약 버튼을 부품 하나로 묶고, 세 화면이 그걸 쓰게 해주세요" |
| "컴포넌트화 해주세요" | "반복되는 조각을 하나로 묶어서, 한 군데만 고치면 되게 해주세요" |
| "전부 다 통일해주세요" | "버튼부터 통일해주세요" (되면 그다음에 카드, 그다음에 메뉴) |
왼쪽 말들이 안 통하는 이유는 같아요. 범위를 정해 주지 않아서 손대는 곳이 넓어지고, 안 건드려도 될 화면까지 바뀌어요. 한 번에 한 종류씩 묶는 게 안전해요. 말 거는 요령 전반은 프롬프트에 정리돼 있어요.
묶였는지 30초에 확인하는 법
코드를 열어 볼 필요가 없어요. 사장님이 직접 확인하는 방법이 있어요. 눈에 띄는 값을 일부러 한 번 바꿔 보는 것이에요.
- 1확인하고 싶은 조각을 하나 고르세요. 예약 버튼처럼 여러 화면에 있는 것이 좋아요.
- 2"예약 버튼을 빨간색으로 바꿔주세요"라고 말하세요. 일부러 튀는 색으로요. 미묘한 색은 눈으로 구분이 안 돼요.
- 3화면들을 차례로 열어 보세요. 전부 빨개졌으면 부품이고, 한 곳만 빨개졌으면 아직 사본이에요.
- 4확인이 끝나면 되돌리기로 원래 색으로 돌아가세요. 확인용으로 바꾼 것이니 그대로 두면 안 돼요.
- 5사본이었다면 그 자리에서 "하나로 묶어서 한 군데서만 고치면 전부 바뀌게 해주세요"라고 이어서 말하세요.
문 연 서비스에서는 순서를 지켜요
이미 손님이 들어오는 서비스라면 바로 공개하지 말고 미리보기에서만 확인하세요. 확인용 빨간 버튼이 실제 손님 화면에 나가면 그날 문의가 늘어요. 공개 전 점검은 출시 점검표에 정리돼 있어요.
사장님이 실제로 겪는 장면
장면 1 · 외주 개발자가 견적을 설명한다
“버튼과 카드가 화면마다 중복돼 있어서, 먼저 공용 부품으로 빼는 작업을 넣었어요. 이거 하면 앞으로 문구 수정이 반나절에서 십 분으로 줄어요.”
겉으로는 화면이 하나도 안 바뀌는 작업이라 "왜 돈을 받나" 싶을 수 있어요. 사실은 앞으로의 수정비를 미리 깎는 작업이에요. 화면이 다섯 개 넘고 앞으로도 고칠 거라면 넣는 게 맞아요. 판단이 어려우면 외주 문서를 함께 보세요.
장면 2 · 번호를 바꿨는데 옛 번호로 전화가 온다
“가게 번호가 바뀌어서 고쳐 달라고 했어요. 그런데 손님이 아직 옛 번호로 전화한다고 하네요.”
번호가 여러 곳에 적혀 있고 한 곳만 고쳐진 상태예요. 순서가 있어요. 먼저 "옛 번호가 남아 있는 곳을 전부 찾아서 바꿔주세요"로 급한 불을 끄고, 그다음에 "번호를 한 곳에서 관리하게 묶어주세요"로 재발을 막아요. 불부터 끄고 구조를 고쳐요.
장면 3 · 이벤트가 끝난 날
“행사 끝나서 배너 내려 달라고 했는데, 어떤 페이지엔 아직 할인 문구가 남아 있어요.”
기간이 있는 것은 특히 부품으로 둬야 해요. 배너·공지·가격표처럼 켰다 꺼야 하는 조각은 사본이 하나만 남아도 손님이 항의할 거리가 돼요. 다음 행사 전에 "배너를 한 곳에서 켜고 끄게 만들어주세요"라고 미리 말해 두세요.
부품으로 묶어 두면 좋은 것
| 조각 | 왜 묶나 | 안 묶으면 |
|---|---|---|
| 위쪽 메뉴 | 모든 화면에 똑같이 들어가요 | 화면을 늘릴 때마다 메뉴가 어긋나요 |
| 아래쪽 가게 정보 | 주소·번호·사업자 정보처럼 정확해야 하는 내용이에요 | 한 곳만 옛 정보로 남아요. 그게 제일 위험해요 |
| 예약·문의 버튼 | 가장 자주 색과 문구를 바꾸는 조각이에요 | 가장 자주 어긋나요 |
| 상품·메뉴 카드 | 개수가 계속 늘어나요 | 새로 넣은 상품만 모양이 달라요 |
| 안내 문구 상자 | 말투를 통일해야 믿음이 생겨요 | 화면마다 다른 목소리로 들려요 |
| 색·글씨 크기 값 | 브랜드가 여기서 흔들려요 | 비슷한 파랑이 다섯 개 섞여요 |
| 배너·공지 | 기간이 끝나면 한 번에 내려야 해요 | 지난 행사 문구가 남아요 |
마지막 두 줄이 특히 값이 커요. 색과 글씨를 한 곳에 모아 두면 "전체를 좀 더 차분한 톤으로" 같은 요청이 한 번에 먹혀요. 어떤 색과 글꼴을 쓸지는 브랜드와 글꼴에 있어요.
묶지 않는 게 나은 것
딱 한 곳에만 있는 조각은 부품으로 만들 필요가 없어요. 기준은 간단해요. 두 번 나오면 후보, 세 번 나오면 묶어요. 한 번뿐인 걸 미리 묶으면 손댈 곳만 늘어나요.
겉모습만 닮고 역할이 다른 것도 억지로 합치지 않아요. 예약 버튼과 삭제 버튼은 둘 다 버튼이지만 하는 일이 반대예요. 하나로 합쳐 두면 나중에 예약 버튼만 눈에 띄게 하려다 삭제 버튼까지 같이 커져요.
그래서 요청도 "비슷해 보이는 건 다 합쳐주세요"보다 "예약 버튼만 묶어주세요"가 안전해요. 합치는 건 쉽고 나중에 떼어내는 건 번거로워요.
부품은 힘이 세서 위험도 같이 커요
한 곳을 고쳐 전부 바뀐다는 말은, 한 번 잘못 고치면 전부 잘못된다는 말이기도 해요. 그래서 부품을 고친 뒤에는 그 부품이 쓰이는 화면을 눈으로 훑어보는 습관이 필요해요. 화면 수가 적을 때는 몇 초면 돼요.
자주 묻는 것
- Q. 부품으로 묶으면 화면 모양이 바뀌나요?
- 제대로 묶으면 손님 눈에는 그대로예요. 다만 세 화면 중 하나가 미묘하게 달랐다면 그 차이는 사라지고 하나로 통일돼요. 그게 원래 원하던 상태일 거예요. 묶은 직후에 화면을 한 번 훑어보시면 확실해요.
- Q. 묶는 데 돈이 더 드나요?
- 묶는 작업 한 번에는 비용이 들어요. 대신 다음부터 같은 수정이 한 번으로 끝나요. 화면이 세 개를 넘고 앞으로도 고칠 예정이라면 대체로 두세 번 만에 본전을 넘겨요. 화면이 한 장짜리라면 급하지 않아요.
- Q. 이미 다 만든 다음에도 묶을 수 있나요?
- 네, 나중에도 됩니다. 다만 화면이 많아질수록 묶는 작업도 커져요. 화면 다섯 개를 넘기기 전에 한 번 정리해 두는 게 가장 쌉니다.
- Q. 부품 이름을 제가 정해야 하나요?
- 정해 줄 필요는 없지만, 사장님이 부르는 이름을 그대로 말해 주면 좋아요. "예약 버튼"이라고 부르면 그 이름으로 만들어져서, 나중에 "예약 버튼 색 바꿔주세요"가 정확히 통해요. 이름이 어긋나면 매번 어느 버튼인지 설명해야 해요.
- Q. 묶었는데 한 화면만 다르게 보이고 싶으면요?
- 사본을 다시 만들 필요 없어요. 부품은 예외를 받을 수 있어요. "홈 화면에서는 예약 버튼을 더 크게 보여주세요"처럼 말하면, 부품 하나를 유지한 채로 그 화면에서만 크게 나와요.
- Q. 코드를 볼 줄 몰라도 확인할 수 있나요?
- 네. 색을 한 번 바꿔 보시면 됩니다. 모든 화면이 같이 바뀌면 부품이고, 한 화면만 바뀌면 아직 사본이에요. 확인한 다음 되돌리면 그만이에요.
- Q. 화면 위에서 직접 클릭해 고칠 때도 같나요?
- 손으로 고치면 지금 눌린 그 자리가 바뀌어요. 그래서 전부 한 번에 바꾸려면 부품이 먼저 있어야 하고, 부품이 있으면 손 편집도 훨씬 편해져요. 손 편집 쪽은 화면 위에서 직접 고치기에 있어요.
- Q. 폰에서 밀리는 문제도 이걸로 해결되나요?
- 직접 해결되지는 않아요. 다만 폭 문제를 한 군데서 고치면 모든 화면이 같이 나아지니 손이 훨씬 덜 가요. 폭 문제 자체는 반응형을 보세요.
- Q. 나중에 개발자에게 맡길 때도 부품이 있으면 유리한가요?
- 많이 유리해요. 처음 온 사람이 가장 먼저 하는 일이 "같은 게 몇 군데에 있나" 파악이에요. 부품으로 정리돼 있으면 그 시간이 줄어서 견적도 내려가고, 인수받은 사람이 실수로 한 곳만 고치는 사고도 줄어요. 넘기는 절차는 인수인계에 있어요.
헷갈리기 쉬운 것
부품과 페이지는 달라요. 페이지는 손님이 도착하는 주소이고, 부품은 페이지 안에 들어가는 조각이에요. 페이지를 늘리는 이야기는 여러 페이지에 있어요.
부품과 템플릿도 달라요. 템플릿은 시작할 때 한 벌 가져오는 완성본이고, 부품은 그 안에서 계속 반복되는 조각이에요. 템플릿은 처음에 한 번 고르고 끝나요. 부품은 문 연 뒤에도 계속 쓰여요. 시작 이야기는 템플릿으로 시작하기에 있어요.
전체 통일과 부품은 짝이에요. 부품이 없으면 통일은 매번 사람 손으로 하는 일이 되고, 부품이 있으면 통일은 값 하나를 바꾸는 일이 돼요. 그래서 오래 굴릴 서비스일수록 부품이 남는 장사예요. 문 연 뒤 관리 이야기는 유지보수에 있어요.
확인해 보세요
버튼 색을 오렌지로 바꿨는데 세 화면 중 두 곳만 바뀌었어요. 지금 상태는?
하나 더
그 상황에서 어떻게 말하는 게 가장 잘 통할까요?
직접 해보기
지금 만든 것에서 반복 조각을 찾아보세요
만들던 화면을 열고 "이 화면에서 반복되는 조각을 찾아서, 부품으로 묶을 만한 걸 추천해주세요"라고 말해 보세요. 묶지 않고 목록만 받아 봐도 내 서비스 구조가 보여요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
왜 개발하는 사람들은 이걸 제일 먼저 하나 · 사본 방식에서는 수정 한 번의 비용이 화면 수에 비례해요. 화면이 열 개면 문구 하나 바꾸는 데 열 곳을 찾아야 하고, 찾는 과정에서 반드시 한 곳을 놓쳐요. 부품 방식은 화면이 백 개여도 한 곳이에요. 그래서 견적서에 "구조 정리"나 "공통화" 항목이 앞쪽에 오는 거예요. 눈에 보이는 결과가 없는 항목이라 사장님이 빼자고 하기 쉬운데, 이 항목을 뺀 견적은 뒤에서 수정비로 돌아옵니다.
부품에 손잡이를 달아 둔다는 것 · 도장에 잉크 색과 크기를 고르는 손잡이가 달려 있다고 생각해 보세요. 버튼 부품에 문구·색·크기 손잡이를 달아 두면, 화면마다 다른 모습이 필요할 때도 사본을 만들지 않아요. 손잡이 값만 다르게 넘기면 되니까요. 다만 손잡이가 열 개를 넘어가면 그건 신호예요. 그 부품 하나에 서로 다른 두 가지 역할이 섞여 있다는 뜻이라, 둘로 쪼개는 게 맞습니다.
도장 비유가 어디서부터 안 맞나 · 도장은 한 번 찍으면 종이와 도장의 관계가 끊어져요. 부품은 끊어지지 않아요. 계속 연결돼 있어서 부품이 바뀌는 순간 쓰이는 곳이 전부 따라 바뀝니다. 좋을 때는 이게 힘이고, 나쁠 때는 이게 사고예요. 그래서 부품을 고칠 때는 "이 부품이 어디에 쓰이는지 알려주세요"를 먼저 물어보는 습관이 도움이 돼요. 영향 범위를 알고 고치는 것과 모르고 고치는 것은 다른 일입니다.
이것만 기억하세요
- ·한 곳만 안 바뀌는 증상은 거의 다 사본이 따로 있어서 생겨요
- ·두 번 나오면 후보, 세 번 나오면 부품으로 묶어요
- ·주문은 "하나로 묶어서 한 군데서만 고치면 전부 바뀌게 해주세요"
- ·묶은 뒤에는 색을 한 번 바꿔서 전부 같이 바뀌는지 확인해요
- ·힘이 센 만큼 위험도 커요. 부품을 고친 뒤에는 쓰이는 화면을 훑어봐요