세 트랙이 「같은 이름」 으로 만나는 자리
쇼핑몰·SNS·게시판·예약·배달앱·동영상 사이트 — 서비스 모양이 달라도 회원가입 폼은 거의 똑같이 생겼습니다. 수많은 프로젝트가 같은 모양을 다시 만들고 있습니다. 그래서 한 번 제대로 들여다 보면, 다음 모든 프로젝트가 쉬워집니다.
이미 v2 ~ v4 에서 회원가입을 따라하기로 한 번 완성했습니다. 코드는 동작하고 있습니다.
오늘은 그 코드가 어떻게 만들어졌는지 위에서 내려다보는 시간입니다 — 실제 프로젝트 현장이라면, 이 회원가입 한 화면이 어떤 단계를 거쳐 짜이는가?
「프로젝트의 일면 (一面)」 — 한 화면이 만들어지는 전체 모습을 한 번 비추어 봅니다.
실제 팀 프로젝트는 코드 짜기 전에 이 단계를 모두 지납니다. 우리는 한 차시에 압축해서 한번 훑어봅니다.
| 단계 | 하는 일 | 회원가입 예 |
|---|---|---|
| ① 기획 | 기능을 만들기로 정함 | "회원가입 기능을 만들자" |
| ② 요구사항정의서 | 어떤 데이터를 저장할까 | id, pwd, nick |
| ③ 유스케이스 | 사용자가 어떻게 쓰는지 한 줄 | "폼에 3칸 입력 → 가입 버튼 → 로그인 페이지" |
| ④ 화면 스케치 | 디자이너가 그림으로 | 입력칸 3개 + 버튼 1개 |
| ⑤ 구현 | Front + Back + DB | JSP / Controller / mymember 테이블 |
👉 ② 요구사항정의서에서 「id, pwd, nick」 이 정해지는 순간 — 이후 모든 트랙이 그 약속을 따른다.
그런데 팀 프로젝트는 보통 3~5 명이 같이 한다. 누가 뭘 맡고, 어떻게 동시에 일할 수 있는지가 안 보인다.
상식적으로는 「DB → Backend → Frontend」 순서로 짜야 할 것 같다. 그런데 실제 팀에서는 세 사람이 같은 시간에 일한다.
→ 어떻게 따로 일하고 합칠 수 있을까?
설계 회의 첫 시간에 결정하는 한 가지: 이 데이터를 어떤 이름으로 부를까?
회원가입을 「세 사람의 약속 받기」 로 비유하면 — 세 사람이 같은 양식의 종이를 들고 시작합니다. 종이 위 칸 이름이 같으면, 누가 어떤 칸을 채워와도 자연스럽게 합쳐집니다.
| 트랙 | 어디에 등장 | 예시 |
|---|---|---|
| Frontend | <input name="..."> |
name="id", name="pwd", name="nick" |
| Backend | DTO 필드명 | private String id; private String pwd; private String nick; |
| DB | 테이블 컬럼명 | mymember(id, pwd, nick) |
👉 셋이 완전히 똑같은 단어 를 쓴다. 한 글자라도 다르면 합치는 순간 깨진다.
이 한 줄짜리 약속이 「세 사람이 동시에 일할 수 있는」 출발선.
<!-- signup.html — Frontend 멤버가 만든 산출물 -->
<form action="/signup" method="post" class="signup-form">
<h2>회원가입</h2>
<input name="id" placeholder="아이디">
<input name="pwd" type="password" placeholder="비밀번호">
<input name="nick" placeholder="닉네임">
<button>가입하기</button>
</form>
<style>
.signup-form { max-width: 360px; padding: 24px; border-radius: 12px;
background:#fafafa; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.signup-form input { display:block; width:100%; padding:10px;
margin:8px 0; border:1px solid #ddd; }
.signup-form button { width:100%; padding:12px; background:#3b82f6;
color:#fff; border:0; border-radius:6px; }
</style>
👉 디자인 / CSS 에 집중. 서버가 없어도 만들 수 있다. name 속성만 약속대로.
// com/smhrd/domain/Member.java — 약속한 이름으로 DTO
@Data @AllArgsConstructor @NoArgsConstructor
public class Member {
private String id; // ← 약속의 첫 칸
private String pwd; // ← 약속의 둘째 칸
private String nick; // ← 약속의 셋째 칸
}
// com/smhrd/controller/SignupController.java
@Controller
public class SignupController {
@Autowired private MemberService service;
@PostMapping("/signup")
public String signup(Member m) { // 폼 → DTO 자동 바인딩
service.signup(m);
return "redirect:/login";
}
}
👉 화면이 없어도 빈 HTML 폼으로 시험 가능. DTO 필드명만 약속대로.
-- Backend 가 받은 데이터가 마지막에 들어가는 자리
CREATE TABLE mymember (
id VARCHAR(50) PRIMARY KEY,
pwd VARCHAR(100) NOT NULL,
nick VARCHAR(30)
);
👉 컬럼명이 약속의 마지막 자리. Front 의 폼 → Back 의 DTO → DB 의 컬럼 — 같은 단어가 끝까지 따라온다.
같은 데이터를 받는 화면은 디자인이 갈아끼워질 수 있습니다.
name="id", name="pwd", name="nick" 만 지키면 — 화면 디자인은 무엇이든 가능합니다. 동일한 Backend, 동일한 DB, 다른 Frontend.
<form action="/signup" method="post">
<input name="id">
<input name="pwd" type="password">
<input name="nick">
<button>가입</button>
</form>
단순한 폼. 동작은 한다. 「예쁜가?」 는 다른 사람이 맡는다.
<!-- 같은 action, 같은 name — 디자인만 풍부 -->
<form action="/signup" method="post" class="card-form">
<h2>Welcome 👋</h2>
<label>아이디</label>
<input name="id" class="rounded">
<label>비밀번호</label>
<input name="pwd" class="rounded" type="password">
<label>닉네임</label>
<input name="nick" class="rounded">
<button class="gradient-btn">가입하고 시작하기</button>
</form>
👉 Backend 코드 한 줄 안 바뀜. name 만 같으면 동작은 동일하다.
세 사람의 산출물이 처음 만나는 자리. 이름이 같으니 자동 바인딩이 알아서 다리를 놓는다.
| 트랙 | 주된 산출물 | 주된 도구 | 신경쓰는 것 |
|---|---|---|---|
| Frontend | HTML / CSS / JS, 디자인된 폼 | VS Code, Figma, 브라우저 | 사용자 경험, 폼 name |
| Backend | Controller, Service, Mapper, DTO | Eclipse, Tomcat, Postman | 로직 정확성, DTO 필드명 |
| DB | 테이블, 인덱스, 가데이터 | MySQL Workbench | 데이터 모델, 컬럼명 |
👉 도구도 다르고 신경쓰는 것도 다르다. 만나는 자리는 「같은 이름」 한 곳뿐.
세 사람이 동시 진행. 만나는 곳은 「합치기」 단 한 지점.
name="userId", Back 이 String id
→ id 가 null 로 들어옴 (자동 바인딩 실패)String password, DB 가 pwd VARCHAR(100)
→ MyBatis SQL 에서 NoSuchColumn 오류name="nickname", Back/DB 는 nick
→ INSERT 는 되지만 화면에 닉네임이 안 뜬다👉 셋 다 「코드는 컴파일되는데 동작이 이상한」 류. 이름 약속이 깨졌을 때 가장 자주 만나는 사고.
name = DTO 필드 = 컬럼명. 한 표에 정리.👉 이 5 가지를 첫날 30 분 안에 정해놓으면, 사고의 90% 가 사라진다.
오늘 한 일은 모두 한 사람이 했지만, 이 모양 그대로 세 사람이 나눠 할 수 있다는 것을 봤습니다.
이게 곧 팀 프로젝트의 출발선입니다.
다음: REST API v8 — 같은 걸 다시 (View 없는 컨트롤러).