"화면설계 사용자 인터페이스 구현 UI 디자인"이라는 능력단위는 주로 다음과 같은 내용을 포함할 수 있습니다.
화면 설계 (Screen Design)
① 사용자 요구 분석 : 사용자의 요구 사항을 분석하여 화면 설계의 기초를 마련합니다.
② 와이어프레임 작성 : 화면의 레이아웃과 구조를 정의한 와이어프레임을 작성합니다.
③ 프로토타입 제작 : 기능적 화면 프로토타입을 만들어 실제 사용자 환경에서 테스트합니다.
사용자 인터페이스 구현 (UI Implementation)
① 디자인 원칙 적용 : UI 디자인의 원칙과 가이드라인을 따라 화면을 구현합니다.
② HTML/CSS/JavaScript : 웹 애플리케이션의 경우, HTML, CSS, JavaScript 등을 사용하여 UI를 구현합니다.
③ 프레임워크 사용 : React, Vue, Angular 등의 프레임워크를 이용하여 사용자 인터페이스를 구축합니다.
UI 디자인 (UI Design)
① 비주얼 디자인 : 색상, 타이포그래피, 아이콘, 이미지 등 시각적인 요소를 디자인합니다.
② 사용성 고려 : 사용자의 편리함과 직관성을 고려하여 디자인을 개선합니다.
③ 디자인 도구 활용 : Adobe XD, Figma, Sketch 등의 도구를 사용하여 디자인을 제작합니다.
사용자 테스트 및 피드백
① 사용성 테스트 : 사용자 테스트를 통해 UI의 사용성을 평가하고 개선점을 찾습니다.
② 피드백 반영 : 테스트 결과와 사용자 피드백을 바탕으로 UI를 수정하고 최적화합니다.
문서화 및 가이드라인 작성
① 디자인 문서화 : 디자인 시스템과 가이드라인을 문서화하여 일관성을 유지합니다.
② UI 가이드라인 작성 : UI 디자인 및 개발에 대한 가이드라인을 작성하여 팀원들이 참고할 수 있도록 합니다.
이 능력단위는 UI/UX 디자인의 핵심 요소들을 다루며, 사용자 경험을 향상시키기 위해 필요한 다양한 기술과 원칙을 포함합니다.
IdSaveProcess.jsp
<%@ page import="utils.CookieManager"%>
<%@ page import="utils.JSFunction"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String user_id = request.getParameter("user_id");
String user_pw = request.getParameter("user_pw");
String save_check = request.getParameter("save_check");
if ("must".equals(user_id) && "1234".equals(user_pw)) {
if (save_check != null && save_check.equals("Y")){
CookieManager.makeCookie(response, "loginId", user_id, 86400);
}
else {
CookieManager.deleteCookie(response, "loginId");
}
JSFunction.alertLocation("로그인에 성공했습니다.", "IdSaveMain.jsp", out);
}
else {
JSFunction.alertBack("로그인에 실패했습니다.", out);
}
%>
CookieManager.java
package utils;
import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
public class CookieManager {
// 명시한 이름, 값, 유지 기간 조건으로 새로운 쿠키를 생성합니다.
public static void makeCookie(HttpServletResponse response, String cName, String cValue, int cTime) {
Cookie cookie = new Cookie(cName, cValue); // 쿠키생성
cookie.setPath("/"); // 경로 설정
cookie.setMaxAge(cTime); // 유지 기간 설정
response.addCookie(cookie); // 응답 객체에 추가
}
// 명시한 이름의 쿠키를 찾아 그 값을 반환합니다.
public static String readCookie(HttpServletRequest request, String cName) {
String cookieValue = ""; // 반환 값
Cookie[] cookies = request.getCookies();
if (cookies != null) {
for (Cookie c : cookies) {
String cookieName = c.getName();
if (cookieName.equals(cName)) {
cookieValue = c.getValue(); // 변환 값 갱신
}
}
}
return cookieValue;
}
// 명시한 이름의 쿠키를 삭제합니다.
public static void deleteCookie(HttpServletResponse response, String cName) {
makeCookie(response, cName, "", 0);
}
}
IdSaveMain.jsp
<%@ page import="utils.CookieManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String loginId = CookieManager.readCookie(request, "loginId");
String cookieCheck = "";
if (!loginId.equals("")) {
cookieCheck = "checked";
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 저장하기</title>
</head>
<body>
<h2>로그인 페이지</h2>
<form action="IdSaveProcess.jsp" method="post">
아이디 : <input type="text" name="user_id" value="<%= loginId %>"/>
<input type="checkbox" name="save_check" value="Y" <%= cookieCheck %>/>
아이디저장
<br/>
패스워드 : <input type="text" name="user_pw"/>
<br/>
<input type="submit" value="로그인하기"/>
</form>
</body>
</html>
JSFunction.java
package utils;
import jakarta.servlet.jsp.JspWriter;
public class JSFunction {
// 메세지 알림창을 띄운 후 명시한 URL로 이동합니다.
public static void alertLocation(String msg, String url, JspWriter out) {
try {
String script = ""
+ "<script>"
+ "alert('" + msg + "');"
+ "location.href='" + url + "';"
+ "</script>";
out.println(script); // 자바스크립트 코드를 out 내장 객체로 출력(삽입)
}
catch (Exception e) {}
}
// 메세지 알림창을 띄운 후 이전 페이지로 돌아갑니다.
public static void alertBack(String msg, JspWriter out) {
try {
String script = ""
+ "<script>"
+ "alert('" + msg + "');"
+ "history.back();"
+ "</script>";
out.println(script);
}
catch (Exception e) {}
}
}'JSP' 카테고리의 다른 글
| JSP(회원 정보 관리 프로그램)_2024-08-29 (0) | 2024.08.30 |
|---|---|
| JSP(Oracle_DB업로드)_2024 (0) | 2024.08.28 |
| JSP(Oracle_table)_2024-08-27 (0) | 2024.08.27 |
| JSP(쿠키)_2024-08-26 (0) | 2024.08.26 |
| JSP(주요 포인트, 동작원리)_2024-08-23 (0) | 2024.08.26 |
