Frontend 담당 — 회원가입 화면 만들기

Frontend

작업 순서 — "먼저 약속, 그 다음 디자인"

1. Step 1 — form 필드부터 확정: 화면을 그리기 전에, "백엔드에 줄 값이 무엇인지" 를 먼저 결정합니다. name 속성 목록이 그거예요. 이건 Backend에게 바로 공유.
2. Step 2 — 그 필드들이 들어간 화면을 여러 스타일로 시도: 가로/세로 배치, 카드형, 스텝 방식 등. name 은 절대 바뀌지 않고, CSS와 HTML 구조만 달라집니다.
3. Step 3 — 팀원들과 디자인 시안 비교 후 하나 선택.
4. Step 4 — 선택된 디자인을 최종본으로 다듬기.

Step 1 · 공유할 form 명세를 먼저 선언

코드를 쓰기 전에 종이에 적거나 공유 문서에 올립니다. 이게 Backend가 받아야 할 "약속" 입니다.

// 이 값들이 서버로 갑니다 (name 기준)
userId          // text, 필수
password        // password, 필수
passwordConfirm // password, 필수 (서버에 보내긴 하지만 저장 안 함)
nickname        // text, 필수
email           // email, 필수
phone           // text, 선택
hobbies         // checkbox 복수 선택
favoriteColor   // radio
job             // select

action = "register", method = "post"

Step 2 · 같은 form 명세, 다른 디자인 (시안 A)

가로 배치 — 라벨이 왼쪽, input이 오른쪽에 붙는 기본 스타일.

<%-- join.jsp · 디자인 시안 A : 가로 라벨 --%>
<form action="register" method="post" class="join-form-A">
  <div class="row">
    <label>아이디</label>
    <input type="text" name="userId" required>
  </div>
  <div class="row">
    <label>비밀번호</label>
    <input type="password" name="password" required>
  </div>
  <div class="row">
    <label>비밀번호 확인</label>
    <input type="password" name="passwordConfirm" required>
  </div>
  <div class="row">
    <label>닉네임</label>
    <input type="text" name="nickname" required>
  </div>
  <div class="row">
    <label>이메일</label>
    <input type="email" name="email" required>
  </div>
  <div class="row">
    <label>연락처</label>
    <input type="text" name="phone">
  </div>
  <button type="submit">가입하기</button>
</form>

Step 2 · 다른 디자인 (시안 B) — name은 그대로!

카드형 세로 배치 — 플레이스홀더로 라벨을 대체하고, 필드끼리 세로로 넉넉히 벌림.

<%-- join.jsp · 디자인 시안 B : 카드형 세로 --%>
<form action="register" method="post" class="join-card">
  <h2>회원가입</h2>
  <input type="text"     name="userId"          placeholder="아이디"         required>
  <input type="password" name="password"        placeholder="비밀번호"       required>
  <input type="password" name="passwordConfirm" placeholder="비밀번호 확인"  required>
  <input type="text"     name="nickname"        placeholder="닉네임"         required>
  <input type="email"    name="email"           placeholder="이메일"         required>
  <input type="text"     name="phone"           placeholder="연락처 (선택)">
  <button type="submit">가입</button>
</form>

같은 데이터, 다른 UI — Frontend의 자유도

"좋아하는 색" 이라는 하나의 데이터를 받을 때, Frontend는 여러 UI 방식 중 아무거나 선택할 수 있습니다. 중요한 건 UI가 어떻게 생겼든 서버에 전달되는 건 결국 favoriteColor=값 하나라는 점입니다. Backend는 UI가 text인지 color picker인지 radio인지 알 필요가 없어요. 이게 Frontend와 Backend가 분리되는 의미입니다.

UI 방식 1 · text input (자유 입력) — 사용자가 직접 타이핑

<input type="text" name="favoriteColor" placeholder="좋아하는 색">
// 사용자 입력 예: "파랑", "하늘색", "연두" ...  (자유 문자열)

UI 방식 2 · HTML5 color picker — 브라우저 기본 색 선택기

<input type="color" name="favoriteColor" value="#4fc3ff">
// 서버가 받는 값: "#4fc3ff" (hex 코드)

UI 방식 3 · radio buttons — 사전 정의된 옵션 중 하나

<label><input type="radio" name="favoriteColor" value="빨강">빨강</label>
<label><input type="radio" name="favoriteColor" value="파랑">파랑</label>
<label><input type="radio" name="favoriteColor" value="초록">초록</label>
// 서버가 받는 값: "빨강" 또는 "파랑" 또는 "초록" (value 중 하나)

UI 방식 4 · select dropdown — 드롭다운에서 선택

<select name="favoriteColor">
  <option value="빨강">빨강</option>
  <option value="파랑">파랑</option>
  <option value="초록">초록</option>
</select>
// 서버가 받는 값: 선택된 option의 value

서버 입장에서는 — 전부 동일

// RegisterServlet.java — UI가 뭐든 이 한 줄로 받는다
String color = req.getParameter("favoriteColor");

취미 입력 (checkbox 복수) — 특별한 케이스

checkbox는 한 name에 여러 값이 선택될 수 있다는 점에서 다른 타입들과 다릅니다. "취미" 는 보통 복수 선택이 자연스럽죠 (독서·운동·영화 동시에 가능).

<fieldset>
  <legend>취미 (여러 개 선택 가능)</legend>
  <label><input type="checkbox" name="hobbies" value="독서">독서</label>
  <label><input type="checkbox" name="hobbies" value="운동">운동</label>
  <label><input type="checkbox" name="hobbies" value="영화">영화</label>
  <label><input type="checkbox" name="hobbies" value="음악">음악</label>
  <label><input type="checkbox" name="hobbies" value="게임">게임</label>
  <label><input type="checkbox" name="hobbies" value="요리">요리</label>
</fieldset>

모든 checkbox가 같은 name="hobbies" 라는 점이 핵심입니다. 사용자가 "독서" 와 "운동" 을 체크하면 브라우저는 hobbies=독서&hobbies=운동 식으로 두 번 보냅니다. 이걸 서버에서 어떻게 받는지는 Backend 페이지 에서 자세히 다룹니다.

Frontend가 Backend에게 공유하는 것

• form 필드 명세 한 장 (위의 Step 1 목록). 디자인이 바뀌어도 이 목록은 고정.
• action URL과 method (POST /register).
• (나중에) 실제로 완성된 join.jsp 파일. Backend가 자기 페이지 대신 이걸 쓸 수 있도록.

Frontend가 절대 하면 안 되는 것