달력

52025  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'EveryThing'에 해당되는 글 125건

  1. 2017.11.02 CRUD-example(investment)
  2. 2017.11.02 CRUD-example(reward)
  3. 2017.11.02 CRUD
  4. 2017.09.27 국민건강보험공단
  5. 2017.09.25 와디즈 FAQ
  6. 2017.09.14 JSP책
  7. 2017.09.07 Spring Framework
  8. 2017.09.05 모바일 GUI 디자인
  9. 2017.09.04 UX/UI 기획
  10. 2017.09.03 Project

CRUD-example(investment)

Legend 개발자/Spring 2017. 11. 2. 15:29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package com.lat.beans;
 
public class Investment {
    private String id;
    private long project_num;
    private long reward_num;
    private long total;
    private String addr;
    private String card_num;
    private String card_exdate;
    private String card_pwd;
    private String card_birth;
    
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public long getProject_num() {
        return project_num;
    }
    public void setProject_num(long project_num) {
        this.project_num = project_num;
    }
    public long getReward_num() {
        return reward_num;
    }
    public void setReward_num(long reward_num) {
        this.reward_num = reward_num;
    }
    public long getTotal() {
        return total;
    }
    public void setTotal(long total) {
        this.total = total;
    }
    public String getAddr() {
        return addr;
    }
    public void setAddr(String addr) {
        this.addr = addr;
    }
    public String getCard_num() {
        return card_num;
    }
    public void setCard_num(String card_num) {
        this.card_num = card_num;
    }
    public String getCard_exdate() {
        return card_exdate;
    }
    public void setCard_exdate(String card_exdate) {
        this.card_exdate = card_exdate;
    }
    public String getCard_pwd() {
        return card_pwd;
    }
    public void setCard_pwd(String card_pwd) {
        this.card_pwd = card_pwd;
    }
    public String getCard_birth() {
        return card_birth;
    }
    public void setCard_birth(String card_birth) {
        this.card_birth = card_birth;
    }
    
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
package com.lat.controller;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
 
import com.lat.beans.Investment;
import com.lat.dao.InvestmentDAOService;
 
@Controller
public class InvestmentController {
    @Autowired
    private InvestmentDAOService investmentDAOService;
    
    @RequestMapping(value="/investment/listInvestment")
    public ModelAndView list(HttpServletRequest request){
        List<Investment> list=investmentDAOService.listInvestment();
        return new ModelAndView("investment/listInvestment","list",list);
    }
    
    @RequestMapping(value="/investment/insertInvestment")
    public ModelAndView insertInvestment(HttpServletRequest request){
        return new ModelAndView("investment/insertInvestment");
    }
    
    @RequestMapping(value="/investment/insert", method=RequestMethod.POST)
    public String listInvestment(HttpServletRequest request){
        String id=request.getParameter("id");
        String project_numVal=request.getParameter("project_num");
        long project_num=0;
        if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
        String reward_numVal=request.getParameter("reward_num");
        long reward_num=0;
        if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
        String totalVal=request.getParameter("total");
        long total=0;
        if(totalVal!=null) total=Long.parseLong(totalVal);
        String addr=request.getParameter("addr");
        String card_num=request.getParameter("card_num");
        String card_exdate=request.getParameter("card_exdate");
        String card_pwd=request.getParameter("card_pwd");
        String card_birth=request.getParameter("card_birth");
        Investment investment=new Investment();
        investment.setId(id);
        investment.setProject_num(project_num);
        investment.setReward_num(reward_num);
        investment.setTotal(total);
        investment.setAddr(addr);
        investment.setCard_num(card_num);
        investment.setCard_exdate(card_exdate);
        investment.setCard_pwd(card_pwd);
        investment.setCard_birth(card_birth);
        investmentDAOService.insertInvestment(investment);
        return "redirect:listInvestment";
    }
    
    @RequestMapping(value="/investment/detailInvestment", method=RequestMethod.GET)
    public ModelAndView detailInvestment(HttpServletRequest request){
        String id=request.getParameter("id");
        String project_numVal=request.getParameter("project_num");
        long project_num=0;
        if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
        String reward_numVal=request.getParameter("reward_num");
        long reward_num=0;
        if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
        Investment investment = new Investment();
        investment.setId(id);
        investment.setProject_num(project_num);
        investment.setReward_num(reward_num);
        investment=investmentDAOService.detailInvestment(investment);
        return new ModelAndView("investment/detailInvestment","investment",investment);
    }
        
    @RequestMapping(value="/investment/update", method=RequestMethod.POST)
    public String update(HttpServletRequest request){
        String id=request.getParameter("id");
        String project_numVal=request.getParameter("project_num");
        long project_num=0;
        if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
        String reward_numVal=request.getParameter("reward_num");
        long reward_num=0;
        if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
        String totalVal=request.getParameter("total");
        long total=0;
        if(totalVal!=null) total=Long.parseLong(totalVal);
        String addr=request.getParameter("addr");
        String card_num=request.getParameter("card_num");
        String card_exdate=request.getParameter("card_exdate");
        String card_pwd=request.getParameter("card_pwd");
        String card_birth=request.getParameter("card_birth");
        Investment investment=new Investment();
        investment.setId(id);
        investment.setProject_num(project_num);
        investment.setReward_num(reward_num);
        investment.setTotal(total);
        investment.setAddr(addr);
        investment.setCard_num(card_num);
        investment.setCard_exdate(card_exdate);
        investment.setCard_pwd(card_pwd);
        investment.setCard_birth(card_birth);
        investmentDAOService.updateInvestment(investment);
        return "redirect:listInvestment";
    }
 
    @RequestMapping(value="/investment/updateInvestment")
    public ModelAndView updateInvestment(HttpServletRequest request){
        String id=request.getParameter("id");
        String project_numVal=request.getParameter("project_num");
        long project_num=0;
        if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
        String reward_numVal=request.getParameter("reward_num");
        long reward_num=0;
        if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
        Investment investment = new Investment();
        investment.setId(id);
        investment.setProject_num(project_num);
        investment.setReward_num(reward_num);
        Investment investmentRlt=investmentDAOService.detailInvestment(investment);
        ModelAndView view=new ModelAndView("investment/insertInvestment");
        view.addObject("investment",investmentRlt);
        return view;
    }
    
    @RequestMapping(value="/investment/delete", method=RequestMethod.POST)
    public String delete(HttpServletRequest request){
        String id=request.getParameter("id");
        String project_numVal=request.getParameter("project_num");
        long project_num=0;
        if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
        String reward_numVal=request.getParameter("reward_num");
        long reward_num=0;
        if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
        Investment investment=new Investment();
        investment.setId(id);
        investment.setProject_num(project_num);
        investment.setReward_num(reward_num);
        investmentDAOService.deleteInvestment(investment);
        return "redirect:listInvestment";
    }
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Investment;
 
public interface InvestmentDAO {
    public List<Investment> listInvestment();
    public void insertInvestment(Investment investment);
    public Investment detailInvestment(Investment investment);
    public void updateInvestment(Investment investment);
    public void deleteInvestment(Investment investment);    
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package com.lat.dao;
 
import java.util.List;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.lat.beans.Investment;
 
@Repository
public class InvestmentDAOService implements InvestmentDAO {
 
        @Autowired
        private SqlSession sqlSession;
 
        @Override
        public void insertInvestment(Investment investment) {
            // TODO Auto-generated method stub
            InvestmentMapper investmentMapper=sqlSession.getMapper(InvestmentMapper.class);
            investmentMapper.insertInvestment(investment);
        }
        @Override
        public List<Investment> listInvestment() {
            // TODO Auto-generated method stub
            InvestmentMapper investmentMapper=sqlSession.getMapper(InvestmentMapper.class);
            return investmentMapper.listInvestment();
        }
        @Override
        public Investment detailInvestment(Investment investment) {
            // TODO Auto-generated method stub
            InvestmentMapper investmentMapper=sqlSession.getMapper(InvestmentMapper.class);
            return investmentMapper.detailInvestment(investment);
        }
 
        @Override
        public void updateInvestment(Investment investment) {
            // TODO Auto-generated method stub
            InvestmentMapper investmentMapper=sqlSession.getMapper(InvestmentMapper.class);
            investmentMapper.updateInvestment(investment);
            
        }
 
        @Override
        public void deleteInvestment(Investment investment) {
            // TODO Auto-generated method stub
            InvestmentMapper investmentMapper=sqlSession.getMapper(InvestmentMapper.class);
            investmentMapper.deleteInvestment(investment);
            
        }
        
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Investment;
 
public interface InvestmentMapper {
    public List<Investment> listInvestment();
    public void insertInvestment(Investment investment);
    public Investment detailInvestment(Investment investment);
    public void updateInvestment(Investment investment);
    public void deleteInvestment(Investment investment);
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0 // EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lat.dao.InvestmentMapper">
    <resultMap type="Investment" id="investmentMap">
        <result property="id" column="ID"/>
        <result property="project_num" column="PROJECT_NUM"/>
        <result property="reward_num" column="REWARD_NUM"/>
        <result property="total" column="TOTAL"/>
        <result property="addr" column="ADDR"/>
        <result property="card_num" column="CARD_NUM"/>
        <result property="card_exdate" column="CARD_EXDATE"/>
        <result property="card_pwd" column="CARD_PWD"/>
        <result property="card_birth" column="CARD_BIRTH"/>
    </resultMap>
    
    <select id="listInvestment" resultMap="investmentMap">
        select * from investment
    </select>
    
    <insert id="insertInvestment" parameterType="com.lat.beans.Investment">
        insert into investment(id, project_num, reward_num, total, addr, card_num, card_exdate, card_pwd, card_birth)
        values(#{id}, #{project_num}, #{reward_num}, #{total}, #{addr}, #{card_num}, #{card_exdate}, #{card_pwd}, #{card_birth})
    </insert>
    
    <select id="detailInvestment" parameterType="com.lat.beans.Investment" resultType="com.lat.beans.Investment">
        select * from investment
         where id=#{id}
           and project_num=#{project_num}
           and reward_num=#{reward_num}
    </select>
    
    <update id="updateInvestment" parameterType="com.lat.beans.Investment">
        update investment set
            total=#{total}
           ,addr=#{addr}
           ,card_num=#{card_num}
           ,card_exdate=#{card_exdate}
           ,card_pwd=#{card_pwd}
           ,card_birth=#{card_birth}
        where id=#{id}
          and project_num=#{project_num}
          and reward_num=#{reward_num}
    </update>
    
    <delete id="deleteInvestment" parameterType="com.lat.beans.Investment">
        delete from investment
         where id=#{id}
           and project_num=#{project_num}
           and reward_num=#{reward_num}
    </delete>
</mapper>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Investment" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>detailInvestment</title>
</head>
<body>
Investment상세보기
<%
    Investment investment=(Investment)request.getAttribute("investment");
    if(investment==null) investment=new Investment();
%>
<table border="1">
    <tr>
        <th>id</th>
        <th>project_num</th>
        <th>reward_num</th>
        <th>total</th>
        <th>addr</th>
        <th>card_num</th>
        <th>card_exdate</th>
        <th>card_pwd</th>
        <th>card_birth</th>
    </tr>
    <tr>
        <td><%=investment.getId() %></td>
        <td><%=investment.getProject_num() %></td>
        <td><%=investment.getReward_num() %></td>
        <td><%=investment.getTotal() %></td>
        <td><%=investment.getAddr() %></td>
        <td><%=investment.getCard_num() %></td>
        <td><%=investment.getCard_exdate() %></td>
        <td><%=investment.getCard_pwd() %></td>
        <td><%=investment.getCard_birth() %></td>
    </tr>
    <tr>
        <td colspan="9">
            <form method="post" action="updateInvestment">
                <input type="hidden" name="id" value="<%=investment.getId() %>"/>
                <input type="hidden" name="project_num" value="<%=investment.getProject_num() %>"/>
                <input type="hidden" name="reward_num" value="<%=investment.getReward_num() %>"/>
                <input type="submit" value="수정"/>
            </form>    
            <form method="post" action="delete">
                <input type="hidden" name="id" value="<%=investment.getId() %>"/>
                <input type="hidden" name="project_num" value="<%=investment.getProject_num() %>"/>
                <input type="hidden" name="reward_num" value="<%=investment.getReward_num() %>"/>
                <input type="submit" value="삭제"/>
            </form>    
        </td>
    </tr>
</table>
</body>
</html>
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Investment" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>insertInvestment</title>
</head>
<body>
<%
    Investment investment=(Investment)request.getAttribute("investment");
    if(investment==null) investment=new Investment();
%>
<form method="post"
<% if(investment.getId()==null){ %>
action="insert"
<% }else{ %>
action="update"
<% } %>
>
    <table border="1">
        <tr>
            <td>Id</td>
            <td colspan="2">
            <% if(investment.getId()==null){ %>
            <input type="text" name="id" value="<%=investment.getId() %>"/>
            <% }else{ %>
            <input type="hidden" name="id" value="<%=investment.getId() %>"/>
                <%=investment.getId() %>
            <% } %>
            </td>
        </tr>
        <tr>
            <td>Project_num</td>
            <td colspan="2">
            <% if(investment.getProject_num()==0){ %>
            <input type="text" name="project_num" value="<%=investment.getProject_num() %>"/>
            <% }else{ %>
            <input type="hidden" name="project_num" value="<%=investment.getProject_num() %>"/>
                <%=investment.getProject_num() %>
            <% } %>
            </td>
        </tr>
        <tr>
            <td>Reward_num</td>
            <td colspan="2">
            <% if(investment.getReward_num()==0){ %>
            <input type="text" name="reward_num" value="<%=investment.getReward_num() %>"/>
            <% }else{ %>
            <input type="hidden" name="reward_num" value="<%=investment.getReward_num() %>"/>
                <%=investment.getReward_num() %>
            <% } %>
            </td>
        </tr>
        <tr>
            <td>total</td>
            <td colspan="2"><input type="text" name="total" value="<%=investment.getTotal()==0?"":investment.getTotal() %>"/></td>
        </tr>
        <tr>
            <td>addr</td>
            <td colspan="2"><input type="text" name="addr" value="<%=investment.getAddr()==null?"":investment.getAddr() %>"/></td>
        </tr>
        <tr>
            <td>card_num</td>
            <td colspan="2"><input type="text" name="card_num" value="<%=investment.getCard_num()==null?"":investment.getCard_num() %>"/></td>
        </tr>
        <tr>
            <td>card_exdate</td>
            <td colspan="2"><input type="text" name="card_exdate" value="<%=investment.getCard_exdate()==null?"":investment.getCard_exdate() %>"/></td>
        </tr>
        <tr>
            <td>card_pwd</td>
            <td colspan="2"><input type="text" name="card_pwd" value="<%=investment.getCard_pwd()==null?"":investment.getCard_pwd() %>"/></td>
        </tr>
        <tr>
            <td>card_birth</td>
            <td colspan="2"><input type="text" name="card_birth" value="<%=investment.getCard_birth()==null?"":investment.getCard_birth() %>"/></td>
        </tr>
        <tr>
            <td>
            <%if(investment.getId()==null){ %>
                <input type="submit" value="등록"/>
            <%}else{ %>
                <input type="submit" value="수정"/>
            <%} %>
                <input type="reset" value="취소"/>
            </td>
            <td>
                <a href="listInvestment">
                    <input type="button" value="뒤로가기"/>
                </a>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>listInvestment</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>id</th>
            <th>project_num</th>
            <th>reward_num</th>
            <th>total</th>
            <th>addr</th>
            <th>card_num</th>
            <th>card_exdate</th>
            <th>card_pwd</th>
            <th>card_birth</th>
        </tr>
    <c:forEach var="investment" items="${list}">
        <tr>
            <td>
                <a href="detailInvestment?id=${investment.id}&project_num=${investment.project_num}&reward_num=${investment.reward_num}">
                    ${investment.id}
                </a>
            </td>
            <td>${investment.project_num}</td>
            <td>${investment.reward_num}</td>
            <td>${investment.total}</td>
            <td>${investment.addr}</td>
            <td>${investment.card_num}</td>
            <td>${investment.card_exdate}</td>
            <td>${investment.card_pwd}</td>
            <td>${investment.card_birth}</td>
        </tr>
    </c:forEach>
        <tr>
            <td colspan="9">
                <a href="insertInvestment">
                    <input type="button" value="insert"/>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>
 cs

'Legend 개발자 > Spring' 카테고리의 다른 글

CRUD-example(Projectr_AttachFile)  (0) 2017.11.03
CRUD-example(Member_AttachFile)  (0) 2017.11.03
CRUD-example(Exam_AttachFile)  (0) 2017.11.03
CRUD-example(reward)  (0) 2017.11.02
CRUD  (0) 2017.11.02
Posted by 전설의아이
|

CRUD-example(reward)

Legend 개발자/Spring 2017. 11. 2. 15:26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package com.lat.beans;
 
public class Reward {
    private long project_num;
    private long reward_num;
    private String name;
    private long price;
    private String item;
    private long min;
    
    public long getProject_num() {
        return project_num;
    }
    public void setProject_num(long project_num) {
        this.project_num = project_num;
    }
    public long getReward_num() {
        return reward_num;
    }
    public void setReward_num(long reward_num) {
        this.reward_num = reward_num;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public long getPrice() {
        return price;
    }
    public void setPrice(long price) {
        this.price = price;
    }
    public String getItem() {
        return item;
    }
    public void setItem(String item) {
        this.item = item;
    }
    public long getMin() {
        return min;
    }
    public void setMin(long min) {
        this.min = min;
    }
    
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
package com.lat.controller;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
 
import com.lat.beans.Reward;
import com.lat.dao.RewardDAOService;
 
@Controller
public class RewardController {
    @Autowired
    private RewardDAOService rewardDAOService;
    
    @RequestMapping(value="/reward/listReward")
    public ModelAndView list(HttpServletRequest request){
        List<Reward> list=rewardDAOService.listReward();
        return new ModelAndView("reward/listReward","list",list);
    }
    
    @RequestMapping(value="/reward/insertReward")
    public ModelAndView insertReward(HttpServletRequest request){
        return new ModelAndView("reward/insertReward");
    }
    
    @RequestMapping(value="/reward/insert", method=RequestMethod.POST)
    public String listReward(HttpServletRequest request){
        String project_num=request.getParameter("project_num");//숫자
        String reward_num=request.getParameter("reward_num");//숫자
        String name=request.getParameter("name");
        String price=request.getParameter("price");//숫자
        String item=request.getParameter("item");
        String min=request.getParameter("min");//숫자
        Reward reward=new Reward();
        reward.setProject_num(Long.parseLong(project_num));
        reward.setReward_num(Long.parseLong(reward_num));
        reward.setName(name);
        reward.setPrice(Long.parseLong(price));
        reward.setItem(item);
        reward.setMin(Long.parseLong(min));
        rewardDAOService.insertReward(reward);
        return "redirect:listReward";
    }
    
    @RequestMapping(value="/reward/detailReward", method=RequestMethod.GET)
    public ModelAndView detailReward(HttpServletRequest request){
        String project_num=request.getParameter("project_num");
        String reward_num=request.getParameter("reward_num");
        Reward reward=new Reward();
        reward.setProject_num(Long.parseLong(project_num));
        reward.setReward_num(Long.parseLong(reward_num));
        ModelAndView result= new ModelAndView();
        Reward rewardRlt=rewardDAOService.detailReward(reward);
        result.addObject("reward",rewardRlt);
        result.setViewName("reward/detailReward");
        return result;
    }
    
    @RequestMapping(value="/reward/update")
    public String update(HttpServletRequest request){
    String project_numVal=request.getParameter("project_num");
    long project_num=0;
    if(project_numVal!=null) project_num=Long.parseLong(project_numVal);
    String reward_numVal=request.getParameter("reward_num");//숫자
    long reward_num=0;
    if(reward_numVal!=null) reward_num=Long.parseLong(reward_numVal);
    String name=request.getParameter("name");
    String priceVal=request.getParameter("price");//숫자
    long price=0;
    if(priceVal!=null) price=Long.parseLong(priceVal);
    String item=request.getParameter("item");
    String minVal=request.getParameter("min");//숫자
    long min=0;
    if(minVal!=null) min=Long.parseLong(minVal);
    Reward reward=new Reward();
    reward.setProject_num(project_num);
    reward.setReward_num(reward_num);
    reward.setName(name);
    reward.setPrice(price);
    reward.setItem(item);
    reward.setMin(min);
    rewardDAOService.updateReward(reward);
    return "redirect:listReward";
    }
    
    @RequestMapping(value="/reward/updateReward", method=RequestMethod.POST)
    public ModelAndView updateReward(HttpServletRequest request){
        String project_num=request.getParameter("project_num");
        String reward_num=request.getParameter("reward_num");
        Reward reward=new Reward();
        reward.setProject_num(Long.parseLong(project_num));
        reward.setReward_num(Long.parseLong(reward_num));
        Reward rewardRlt=rewardDAOService.detailReward(reward);
        ModelAndView view=new ModelAndView("reward/insertReward");
        view.addObject("reward",rewardRlt);
        return view;
    }
    
    @RequestMapping(value="/reward/delete", method=RequestMethod.POST)
    public String deleteReward(HttpServletRequest request){
        String project_num=request.getParameter("project_num");
        String reward_num=request.getParameter("reward_num");
        Reward reward=new Reward();
        reward.setProject_num(Long.parseLong(project_num));
        reward.setReward_num(Long.parseLong(reward_num));
        rewardDAOService.deleteReward(reward);
        return "redirect:listReward";
    }
    
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Reward;
 
public interface RewardDAO {
    public List<Reward> listReward();
    public void insertReward(Reward reward);
    public Reward detailReward(Reward reward);
    public void updateReward(Reward reward);
    public void deleteReward(Reward reward);
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package com.lat.dao;
 
import java.util.List;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.lat.beans.Reward;
 
@Repository
public class RewardDAOService implements RewardDAO{
 
    @Autowired
    private SqlSession sqlSession;
 
 
    @Override
    public void insertReward(Reward reward) {
        // TODO Auto-generated method stub
        RewardMapper rewardMapper=sqlSession.getMapper(RewardMapper.class);
        rewardMapper.insertReward(reward);
    }
 
    @Override
    public List<Reward> listReward() {
        // TODO Auto-generated method stub
        RewardMapper rewardMapper=sqlSession.getMapper(RewardMapper.class);
        return rewardMapper.listReward();
    }
    @Override
    public Reward detailReward(Reward reward) {
        // TODO Auto-generated method stub
        RewardMapper rewardMapper=sqlSession.getMapper(RewardMapper.class);
        return rewardMapper.detailReward(reward);
    }
 
    @Override
    public void updateReward(Reward reward) {
        // TODO Auto-generated method stub
        RewardMapper rewardMapper=sqlSession.getMapper(RewardMapper.class);
        rewardMapper.updateReward(reward);
    }
 
    @Override
    public void deleteReward(Reward reward) {
        // TODO Auto-generated method stub
        RewardMapper rewardMapper=sqlSession.getMapper(RewardMapper.class);
        rewardMapper.deleteReward(reward);
    }
 
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Reward;
 
public interface RewardMapper {
 
    public List<Reward> listReward();
    public void insertReward(Reward reward);
    public Reward detailReward(Reward reward);
    public void updateReward(Reward reward);
    public void deleteReward(Reward reward);
 
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0 // EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lat.dao.RewardMapper">
    <resultMap type="Reward" id="rewardMap">
        <result property="project_num" column="PROJECT_NUM"/>
        <result property="reward_num" column="REWARD_NUM"/>
        <result property="name" column="NAME"/>
        <result property="price" column="PRICE"/>
        <result property="item" column="ITEM"/>
        <result property="min" column="MIN"/>
    </resultMap>
    
    <select id="listReward" resultMap="rewardMap">
        select * from reward
    </select>
    
    <insert id="insertReward" parameterType="com.lat.beans.Reward">
        insert into reward(project_num, reward_num, name, price, item, min)
        values(#{project_num}, #{reward_num}, #{name}, #{price}, #{item}, #{min})
    </insert>
    
    <select id="detailReward" parameterType="com.lat.beans.Reward" resultType="com.lat.beans.Reward">
        select * from reward
        where project_num=#{project_num} and reward_num=#{reward_num}
    </select>
    
    <update id="updateReward" parameterType="com.lat.beans.Reward">
        update reward set 
         name=#{name}
        ,price=#{price}
        ,item=#{item}        
        ,min=#{min}
        where project_num=#{project_num}
          and reward_num=#{reward_num}
    </update>
    
    <delete id="deleteReward" parameterType="com.lat.beans.Reward">
        delete from reward
        where project_num=#{project_num}
          and reward_num=#{reward_num}
    </delete>
</mapper>
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Reward"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>detailReward</title>
</head>
<body>
Reward상세보기
<%
    Reward reward=(Reward)request.getAttribute("reward");
    if(reward==null) reward=new Reward();
%>
<table border="1">
    <tr>
        <th>project_num</th>
        <th>reward_num</th>
        <th>name</th>
        <th>price</th>
        <th>item</th>
        <th>min</th>
    </tr>
    <tr>
        <td><%=reward.getProject_num()%></td>
        <td><%=reward.getReward_num()%></td>
        <td><%=reward.getName()%></td>
        <td><%=reward.getPrice()%></td>
        <td><%=reward.getItem()%></td>
        <td><%=reward.getMin()%></td>
    </tr>
    <tr>
        <td colspan="6">
            <form method="post" action="updateReward">
                <input type="hidden" name="project_num" value="<%=reward.getProject_num() %>"/>
                <input type="hidden" name="reward_num" value="<%=reward.getReward_num() %>"/>
                <input type="submit" value="수정"/>
            </form>    
            <form method="post" action="delete">
                <input type="hidden" name="project_num" value="<%=reward.getProject_num() %>"/>
                <input type="hidden" name="reward_num" value="<%=reward.getReward_num() %>"/>
                <input type="submit" value="삭제"/>
            </form>    
        </td>
    </tr>
</table>
</body>
</html>
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Reward"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>insertReward</title>
</head>
<body>
<%
    Reward reward=(Reward)request.getAttribute("reward");
    if(reward==null) reward=new Reward();
%>
<form method="post"
<% if(reward.getProject_num()==0){%>
action="insert"
<% }else{%>
action="update"
<% }%>
>
    <table border="1">
        <tr>
            <td>Project_num</td>
            <td colspan="2">
            <% if(reward.getProject_num()==0){%>
            <input type="text" name="project_num" value="<%=reward.getProject_num() %>"/>
            <% }else{%>
            <input type="hidden" name="project_num" value="<%=reward.getProject_num() %>"/>
                <%=reward.getProject_num()%>
            <% }%>
            </td>
        </tr>
        <tr>
            <td>Reward_num</td>
            <td colspan="2">
            <% if(reward.getReward_num()==0){%>
            <input type="text" name="reward_num" value="<%=reward.getReward_num() %>"/>
            <% }else{%>
            <input type="hidden" name="reward_num" value="<%=reward.getReward_num() %>"/>
                <%=reward.getReward_num()%>
            <% }%>
            </td>
        </tr>
        <tr>
            <td>name</td>
            <td colspan="2"><input type="text" name="name" value="<%=reward.getName()==null?"":reward.getName() %>"/></td>
        </tr>
        <tr>
            <td>price</td> 
            <td colspan="2"><input type="text" name="price" value="<%=reward.getPrice()==0?"":reward.getPrice() %>"/></td>
        </tr>
        <tr>
            <td>item</td>
            <td colspan="2"><input type="text" name="item" value="<%=reward.getItem()==null?"":reward.getItem() %>"/></td>
        </tr>
        <tr>
            <td>min</td>
            <td colspan="2"><input type="text" name="min" value="<%=reward.getMin()==0?"":reward.getMin() %>"/></td>
        </tr>
        <tr>
            <td>
            <%if(reward.getProject_num()==0){%>
                <input type="submit" value="등록"/>
            <%}else{%>
                <input type="submit" value="수정"/>
            <%}%>
                <input type="reset" value="취소"/>
            </td>
            <td>
                <a href="listReward">
                    <input type="button" value="뒤로가기"/>
                </a>
            </td>
            
        </tr>
    </table>
</form>
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>listReward</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>project_num</th>
            <th>reward_num</th>
            <th>name</th>
            <th>price</th>
            <th>item</th>
            <th>min</th>
        </tr>
    <c:forEach var="reward" items="${list}">
        <tr>
            <td>
                <a href="detailReward?project_num=${reward.project_num}&reward_num=${reward.reward_num}">
                    ${reward.project_num}
                </a>
            </td>
            <td>${reward.reward_num}</td>
            <td>${reward.name}</td>
            <td>${reward.price}</td>
            <td>${reward.item}</td>
            <td>${reward.min}</td>
        </tr>
    </c:forEach>
        <tr>
            <td colspan="6">
                <a href="insertReward">
                    <input type="button" value="insert"/>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>
 cs

'Legend 개발자 > Spring' 카테고리의 다른 글

CRUD-example(Projectr_AttachFile)  (0) 2017.11.03
CRUD-example(Member_AttachFile)  (0) 2017.11.03
CRUD-example(Exam_AttachFile)  (0) 2017.11.03
CRUD-example(investment)  (0) 2017.11.02
CRUD  (0) 2017.11.02
Posted by 전설의아이
|

CRUD

Legend 개발자/Spring 2017. 11. 2. 11:44

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성)[INSERT], Read(읽기)[SELECT], Update(갱신)[UPDATE], Delete(삭제)[DELETE]를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다.

 

CRUD만들기 예:

 

가장먼저 beans를 만든다.

이는 내가 어떤 정보를 넣을 것인지 테이블 각 열의 최상단에 위치한 항목이라고 생각하면 된다.

여기서 중요한 점은 [com.lat.beans] 패키지를 만들어 다양한 beans를 하나의 패키지에 넣어서 관리한다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.lat.beans;
 
public class Dept {
 
    private int num;
    private String name;
 
    public int getNum() {
        return num;
    }
 
    public void setNum(int num) {
        this.num = num;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
}
 
 cs

 

위에서 만든 beans를 보면

Class 명으로는 Dept(부서)

Dept Class 안에 변수로는 private로 num과 name이 있다. 

SQL에서는 Primary Key, Foreign Key를 통해서 여러 테이블의 관계를 결정하기 때문에

num의 경우 PK라는 것을 알 수가 있다.

private의 경우 public과는 다르게 해당 클래스 내에서만 사용할 수 있으므로

getter & setter를 만들어 다른 곳에서도 Dept Class의 num과 name을 사용할 수 있도록 한다.

 

그 다음으로 알아볼 것은 [com.lat.dao] 패키지이다.

[com.lat.dao] 패키지의 주 역할은 java와 SQL을 연결시키는 것이다.

명명규칙으로 만들고자 하는 Class이름 뒤에 DAO를 붙인다.

이를 위해서 가장 먼저 interface로 DeptDAO와 DeptMapper를 만든다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Dept;
 
public interface DeptDAO {
 
    public void insertDept(Dept dept);
 
    public void updateDept(Dept dept);
 
    public void deleteDept(Dept dept);
 
    public Dept detailDept(Dept dept);
 
    public List<Dept> listDept();
 
}
 
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.lat.dao;
 
import java.util.List;
 
import com.lat.beans.Dept;
 
public interface DeptMapper {
 
    public void insertDept(Dept dept);
 
    public void updateDept(Dept dept);
 
    public void deleteDept(Dept dept);
 
    public Dept detailDept(Dept dept);
 
    public List<Dept> listDept();
 
}
 
 cs

 

만드는 과정은 interface명만 다르고 안에 내용은 같다.

내용으로는 insert, update, delete, detail&list 가 눈에 띄는데 이는 SQL 쿼리문과 연결시키 위한 밑작업이라는 것을 알 수가 있다.

 

다음으로 만들어야 할 것은 SQL 쿼리 문이다.

이는 Mybatis라는 Framework를 사용했으므로 주 기능은 Spring도 제공하는 JDBC 부분 중 쿼리 부분만 따로 xml로 만들어 관리 및 코딩 효율을 올려주는 역할을 한다.

이를 만들기 위해서 DeptMapper와 똑같은 이름을 가진 xml 파일을 만들어 준다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0 //EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.lat.dao.DeptMapper">
    <resultMap type="Dept" id="DeptResultMap">
        <result property="num" column="NUM" />
        <result property="name" column="NAME" />
    </resultMap>
    <select id="listDept" resultMap="DeptResultMap">
        SELECT num, name
          FROM dept
    </select>
    <select id="detailDept" parameterType="com.lat.beans.Dept"
        resultType="com.lat.beans.Dept">
        SELECT num, name
          FROM dept
         WHERE num=#{num}
    </select>
    <insert id="insertDept" parameterType="com.lat.beans.Dept">
        INSERT INTO dept(num, name)
        VALUES (#{num}, #{name})
    </insert>
    <update id="updateDept" parameterType="com.lat.beans.Dept">
        UPDATE dept 
           SET name=#{name}
          WHERE num=#{num}
    </update>
    <delete id="deleteDept">
        DELETE from dept
         WHERE num=#{num}
    </delete>
</mapper>
 cs

 

DeptMapper.xml 을 만들 때 가장 먼저 beans 에 해당하는 항목들을 가져온 후, DAO에서 만든 interface 중 insert, update, delete, detail&list 에 해당하는 쿼리문을 각각 작성해준다.

 

이작업이 완료되면 Mybatis의 쿼리문과 java Spring과 연결시키는 코드를 작성해야 한다.

우선 Class DeptDAOService를 만든다. 명명 규칙으로 DAOService 만 뒤에 붙여주면 된다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package com.lat.dao;
 
import java.util.List;
 
import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
 
import com.lat.beans.Dept;
 
@Repository
public class DeptDAOService implements DeptDAO {
    @Autowired
    private SqlSession sqlsession;
 
    @Override
    public void insertDept(Dept dept) {
        // TODO Auto-generated method stub
        DeptMapper deptMapper = sqlsession.getMapper(DeptMapper.class);
        deptMapper.insertDept(dept);
    }
 
    @Override
    public void updateDept(Dept dept) {
        // TODO Auto-generated method stub
        DeptMapper deptMapper = sqlsession.getMapper(DeptMapper.class);
        deptMapper.updateDept(dept);
    }
 
    @Override
    public void deleteDept(Dept dept) {
        // TODO Auto-generated method stub
        DeptMapper deptMapper = sqlsession.getMapper(DeptMapper.class);
        deptMapper.deleteDept(dept);
    }
 
    @Override
    public Dept detailDept(Dept dept) {
        // TODO Auto-generated method stub
        DeptMapper deptMapper = sqlsession.getMapper(DeptMapper.class);
        return deptMapper.detailDept(dept);
    }
 
    @Override
    public List<Dept> listDept() {
        // TODO Auto-generated method stub
        DeptMapper deptMapper = sqlsession.getMapper(DeptMapper.class);
        return deptMapper.listDept();
    }
 
}
 
 cs

 

DeptDAOService Class는 DeptDAO를 implements(상속)을 받는다.

그 후 Spring인 @Autowired를 통해 SqlSession의  Singleton을 만들어 객체생성의 횟수를 줄여 메모리 사용량을 줄여준다.

implements를 했으므로 interface에 미완성된 부분을 완성시켜주는데 여기서 SQL 쿼리문과 연결시키는 작업을 해준다.

 

이제 기본적인 작업은 끝났고 View단과 Control단만 남았다. 우선 Control단을 먼저 만들어 보자

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
package com.lat.controller;
 
import java.util.List;
import java.util.Locale;
 
import javax.servlet.http.HttpServletRequest;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
import com.lat.beans.Dept;
import com.lat.dao.DeptDAOService;
 
@Controller
public class DeptController {
 
    @Autowired
    private DeptDAOService deptDAOService;
 
    @RequestMapping(value = "/dept/listDept")
    public ModelAndView list() {
        List<Dept> list = deptDAOService.listDept();
        ModelAndView view = new ModelAndView("dept/listDept");
        view.addObject("list", list);
        return view;
    }
 
    @RequestMapping(value = "/dept/insertDept")
    public ModelAndView insertDept() {
        ModelAndView view = new ModelAndView("dept/insertDept");
        return view;
    }
 
    @RequestMapping(value = "/dept/insert")
    public String insert(HttpServletRequest request) {
        String num = request.getParameter("num");
        String name = request.getParameter("name");
        Dept dept = new Dept();
        dept.setNum(Integer.parseInt(num));
        dept.setName(name);
        deptDAOService.insertDept(dept);
        return "redirect:listDept";
    }
 
    @RequestMapping(value = "/dept/update")
 
    public String update(HttpServletRequest request) {
        String numVal = request.getParameter("num");
        int num = 0;
        if (numVal != null)
            num = Integer.parseInt(numVal);
        String name = request.getParameter("name");
        Dept dept = new Dept();
        dept.setNum(num);
        dept.setName(name);
        deptDAOService.updateDept(dept);
        return "redirect:listDept";
    }
 
    @RequestMapping(value = "/dept/updateDept")
    public ModelAndView updateDept(HttpServletRequest request) {
        String numVal = request.getParameter("num");
        int num = 0;
        if (numVal != null)
            num = Integer.parseInt(numVal);
        Dept dept = new Dept();
        dept.setNum(num);
        Dept deptRlt = deptDAOService.detailDept(dept);
        ModelAndView view = new ModelAndView("dept/insertDept");
        view.addObject("dept", deptRlt);
        return view;
    }
 
    @RequestMapping(value = "/dept/delete")
    public String deleteDept(HttpServletRequest request) {
        String numVal = request.getParameter("num");
        int num = 0;
        if (numVal != null)
            num = Integer.parseInt(numVal);
        Dept dept = new Dept();
        dept.setNum(num);
        deptDAOService.deleteDept(dept);
        return "redirect:listDept";
    }
 
    @RequestMapping(value = "/dept/detailDept")
    public ModelAndView detail(Locale locale, HttpServletRequest request) {
        String numVal = request.getParameter("num");
        int num = 0;
        if (numVal != null)
            num = Integer.parseInt(numVal);
 
        Dept dept = new Dept();
 
        dept.setNum(num);
 
        ModelAndView result = new ModelAndView();
        Dept deptRlt = deptDAOService.detailDept(dept);
        result.addObject("dept", deptRlt);
        result.setViewName("dept/detailDept");
        return result;
    }
 
}
 
 cs

 

간단하게 표하나를 만들고 CRUD에 알맞는 기능을 갖추어 주고, 화면에 Table을 먼저 뿌린 후 행을 추가하는 기능인 insert를 넣었고, num에 PK값을 주었기 때문에 num을 조회하면 update, delete할 수 있도록 만들었다.

 

이 기능대로라면 view단의 경우 1. 메인화면인 Table을 뿌리는 화면, 2. 조회하는 화면, 3. 뿌리는 화면이 필요하다. 그래서 아래와 같이 만들었다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Dept"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>detailDept</title>
</head>
<body>
Dept상세보기
<%
    Dept dept=(Dept)request.getAttribute("dept");
    if(dept==null) dept=new Dept();
%>
<table border="1">
    <tr>
        <td>Num</td>
        <td><%=dept.getNum()%></td>
    </tr>
    <tr>
        <td>Name</td>
        <td><%=dept.getName()%></td>
    </tr>
    <tr>
        <td colspan="2">
            <form method="post" action="updateDept">
                <input type="hidden" name="num" value="<%=dept.getNum() %>"/>
                <input type="submit" value="수정"/>
            </form>    
            <form method="post" action="delete">
                <input type="hidden" name="num" value="<%=dept.getNum() %>"/>
                <input type="submit" value="삭제"/>
            </form>    
        </td>
    </tr>
</table>
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.lat.beans.Dept"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>insertDept</title>
</head>
<body>
<%
    Dept dept=(Dept)request.getAttribute("dept");
    if(dept==null) dept=new Dept();
%>
<form method="post" 
<% if(dept.getNum()==0){%>
action="insert"
<% }else{%>
action="update"
<% }%>
>
    <table border="1">
        <tr>
            <td>num</td>
            <td colspan="2">
            <% if(dept.getNum()==0){%>
            <input type="text" name="num" value="<%=dept.getNum()%>"/>
            <%}else{%>
            <input type="hidden" name="num" value="<%=dept.getNum()%>"/>
                <%=dept.getNum()%>
            <% }%>
            </td>
        </tr>
        <tr>
            <td>name</td>
            <td colspan="2"><input type="text" name="name" value="<%=dept.getName()==null?"":dept.getName() %>"/></td>
        </tr>
        <tr>
            <td>
            <%if(dept.getNum()==0){%>
                <input type="submit" value="등록"/>
            <%}else{%>
                <input type="submit" value="수정"/>
            <%}%>
                <input type="reset" value="취소"/>
            </td>
            <td>
                <a href="listDept">
                    <input type="button" value="뒤로가기"/>
                </a>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
 cs

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>listDept</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>num</td>
            <td>name</td>
        </tr>
    <c:forEach items="${list}" var="dept">    
        <tr>
            <td>
            <a href="detailDept?num=${dept.num}">
                ${dept.num}
            </a>
            </td>
            <td>${dept.name}</td>
        </tr>
    </c:forEach>
        <tr>
            <td colspan="2">
                <a href="insertDept">
                    <input type="button" value="insert"/>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>
 cs

 

이제 서버를 가동시켜서 실행을 하면된다.

서버의 경우 무료인 Tomcat을 사용하였고, 개발환경 역시 무료인 Eclipse를 사용했다.

'Legend 개발자 > Spring' 카테고리의 다른 글

CRUD-example(Projectr_AttachFile)  (0) 2017.11.03
CRUD-example(Member_AttachFile)  (0) 2017.11.03
CRUD-example(Exam_AttachFile)  (0) 2017.11.03
CRUD-example(investment)  (0) 2017.11.02
CRUD-example(reward)  (0) 2017.11.02
Posted by 전설의아이
|

국민건강보험공단

Social Welfare/국민건강보험공단 2017. 9. 27. 15:00

기관설립일 : 2000년 07월 01일

설립근거 : 

국민건강보험법 제13조(보험자)

건강보험의 보험자는 국민건강보험공단(이하 "공단"이라 한다)으로 한다.

국민건강보험공단 정관 제1조(목적)

이 법인은 『국민건강보험법』 에 따른 건강보험사업, 『노인장기요양보험법』 에 따른 장기요양사업, 그 밖의 다른 법령에 따라 위탁받은 사업을 합리적이고 효율적으로 수행하여 국민보건 및 사회보장을 증진함으로써 국민의 삶의 질 향상에 기여함을 목적으로 한다.

설립목적

국민의 질병, 부상에 대한 예방, 진단, 치료, 재활과 출산, 사망 및 건강증진에 대하여 보험급여를 실시함으로써 국민보건 향상과 사회보장 증진에 기여함은 물론 일상생활을 혼자서 수행하기 어려운 노인에게 신체활동 또는 가사활동 지원 등의 장기요양급여를 실시함으로써 노후의 건강증진과 생활안정 도모를 목적으로 설립

주무기관

보건복지부

홈페이지

www.nhis.or.kr

소재지

강원도 원주시 건강로 32(반곡동, 국민건강보험공단)

사업자번호

105-82-11133

기관연혁

1963.12.06. 의료보험법 제정

1977.07.01. 최초의료보험 실시(종업원 500인 이상 사업장)

1979.01.01. 공무원 및 사립학교 교직원 의료보험 실시

1981.01.01. 100인 이상 사업장 의료보험 적용 확대

1988.01.01. 농어촌 지역의료보험 확대 실시

1989.07.01. 도시지역의료보험 시행, 전 국민 의료보험 실시

1998.10.01. 국민의료보험관리공단 출범(공.교공단과 227개 지역의료보험 통합)

1999.02.08. 국민건강보험법 제정

2000.07.01. 국민건강보험공단 출범(국민의료보험관리공단과 139개 직장조합 통합)

2001.07.01. 5인 미만 사업장 근로자 직장가입자 편입

2002.01.19. 국민건강보험재정건전화특별법 제정

2003.07.01. 보험재정통합(직장재정과 지역재정 통합)

2008.07.01. 노인장기요양보험 실시

2011.01.01. 사회보험 징수통합(건강보험, 국민연금, 고용보험, 산재보험)

2016.01.21. 국민건강보험공단 본사 원주 이전


주요 기능 및 역할

<건강보험 사업>

― 가입자 및 피부양자의 자격관리

― 보험료 기타 국민건강보험법에 의한 징수금의 부과·징수

― 보험급여의 관리, 보험급여비용의 지급 및 사후관리

― 가입자 및 피부양자의 건강의 유지·증진을 위하여 필요한 예방사업

― 자산의 관리·운영 및 증식사업, 의료시설의 운영

― 건강보험에 관한 교육훈련, 홍보, 조사·연구 및 국제협력

― 국민건강보험법 또는 다른 법령에 의하여 위탁받은 업무

― 기타 건강보험과 관련하여 보건복지부장관이 필요하다고 인정한 업무


<장기요양 사업>

― 장기요양보험가입자 및 그 피부양자와 의료급여수급권자의 자격관리

― 장기요양보험료 등의 부과·징수

― 신청인에 대한 조사, 등급판정위원회의 운영 및 장기요양등급 판정

― 장기요양인정서의 작성 및 표준장기요양이용계획서의 제공

― 장기요양급여의 관리 및 평가

― 장기요양급여 관련 이용지원에 관한 사항

― 재가 및 시설 급여비용의 심사 및 지급과 특별현금급여의 지급

― 장기요양급여 제공내용 확인

― 장기요양사업에 관한 조사·연구 및 홍보

― 노인성질환예방사업

― 장기요양기관의 설치 및 운영

― 그 밖에 장기요양사업과 관련하여 보건복지부장관이 위탁한 업무


<사회보험 통합징수 사업> 

― 사회보험료 통합고지, 징수

― 체납 사회보험료 징수, 보험료 수납·정산 및 기금별 이체


경영목표 및 전략

○ 2017~2021년 중장기 경영목표 


<미션> 

- 국민보건과 사회보장 증진으로 국민의 삶의 질 향상 


<비전> 

- 평생건강, 국민행복, 글로벌 건강보장 리더


<핵심가치> 

- 희망과 행복(Happiness)

- 소통과 화합(Harmony) 

- 변화와 도전(Challenge)

- 창의와 전문성(Creativity)


<5대 전략목표> 

1. 지속가능하고 의료비 걱정 없는 건강보험

2. 건강수명 향상을 위한 전국민 맞춤형 건강관리 

3. 노후 삶의 질 향상을 위한 품격 높은 장기요양보험

4. 보험자 기능 정립으로 글로벌 표준이 되는 제도

5. 자율과 혁신으로 생동감과 자긍심 넘치는 공단


<전략목표별 전략과제>

1. 지속가능하고 의료비 걱정 없는 건강보험

1-1. 안정적 재원 기반확대

1-2. 보장성 강화 정책 지원

1-3. 합리적 진료비 관리체계 수립

1-4. 효율적 재정 관리체계 구축


2. 건강수명 향상을 위한 전국민 맞춤형 건강관리

2-1. 건강증진 연계협력 강화

2-2. 만성질환 예방체계 강화

2-3. 건강검진 체계 고도화

2-4. ICT 기반 건강정보 활용체계 정립


3. 노후 삶의 질 향상을 위한 품격 높은 장기요양보험

3-1. 장기요양보험 보장성 확대

3-2. 수요자 중심의 서비스 질 향상

3-3. 서비스 제공기반 선진화

3-4. 안정적 장기요양 재정관리


4. 보험자 기능 정립으로 글로벌 표준이 되는 제도

4-1. 보험자 기능 및 거버넌스 재정립

4-2. 新보건의료생태계 창출 기반 조성

4-3. 국제협력, 통일 등 미래대비

4-4. 빅 데이터 활용 지식기반 구축


5. 자율과 혁신으로 생동감과 자긍심 넘치는 공단

5-1. 경영관리체계 선진화

5-2. 국민 신뢰의 선도적 책임강화

5-3. 정보보호 및 IT 시스템 선진화

5-4. 창의와 소통의 조직문화 구축


<기관장>

성상철 (임기: 2014.12.01 ~ 2017.11.30 )

[주요경력]

― 대한정형외과학회 회장 

― 대한병원협회 회장 

― 한국국제의료서비스협의회 회장 

― 서울대학교병원장 

― 분당서울대학교병원장

― 서울대학교 의과대학 교수


<조직도>


주요사업

1. 장기요양 운영사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

장기요양 운영사업 

- 

- 

34,082 

41,021 

50,329 


사업목적 및 내용

인정관리 및 이용지원

[인정관리]

- 합리적 인정관리 체계 마련 및 등급체계 개편 관련 모니터링으로 수급자의 지속적 확대 및 인정관리 업무 개선

[이용지원]

- 수급자 중심의 이용지원 및 장기요양기관의 급여내용 적정관리를 통한 장기요양 급여의 질 제고

자원관리

[자원관리]

-장기요양기관의 효율적 관리·지원을 통해 양질의 서비스 제공 기반을 구축

[직무교육지원]

- 장기요양 5등급 급여제공 인력 인프라 확보 및 특화된 교육으로 급여의 질 제고

- 요양보호사 직무능력 상향평준화로 장기요양 급여의 질 제고 및 처우개선

급여평가관리

[급여평가]

- 장기요양급여 평가제도의 내실화 및 하위기관 질 관리로 서비스 질 향상을 유도하고, 평가결과 공개로 알권리 및 선택권을 보장하여 어르신 삶의 질 향상 도모

정책연구지원

[제도연구지원]

- 노인장기요양보험 정책평가 및 제도개선 연구로 제도의 내실화 마련

- 노인장기요양제도의 안정적 정착 및 발전을 위한 정책방향 제시

요양제도관리

[제도관리]

- 법령 등 정비 및 제도개선 지원으로 제도의 안정적 운영

- 이의신청업무 전산화 및 권리구제 기능 강화

고객서비스 및 홍보

[장기요양정보지원]

- 장기요양 서비스 확대 및 질 향상을 위한 홈페이지 이용자 만족도 향상

- 문화공연 및 건강체험활동 제공으로 삶의 의욕 고취 및 건강증진 기여

[고객서비스지원] 

- 효율적인 고객센터 운영으로 최고의 상담서비스 제공

- 고객중심 콜 운영 및 유기적인 협력으로 대·내외 경쟁력 강화

- 공단 특성에 적합한 도급운영 및 평가를 통한 선의의 경쟁을 유도

[정책및제도홍보]

- 고객 눈높이에 맞는 맞춤형 홍보전개로 고객서비스 경영체계 강화

- 범국민적 공감대 형성을 위한 홍보활동 전개로 국민의 건강복지 만족도 향상

경영계획

[종합기획조정]

- 장기요양보험사업의 효율적 운영과 안정적 지원체계 구축

- 본부-지역본부-운영센터간 소통과 교류활성화를 통한 업무 효율성 증대

- 장기요양사업 대상자 확대 등 정책, 환경변화요소 적기 반영

- 유관기관과의 대외협력으로 사업추진 역량 강화

[직제및성과평가]

- 성과중심의 조직문화 정착으로 조직역량 강화

- 조직 및 정원의 합리적 조정으로 최적의 사업수행체계 마련

재정운용

[재정운용]

- 재정추계·분석 및 재무관리계획 수립으로 안정적 장기요양 재정관리

- 핵심사업 위주 전략적 예산편성 및 합리적 예산집행으로 경영목표 달성

- 표준화된 회계·결산에 따른 재무정보 제공으로 합리적 정책결정 지원

[지출및자금관리]

- 자금수지 관리 및 여유자금의 안정적 운용

- 자금운용 수익률 제고 및 리스크 관리 철저

- 정확하고 신속한 지출관리로 현금사고 ZERO화 실현

인력지원

[인력지원관리]

- 공정하고 합리적 인사관리를 통한 우수인력 개발 및 조직 안정화

[노사후생복지]

- 능력과 성과중심의 조직문화 정착을 통한 경영효율화합리적 복리후생관리 및 직원 만족도 제고

경영지원

[경영지원관리]

- 직원 일체감과 소속감 조성을 위한 소통과 화합의 열린 경영 추진

- 행정업무의 체계적·안정적 지원 및 계약업무의 투명·전문성 강화

- 공공기관 최대 봉사단을 활용한 사회적 책임과 나눔 경영 실천

- 보안관리·비상업무 대비 강화

[자산시설관리]

- 중소기업 우수제품 우선구매를 통한 사회적 약자와 상생협력 및 노후 집기비품 교체를 통한 사무환경 구축과 구매·계약 전문성 강화

- 고객 편의성 고려 및 안정적 임차사무실 확보로 효율적 업무 수행

- 본부이전을 통한 열악한 사무환경을 개선하여 내·외부 건강보험 고객 서비스 향상

감사

[감사]

- 내부감사 기능을 강화함으로써 경영활동의 효율적 지원 등 자율적인 경영합리화에 기여

추진근거

정관 제 37조(사업) : ②장기요양사업의 목적을 달성하기 위하여 「노인장기요양보험법」 등에 따른 업무를 수행


2. 장기요양 급여사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

장기요양 급여사업 

- 

- 

4,006,661

4,409,392

5,160,372


사업목적 및 내용

장기요양 급여비지급

[급여지급관리]

- 정확한 급여비용 지급으로 수급권 보호 및 공단 신뢰성 향상

- 적기 급여비용 지급으로 자금의 효율적 운영 및 재정안정 도모

- 장기요양 개인급여내역의 효율적 관리 및 개인정보 보호

- 본인일부부담금 환급금 지급을 통한 수급자 재산권 보호

장기요양 급여 관리

[심사운영]

- 분석정보(Risk Mart) 운영으로 부당청구사전예방을 위한 객관적 심사체계와 효율적인 현지조사를 위한 과학적인 사후분석 시스템 마련

- RFID 시스템을 통한 급여제공내용(시작·종료시간 등) 실시간 확인으로 부당청구 사전예방

[심사관리]

- 장기요양보험 제도의 내실화를 위하여 효율적인 청구·심사 체계를 구축하고 장기요양 급여비용 등을 적정·적기 지급하도록 하고자 함

[급여사후관리]

- 장기요양기관 부당청구 급여비용 환수를 통한 보험재정 안정화 도모

- 신규부당유형 적극 발굴로 급여사후관리 강화

[보험료환급관리]

- 건강보험료 과오납 환급금 충당 및 지급 시 법정이자 지급

· 보험료 등의 영수환급(이중, 착오납부) 또는 정산환급(자격소급상실, 부과조정) 시 발생

· 과오납 보험료의 환급금 지급 시 법정이자를 가산하여 지급

[현지조사지원]

- 장기요양기관 운영의 적정성 등 장기요양사업 전반을 관리·감독, 부당행위를 한 기관을 적발하여 재정 누수 방지 및 수급질서 확립

장기요양 급여기준관리

[급여기준·수가관리]

- 장기요양급여제공기준 정비로 급여제공기준의 실효성 확보 방안 마련

- 수가가산 및 감액제도 개선으로 서비스 질 향상

- 서비스 모니터링을 통한 장기요양기관의 서비스 제공 수준 점검

[복지용구관리]

- 복지용구 선정 및 관리체계 정비

- 복지용구 품목 및 급여대상 확대

- 복지용구 대여품목 소독관리체계 확립

[요양시설건강관리강화]

- 요양시설 내 의료서비스 지원을 강화하기 위한 촉탁의 관리체계 개선 추진

- 원격 건강관리 서비스를 제공하여 수급자의 의료적 욕구 해소 및 상시적 건강관리체계 마련을 위한 시범사업 추진

추진근거

정관 제 37조(사업) : ②장기요양사업의 목적을 달성하기 위하여 「노인장기요양보험법」 등에 따른 업무를 수행

- 노인장기요양보험법 제11조(장기요양보험가입 자격 등에 관한 준용), 제13조(장기요양인정의 신청), 제24조(가족요양비), 시행령 제12조(가족요양비 지급기준), 제29조(장기요양급여의제한), 제30조(장기요양급여의제한 등에 관한 준용), 제38조(재가 및 시설 급여비용의 청구 및 지급), 제42조(방문간호지시서 발급비용의 산정 등), 제43조(부당이득의 징수), 제44조(구상권), 제48조(관리운영기관 등)

- 노인장기요양보험법 시행규칙 제4조(의사소견서 발급비용 등), 제30조(장기요양급여비용의 청구 등), 제31조(장기요양 급여비용의 심사·지급), 제36조(방문 간호지시서 발급비용 등), 제41조(지방자치단체 간 분담비율), 제31조(장기요양 급여비용의 심사·지급), 제33조(장기요양급여 대상여부의 확인 등)


3. 장기요양 예방사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

장기요양 예방사업 

- 

- 

2,665

491

609


사업목적 및 내용

노인성질환예방관리

[예방사업지원]

- 지역사회 네트워크 연계 체계 강화를 통해 어르신의 삶의 질 향상

- 노인성질환 예방에 필요한 각종 사회자원 및 건강 정보제공

추진근거

노인장기요양보험법 제4조(국가 및 지방자치단체의 책무 등)

보건복지가족부 요양보험제도과-596호(2008.5.23) '노인장기요양보험과 지역보건복지 서비스 통합 연계지침'


4. 장기요양 정보화사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

장기요양 정보화사업 

- 

- 

18,180

21,601

5,481


사업목적 및 내용

정보관리 일반

[IT기획]

- 정보시스템인프라 관리

· 정보시스템(UPS 등 부대장비 포함)에 대한 유지관리

· IT인력 부족에 따른 응용개발 유지관리 실시로 원활한 전산개발 지원

· 노후화 PC(노트북) 정기 교체 및 최신 사무용 SW 도입으로 정보시스템 사용 지원

- 업무망과 인터넷망 분리

· 인터넷망과 업무망 분리를 위한 보안시스템 및 통신망 환경 구성

· 인터넷PC용 바이러스 백신 프로그램 및 인터넷 전용PC 도입

- 장기요양보험 정보시스템 안정적 운영

- 장기요양보험 DW 사용자 교육

[빅데이터운영]

- 장기요양보험 정보시스템 안정적 운영

- 장기요양보험 DW 사용자 교육

추진근거

정보관리 일반

[IT기획]

- 정보시스템 인프라관리

· 정보시스템운영지침

· 노인장기요양보험법('07.4.27.), (시행령('07.9.27.), 시행규칙('07.10.17.)

[빅데이터운영]

- 「통계법」 제4장 통계의 작성·보금 및 이용, 제11조 자체통계품질진단

- 통계관리지침


5. 행정지원사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

행정지원사업 

- 

- 

196,783

209,622

222,715


사업목적 및 내용

장기요양 인건비

[총인건비]

- 보수 등 지급의 합리성 및 관리의 효율화를 통한 인건비 적정 지급

· 보수, 퇴직급여비, 급여성복리후생비, 사회보험 사용자부담금, 월정직책급

※ '2016년 공기업·준정부기관 예산편성지침' 준수 … 인건비 인상률 3% 적용

[기타인건비]

- 「인사규정」 제103조 제1항 제1호에 따른 연구직에게 지급하는 연구활동비

장기요양 기본경비

[기본경비]

- 본부 각 부서 및 지역본부의 효율적 운영을 윟나 기본경비

· 본부 12개 부서, 연구원, 인재개발원 및 6개 지역본부별 세부사업으로 구분

추진근거

장기요양 인건비

[총인건비]

- 공기업·준정부기관 예산편성/집행지침, 임금협약, 단체협약, 보수규정

[기타인건비]

- 공기업·준정부기관 예산편성/집행지침, '예산집행지침' (공단)

장기요양 기본경비

[기본경비]

- 정부 예산편성지침 준용, 기재부 '공기업·준정부기관 예산편성지침' 준수

- 2017년도 사업예산안 편성지침('16.5월)

· 사업별 적정예산 확보 및 예산운용의 투명성·수용성 제고를 위한 예산운용체계 개선사항 반영


6. 시설관리사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

시설관리사업 

- 

- 

8,363

9,124

11,018


사업목적 및 내용

사옥관리 … 자체사옥 115개소

[본지사사옥관리]

- 자체사옥의 사전 예방점검으로 재해예방 및 시설물의 안전관리유지

- 시설물 유지보수를 통한 사무환경 개선과 장애인, 노약자 등의 이용편의 제공

- 사무환경이 열악한 임차 및 자체 사옥을 대상으로 내·외부 만족도 제고를 위한 부지매입 및 사옥신축

- 사옥관리의 효율성 증대 및 예산절감을 위한 미사용 사옥 매각

인재개발원 관리

[인재개발원운영]

- 연수시설(교육·숙박시설 등) 관리 및 유지보수를 통한 쾌적한 교육환경 조성

- 집합교육 등 내부교육에 우선 사용하고 유휴 시설은 유관기관 등 외부임대 또는 지역사회에 연계하여 활용하도록 운영

[인재개발원교육]

- 리더(관리)역량, 직무역량, 기본역량 등의 교육훈련을 통한 조직의 효율성 및 업무수행 능력의 향상

추진근거

사옥관리

[본지사사옥관리]

공단 정관 제37조 제1항 6호 : 자산의 관리·운영 및 증식사업


7. 재무지출사업

<연도별 예·결산액>

(백만원)

구 분 

'13결산 

'14결산 

'15결산 

'16결산 

'17결산 

재무지출사업 

- 

357 

-

840

28,946


사업목적 및 내용

재원관리

[예비비]

- 예측할 수 없는 예산외의 지출이나 예산을 초과하는 지출에 대비

※ 요양급여비를 제외한 예산액의 3% 이내 금액

추진근거

지원근거

- 국민건강보험공단 정관 제56조(예비비)

추진경위

- '09년부터예측할 수 없는 예산외의 지출을 대비한 일반 예비비 및 경영평가성과급 등 목적성 예비비를 편성 지급대비


2016회계연도 감사보고서

공단의 개요

국민건강보험공단(이하 "공단")은 국민의 질병·부상에 대한 예방·치료·재활과 출산·사망 및 건강증진에 대하여 보험급여를 실시함으로써 국민보건을 향상시키고 사회보장을 증진함을 목적으로 국민건강보험법에 의거 2000년 7월 1일에 종전의 국민의료보험관리공단과 직장조합을 통합하여 설립된 무자본 특수법인입니다. 공단의 본부는 강원도 원주시 건강로 32(반곡동, 국민건강보험공단)에 위치하고 있으며, 6개 지역본부와 178개 지사를 두고 있습니다.

한편, 공단은 2008년 7월 1일부터 노인장기요양보험법 제48조에 의한 장기용양보험 가입자 및 그 피부양자와 의료수급권자의 자격관리, 장기요양보험료 등의 부과징수, 신청인에 대한 조사, 등급판정위원회으이 운영 및 장기요양등급 판정, 장기요양급여의 관리 및 평가, 재가 및 시설 급여비용의 심사 및 지급과 그 밖의 장기요양사업과 관련하여 노인장기요양보험법 또는 다른 법령에 의하여 위탁받은 업무 및 기타 노인장기 요양보험과 관련한 사업을 영위하고 있습니다.

2011년 1월 1일부터 국민연금법 제88조에 의해 4대 사회보험(건강보험, 국민연금, 고용보험, 산재보험) 징수업무를 3개 공단에서 각각 수행하던 것을 국민건강보험에서 통합관리하게 되었습니다. 이에 따라, 복합민원 시스템 관리, 사업보험료 등의 고지관리, 수납관리, 정산, 납부확인서 발급뿐만 아니라 체납사회보험료 등의 독촉 고지, 체납처분 승인 및 재산조사, 압류 및 압류해제 관리, 분할납부 관리, 결손처분 및 사후관리 및 저소득·취약계층 보험료 지원업무를 국민건강보험법 등에 따라 영위하고 있습니다.

또한, 공단은 국민건강보험법 제 14조 제1항12호 및 13호에 의해 규정된 타 기관장 및 단체장의 업무 중 일부를 위탁 받아 그 업무를 수행하고 있습니다. 위탁받은 업무의 수행 시 필요한 비용을 해당 기관 및 단체로부터 매월 예탁을 받아 그 금액의 범위내에서 지출하고 있습니다.

공단의 회계는 크게 건강보험사업과 장기요양사업, 사회보험통합징수사업 및 수탁사업으로 나누어지며, 건강보험사업 회계는 건강보험업무와 본지사 사옥 관리 및 이와 관련된 모든 거래에 대한 회계업무처리를 관장하는 일반회계와 의료시설 등을 관리 운영함에 따라 발생하는 모든 거래에 대한 회계업무처리를 관장하는 특별회계로 구분하고 있습니다. 장기요양사업회계는 일반회계와 특별회계로 구분하고 있으며, 일반회계는 장기요양보험료를 재원으로 하는 재정과 국가ㆍ지방자치단체 부담금을 재원으로 하는 재정으로 구분하고 있습니다. 또한 장기요양기관 등을 관리 운영함에 따라 발생하는 모든 거래에 대한 회계업무처리를 장기요양사업회계의 특별회계로 구분하고 있습니다. 사회보장통합징수사업 회계는 국민연금사업, 고용보험사업, 산업재해보상보험사업, 임금채권보장사업 및 석면피해구제사업으로 구분하고 해당 징수위탁사업에서 발생하는 모든 거래를 처리하는 회계입니다. 수탁사업회계는 의료급여비지원, 건강생활유지비 지원, 임신출산진료비 지원 등 20개의 수탁사업회계로 구분하고 있습니다.


경영평가 지적사항

2016년도

(4) 장기요양사업

① 장기요양제도 만족도 목표가 완만한 목표라고 판단되므로 보다 도전적인 목표를 설정할 필요

② 장기요양보험 신청 안내 타깃팅 기준을 장기요양사업의 취지를 반영, 85세 이상 최고령자 집단을 최우선으로 포함하여 80세 이상을 1차 타깃팅으로 선정

③ 건강검진의 인지기능장애 평가도구 문진표 결과를 활용한 장기요양 인정신청 안내가 효과적이지 못하므로 개선 노력 필요

④ 체계적이고 효과적인 사전 예방 시스템 강화 노력 필요

⑤ 장기요양 인정률은 7.06%('15년)로 OECD 평균 인정률 12.7%('13년)에 크게 못 미치고 있어 이를 개선하기 위한 노력이 지속적으로 필요

⑥ 장기요양비 지출이 OECD 평균대비 40% 수준에 불과하여 향후 5년간 9.7% 증가가 전망되므로 수입확충 및 지출합리화 등을 통한 중장기 재정관리 강화 필요

지적사항

조치계획 

조치내용 및 결과 

① 장기요양제도 만족도 목표가 완만한 목표라고 판단되므로 보다 도전적인 목표를 설정할 필요 

○ 장기요양보험제도 만족도 목표 상향 조정

- ('15년) 89.3% → ('16년) 90.1% … '15년 만족도 89.7% 대비 0.4%↑

○ 만족도 산출방식 개선으로 조사결과 신뢰도 제고

- (현행) 긍정 응답비율 산출('만족 이상) → (개선) 100점 척도 산출

○ 직무급을 성과연봉에서 분리운영으로 조치 완료

② 비간부직의 성과중심 보수체계 구축 및 성과연봉체

○ 맞춤형 타깃팅으로 사각지대 해소 추진

- 80세 이상 치매 진료자, 실종이력 있는 치매 노인, 중풍 등 뇌질환자를 대상으로 장기요양 신청 안내문 발송

○ 맞춤형 타깃으로 사각지대 해소노력

- 장기요양 신청자의 평균 연령은 79.3세, 인정자의 평균 연령은 80.8세인 점을 고려하여 80세 이상을 타깃으로 선정

- 치매 진료내역이 있거나 치매 진료 후 치료 약제 복용중인 노인을 선정 노인장기요양보험 신청 안내문 발송(71,215명)

○ 신청대비 인정률 72.5%(적중률 전년대비 18.9%↑)

- 신청자 4,631명, 인정자 3,356명

③ 건강검진의 인지기능장애 평가도구 문진표 결과를 활용한 장기요양 인정신청 안내가 효과적이지 못하므로 개선 노력 필요

○ 신청 안내대상 선정 기준 변경

- 치매 유병률이 높은 연령대 집중 안내 추진

- (기존) 만 66세, 70세, 74세 → (변경) 74세

○ 실질적인 장기요양 서비스가 필요한 대상으로 안내 실시

- 기존 건강검진 인지기능 저하자 (66세, 70세, 74세) 대상 1차 안내문 발송

- 5개월 후 연령이 높고(70세, 74세) 치매 진단을 받은 자에게 2차 장기요양 인정신청 타깃 안내 

④ 체계적이고 효과적인 사전 예방 시스템 강화 노력 필요

○ 급여비용 지급 전 사전예방체계 강화

- 부당청구감시시스템(FDS) 구축('16.4. 오픈)

- 부당모형 심사연계를 통한 정밀 심사 기반 제공

○ 지속적인 모형개발 위한 「청구경향분석심의위원회」 운영

- 분석과제 선정·검증 → 신규 부당 모형 발굴 및 활용(현지조사 등)

FDS시스템 가동('16.4)

- 빅데이터와 현장경험을 접목한 정교한 분석시스템 구출(부당모형 84개)

' 청구, 심사, 현지조사 실시간 업무지원(사전모형 28개, 사후모형 47개, 이상징후 통계모형 9개)

○ 청구심사 정교화

- 급여비 지급전 사전 부당모형 28개 탑재 → 94개 항목 수기심사, 178억원 반송(전년대비 39.8%↑)

- 종사자 해외출입국 내역 등 5개 모형 최초 정밀심사 구현, 12.7억원 사전차단

○ 현지확인 심사 확대

- 청구내용 현지확인심사 확대 207개소(전년대비 26.2%↑) → 126개소, 1.9억원 부당확인

- 기획 현지확인심사 254개소 중 185개소, 4.3억원 부당확인(현지조사 102개소 의뢰) → 방문 목욕 과다, 사회보기사 가산 등 사전 부당모형 활용 

⑤ 장기요양 인정률은 7.06%('15년)로 OECD 평균 인정률 12.7%('13년)에 크게 못 미치고 있어 이를 개선하기 위한 노력이 지속적으로 필요

○ 수급자 발굴을 위한 홍보계획 수립·시행(16.4.15.)

- 빅데이터 활용한 맞춤형 타깃팅 홍보 

- 건강검진결과 인지기능 저하자 대상 5등급 제도 안내

○ 장기요양 갱신절차 간소화 추진 

- 갱신결과 동일등급자 인정유효기간 연장(1등급 4년 등)

- 신체기능 호전을 예상하기 어려운 수급자는 갱신조사 생략 등

○ 인정률 편차 분석 및 관리방안 마련

- 「인정률 편차 분석 및 관리방안」 연구 추진('16.5.~12.)

- 전문가 및 유관기관 등 각계의 의견 수렴을 위한 공청회 개최

- 인정조사 전문성 강화 등

 - 유관기관 협업 : 경찰청 등 기관간 협업을 통하여 취약대상 집중 발굴

- 대국민 홍보 : 공익 캠페인 및 보도자료 배포 등 홍보 실시

- 인정조사 판단기준 개선 : 수행능력 판단기준(5개 항목) 합리적 완화로 6.5천명 수급자 확대

○ 장기요양 갱신절차 간소화 추진완료('17.1.1. 시행)

- 갱신결과 동일등급자 인정유효기간연장(1등급 4년, 2~4등급 3년)

○ OECD 장기요양 인정률 산정기준은 운영방식, 재원부담, 연령기준 상이로 단순 비교는 어려움

- 그러나, 우리나라도 제도 및 재원부담 주체를 불문할 경우 65세이상 노인인구 중 장기요양 수급자, 노인돌봄 서비스 이용자, 건강백세 운동교실 이용자, 요양병원 입원자를 포함하면 13.1% 정도 혜택을 받고 있는 것으로 추정됨

- 인정률 편차 분석 및 관리방안 마련 연구용역 추진(16.5~12월) 및 전문가 등 각계의 의견 수렴을 위한 공청회 개최(16.9.8)

○ 장기요양 수급자 5만2천명, 전년 대비 11.1%↑대폭 증가

⑥ 장기요양비 지출이 OECD 평균대비 40% 수준에 불과하여 향후 5년간 9.7% 증가가 전망되므로 수입확충 및 지출합리화 등을 통한 중장기 재정관리 강화 필요

○ 중장기 재무관리계획 수립, 지출합리화 추진

- '장기요양 재정실무협의체' 구성

- 중장기 재무관리 실행과제 추진

(수입확충 11개, 지출합리화 7개)

○ 요양급여비 지출 증가 추세 반영한 재무관리계획 수립하여 정부 설득

- 국고지원금 297억원 증액 확보

○ 중장기 재정관리계획 수립을 통한 재정건전화 실행방안 마련

- '16년도 재무관리 목표 달성 ... 부채비율 실적 22.2%(목표 24%)

○ '16년도 재정건전화 과제 추진으로 3,634억원 추가 재원확보 ... 122.4% 달성(목표 2,970억원)

- 수입확충 11개 과제 2,658억원

- 지출절감 7개 과제 976억원


2015년도

(4) 장기요양사업

① 장기요양 인정률 개선을 위한 체계적 전략 수립 및 도전적 목표 설정 필요

② 장기요양제도 만족도 개선과 장기요양 수혜자나 그 가족들의 니즈 파악 만족도 측정 노력 미흡

③ 빅데이터 분석에 기반한 부당금액 환수 활용방안 모색 및 전문인력 확보 필요

④ 급여비 청구에 대한 사전 예방 활동을 강화할 수 있는 선제적 개선방안 마련

⑤ 치매전문인력 교육의 양과 질을 제고할 수 있는 평가시스템 개발과 활용 필요

⑥ 수급자 맞춤형 상담관리 위해 수급자 니즈를 파악하고 반영하는 제도마련 필요


ICT(Information and Communications Technologies)는 창조경제의 기반이다. 특히 최근에는 빅데이터, 모바일, 웨어러블이 새로운 화두가 되고 있다. 더 나아가 사물 인터넷은 인간과 인간 사이의 연결뿐만 아니라 인간과 사물의 연결, 사물과 사물의 연결도 가능하게 한다. 창조의 가능성이 무한하게 열려 있다 해도 과언이 아니다. 그러나 여기에 개인 정보 보호와 프라이버시 보호 등을 보완해야 진정한 창조경제를 만들 수 있다.


창조경제의 기반


ICT는 창조경제의 핵심 기반이다. ICT가 모든 산업과 기업의 인프라로서 기존 상품과 서비스를 고도화하고, 또한 새로운 상품과 서비스를 만들어 낸다. 무엇보다도 인터넷은 우리 경제를 디지털 경제로 완전히 탈바꿈시켰다. 브로드밴드는 이러한 인터넷을 빠르고 편리하게 이용할 수 있게 했다. 우리나라는 브로드밴드 보급률에서 세계의 선두 국가로, 창조경제에 가깝게 갈 수 있는 디지털 경제를 구현해 냈다.


ICT 분야에서는 최근에 BMW가 화두가 되고 있다. BMW는 빅데이터(Big Data), 모바일(Mobile), 웨어러블(Wearable)을 의미하는 신조어다. 모든 서비스를 데이터로 치환하여 맞춤형, 개인형 서비스로 탈바꿈하여 제공하는 것은 이제 우리가 대중(Mass)의 시대에서 개인(Personal) 시대로 들어가는 기술적인 기반이 된다. 


모바일은 시간과 공간의 한계를 넘어서 언제 어디서나 연결되고 소통할 수 있는 기반이 되었다. 한편 기존에 사각형 위주로 정형화한 형태의 디바이스가 지닌 한계를 넘어서 입고, 휘고, 걸치는 등 다양한 형태의 디바이스는 이제 인간을 넘어 사물도 소통의 장으로 끌어들이는 혁신이다. 결국 BMW에 창조경제의 새로운 가능성이 담겨 있는 것이다.


빅데이터는 ICT 분야의 새로운 패러다임을 만드는 기폭제와 같은 역할을 하는 새로운 서비스다. 빅데이터란 기존의 관리와 분석 체계로는 처리할 수 없었던 방대한 데이터를 말한다. 그런데 이제는 이런 데이터를 빠르게 분석할 수 있는 기술이 등장하면서 빅데이터가 사회와 경제 분야에서 주목받기 시작한 것이다. 대규모 데이터와 관계된 기술과 도구(수집·저장·검색·공유·분석·시각화 등)도 빅데이터의 범주에 포함된다. 


과거 빅데이터는 천문·항공·우주 정보, 인간 게놈 정보 등 특수 분야에 한정됐으나 ICT의 발달에 따라 이제 산업 전 분야로 확산되고, 어느덧 우리 일상생활에까지 파급되었다. 이제는 ICT를 전망할 때 빼놓지 않고 등장하고 있는 분야가 빅데이터가 되었다. ICT의 일상화가 이루어지는 스마트 시대에는 소셜, 사물, 데이터 등이 결합해 빅데이터의 영향력이 증대한다.


2008년 2월 구글은 ‘구글 독감 트렌드 서비스’라는 독감 유행 수준을 파악하는 서비스를 발표하였다. 구글은 독감에 걸리면 나타나는 증상들에 관한 검색어가 얼마나 자주 검색됐는지를 파악하여 독감 확산을 예측해 미국 질병통제예방센터(Centers for Disease Control and Prevention)의 공표보다 열흘 앞서 독감의 창궐을 탐지하는 성과를 이루어 냈다. 이는 종전에는 감지하기 어려웠던 수많은 커뮤니케이션으로부터 데이터를 분석하여 의미 있는 결과를 도출해 낸 것이다. 서울시가 심야 버스 운행을 위해 최적의 노선을 찾는 데 빅데이터 기술을 사용한 것은 빅데이터가 바로 우리 생활 가까이에 있음을 보여 주는 사례다.


이렇게 빅데이터가 중요해지는 이유는 첫째, ICT 주도권이 데이터로 이동하기 때문이다. 모바일, 클라우드, SNS의 등장으로 근본 인프라와 데이터에 변화가 일어났고, 이에 따라 데이터를 바라보는 시각이 변화했다. 무엇보다도 데이터 폭증에 대한 대응과 데이터 분석이 ICT의 중요 이슈로 부각되며 빅데이터가 ICT 시장과 기술발전의 핵심 주제로 인식된 것이다.


둘째, 2010년 이후 본격적인 스마트, 모바일 확산과 함께 사용자들이 자발적으로 참여하고, 정보를 생성하는 소셜 데이터 혁명이 발생한 것도 주요 원인이다. 페이스북, 트위터 등 SNS 이용 확산과 커뮤니케이션 방식의 변화는 데이터 변혁을 가져온 가장 중요한 요인이 되었다.


셋째, 이에 따라 세계의 정부와 기업들은 빅데이터가 향후 조직이나 기업의 성패를 좌우할 수 있는 새로운 사회적, 경제적 가치의 원천이 될 것으로 보고 있다. 빅데이터에서 유용한 정보를 찾아내고 잠재된 정보를 활용할 수 있는 기업들은 시장을 선도할 수 있는 반면, 그렇지 못한 기업들은 뒤떨어질 것이기 때문이다(한국정보화진흥원, 2013a).


이제 구글(Google)은 검색엔진 회사가 아니라 빅데이터 기업으로 불릴 정도가 되었다. 아마존(Amazon)이나 나이키(Nike) 등 많은 기업들도 소비자들의 데이터를 분석하여 사업에 활용하고 있다. 소비자들이 쏟아내는 엄청난 디지털 데이터와 이러한 데이터를 분석하는 도구의 개발로 기업은 소비자들을 정교하게 분류하여 제품이나 서비스를 이러한 수요에 맞추어 제공할 수 있다. 소위 ‘버려진’ 데이터를 가지고 새로운 제품이나 서비스를 만들어 낼 수 있는 기회가 무수하게 늘었다는 것만으로도 빅데이터는 창조경제의 기반이 되기에 충분하다. 세계의 데이터 양이 2년마다 두 배로 증가하는 엄청난 데이터 홍수 속에서 빅데이터의 잠재력을 현실화하면 공공, 민간 영역에서 성과는 크게 향상될 것이다.


한편 스마트폰 기기 보급률이 100%를 넘어섬으로써, 우리는 이제 언제 어디서나 연결돼 일을 하고, 휴식을 가질 수 있게 되었다. 모바일은 우리의 시간과 공간의 한계를 극복하게 만드는 결정적인 도구다. 이렇게 되면 디지털 이용과 물리적인 경험이 자연스럽게 통합된다. 물리적인 세상이 디지털적인 성격을 갖게 되고, 디지털 상호작용이 쇼핑과 같은 물리적인 경험과 혼합되는 것이다. 


기업들은 물리적인 세상에서 이루어지던 경험들에 디지털 증강 기술을 적용하여 소비자들과 새로운 관계를 맺는다. 삼성전자는 소비자들이 표시판에 스마트폰을 가까이 대기만 해도 디지털 콘텐츠를 다운로드할 수 있는 NFC(Near Field Communication) 빌보드를 갤럭시S3 스마폰에 적용하였다(한국정보화진흥원, 2013b). 인간은 이제 모바일 기기를 통해 온라인 서비스에 항상 접속되어 있는 생활 행태를 갖게 된다.


초연결 사회


이런 환경에서는 사물 인터넷(Internet of Things)이 필수가 된다. 지금까지의 인터넷 이용이 인간과 인간의 커뮤니케이션을 확장하는 데 기여했다면, 이제는 사물과 사물의 연결로까지 인터넷이 확장되는 것이다. 스마트폰, 태블릿 등 모바일 기기의 보급이 확대되고 스마트 시계, 스마트 안경, 스마트 카 등으로 스마트화의 대상이 확대되면서 이제 인간은 보다 시야를 넓혀 각종 사물들이 인터넷에 연결되고 스마트화하는 환경을 만들어 가고 있다. 


자동차, 가로등, 신발, 옷, 의학기기 등 모든 사물이 연결되면 스마트 기기는 몇 개가 아니라 500억 개 이상으로 늘어난다. 기계와 인간, 기계와 기계가 교류하고 대화하는 시대가 오는 것이다. 특히 소비자 가전, 자동차를 중심으로 사물 인터넷은 증가할 것으로 예상된다.


사물 인터넷은 웨어러블 디바이스와 밀접한 관계를 맺고 있다. 기존에는 디바이스가 서비스와 별도로 존재해 왔고, 또 디바이스 각각의 특성을 유지한 채 이용되어 왔다. 그러나 이제 디바이스는 점차 플랫폼으로 확산되거나 통합하려는 환경으로 변화하고 있다. 특히 모바일 디바이스가 변화의 핵심에 자리 잡고 있다. 이동성(Mobility)을 통해 예전에는 생각하지 못한 범위로 확장되는 것이다. 여기에서 웨어러블 디바이스가 필수다. 


아예 항상 몸에 착용하는 데까지 ICT를 연결하여 인간과 사물을 보다 쉽게 연결시키고, 디테일한 정보를 이용할 수 있게 하여 정보 이용의 범위를 크게 확대하는 데 기여하는 것이다. 특히 헬스와 건강에 대한 정보를 통해 자신의 건강 상태를 수시로 체크할 수 있게 하며, 혹시 발생할 수 있는 위급한 상황에 대처할 수 있는 장점이 있다.


또한 웨어러블 디바이스를 통해 스마트폰을 사용하지 않는 시간과 야외 활동에 대한 정보를 확보할 수 있고, 이러한 데이터에 다양한 서비스를 연계해서 제공할 수 있는 장점이 있다.


이런 변화에 따라 이용에서도 혁신이 나타나고 있다. 2013년 삼성전자는 갤럭시 기어라는 스마트 시계를 출시하였고, 구글은 구글 안경(Google Glass)을 개발하였다. 세계적인 두 ICT 기업이 시계와 안경에 주목한 것은 의미심장하다. 스마트 시계를 통한 개인 정보 활용은 물론, 스마트폰이나 태블릿, 노트북 등과 결합한 동반 서비스가 가능하다는 장점이 있다. 디바이스 간 데이터 이동의 매개체 역할을 할 수 있는 것이다.


이러한 예는 모든 사물로 확대된다. 예컨대 ‘스마트 칫솔’은 칫솔에 센서가 내장되어 이를 닦을 때 치석이 얼마나 껴 있는지 감지하여 알려 준다. 전용 앱을 사용하면 이를 닦는 동안 치약을 얼마나 썼는지, 올바르게 칫솔질을 했는지 등 상세한 정보를 알 수 있다. 또한 ‘스마트 유아복’은 체온과 맥박 등 아기의 신체 정보를 수집하여 실시간으로 부모에게 전달해 주는 기능을 제공한다. 그야말로 모든 사물에 ICT가 결합되는 혁명적인 생활 환경을 맞고 있는 것이다.


그러나 이렇게 ICT가 우리 생활에 깊숙이 파고들수록 개인 정보 보호는 점점 더 중요해진다. 모바일을 통해 항상 접속되면서 디지털 경험과 실제 경험이 통합되는 것은 프라이버시를 더욱 취약하게 만든다. 따라서 개인 정보 보호를 위해 사회와 기업, 개인의 인식 전환이 필요한 때이다. 데이터의 증가로 민감하거나 부적절하게 위장된 데이터로 인한 위험도 증가한다. 지적재산권 문제도 발생한다. 데이터 권리나 공유를 위한 정책이 필요하다.


ICT의 발전을 통해 우리 사회는 진정한 ‘초연결 사회’를 구현하는 방향으로 변화하고 있다. 인간과 인간, 인간과 사물, 사물과 사물이 인터넷과 모바일로 연결되는 이러한 초연결 사회야말로 창조경제가 구현될 수 있는 기반이다. 우리나라는 특히 이러한 초연결 사회의 가능성이 가장 높은 사회의 하나다. 단순하게 경제를 넘어서 사회 전체가 창조 사회로 가는 길을 ICT가 깔고 있다.



















Posted by 전설의아이
|

와디즈 FAQ

Legend 개발자/기업 2017. 9. 25. 10:25

1. 와디즈에서 투자하는 방법이 궁금하다면

Q. 와디즈 투자? 주식투자 같은건가요?

와디즈는 코스닥, 코스피에 상장되지 않은 초기기업이 일반 대중으로부터 투자금을 모으는 플랫폼입니다. :) 투자자 입장에서는 1만원부터 200만원까지 소액으로도 기업에 투자할 수 있고, 쇼핑하듯이 온라인으로 투자할 수 있기 때문에 아주 매력적인 서비스라고 할 수 있지요!

평생 만나보기 어려웠던 좋은 기업들에 '직접 투자' 해보시고, 기업들의 성장을 함께 지켜보며 색다른 주주총회에 참여하거나, 남다른 수익률을 경험해보시기 바랍니다. 

꼭 읽어주세요!

- 와디즈에는 기업의 주주가 되는 <주식형> 투자와 고정/변동 금리에 대한 이율을 지급받는 <채권형> 투자로 나뉘어져 있습니다.

- <주식형> 투자 중에는 <소득공제>가 되는 프로젝트가 있답니다! (아주아주 좋은 꿀혜택이오니 꼭 잊지 말고 챙겨가세요)  소득공제 안내 바로가기

- <주식형>은 기업가치가 적정한지, 기업의 성장 가능성이 있는지를 판단해보시고 <채권형>은 회사가 안정적인지, 이율이 매력적인지 등을 판단해보시기 바랍니다.


5분만에 와디즈 투자회원 가입하기

1. 이메일을 입력하고

2. 이메일 인증을 하고 

3. 비밀번호를 입력하면 1단계 완료!

※ 주민등록번호, 주소, 신분증과 같이 금융거래를 위한 법적 필수 정보를 입력합니다.

4. <휴대폰 본인인증> 또는 범용공인인증서로 본인인증을 합니다.

5. 실명확인증표(주민등록증, 운전면허증, 여권 中 택1)을 업로드 합니다.

     - 투자를 하시려면 실명확인증표를 업로드 하신 후 인증이 되셔야 합니다 :)
     - 신분증은 회원가입 시점으로부터 3시간 이내에 확인되오니 잠시만 기다려주세요.

이제 투자를 해봅시다!

1. 출금계좌, 보안카드(또는 OTP), 공인인증서를 준비해주세요.

※ 증권계좌가 필요한 이유는 투자한 증권(주식 또는 채권)을 입고받아야 하기 때문입니다. 투자금을 이체하실 때는 주거래 은행계좌를 사용하셔도 무방합니다 :)

2. 투자하실 프로젝트를 클릭해주세요. (페이지 URL이 있다면 바로 접속해주세요!)
3. <투자하기> 버튼을 클릭해주세요.

4. 주식의 경우 주식수량을, 채권의 경우에는 구좌수량을 입력합니다.
1구좌당 10만원인 경우 5구좌를 입력하면 자동으로 50만원!
(일반 투자자는 한 기업당 200만원까지 투자 가능. 연간 500만원까지 투자가능)

5. 증권계좌 또는 상환계좌를 설정합니다.
주식형의 경우에는 무조건 증권계좌가 필요합니다. 단, 채권형 중에 채권이 입고되지 않고 종이채권(실물)로 발행되는 경우에는 아래와 같이 <상환 계좌>만 입력받고 있습니다. 은행계좌를 입력하시면 채권 만기일에 돈을 상환하는 구조라고 생각하시면 됩니다 :)

6. 청약하신 수량과 금액, 투자위험고지 내용을 이메일로 발송해드립니다. 내용을 확인하신 후에 인증번호를 입력하시고 <인증하기>, <작성 완료> 버튼을 순차적으로 클릭해주세요.

7. 투자 예약 (청약신청서 작성)이 완료되었습니다. 
   <증거금 입금 기한>까지 투자금(증거금)을 이체해주세요.! 

실시간 투자금(증거금) 이체하기

실시간 이체하기 버튼을 클릭하면 <BANK PAY> 실시간 이체 창이 뜹니다.
출금계좌와 보안매체 (보안카드, OTP), 공인인증서 비밀번호까지 입력하면 끝!

혹시 과정이 어려우신가요!
오른쪽 하단에 있는 채팅창을 이용하시면 1:1로 친절한 안내를 드립니다 : )

추가 궁금하신 사항은 아래 투자자용 가이드북을 찬찬히 살펴봐주세요 :) 
감사합니다.


Q. 와디즈는 안전한 회사인가요?

A. 네, 그렇습니다. No.1 크라우드펀딩 와디즈입니다.

'안전하다'는 것이 주관적 성격이 강한 단어이긴 하지만 와디즈는 안전한 회사입니다. 다양한 신뢰 장치들을 통해 안전성을 확보하고자 노력하고 있습니다.

발행기업이 폐업이 되거나 재정적 어려움이 있을 수는 있지만, 건전한 크라우드펀딩이 지속가능할 수 있도록 중개플랫폼으로서 최선을 다하고 있습니다.

1. 자본시장법에 근거한 온라인소액투자중개업으로 금융위원회에 등록된 금융회사로 법적 규율 내에서의 안정성이 있습니다.

2. 투자자 보호를 위해 마련된 법적 규제 장치들이 있습니다.

그렇다면 와디즈에서 투자할 때 전혀 리스크가 없는 것일까요? 그렇지는 않습니다. 와디즈에서 크라우드펀딩을 진행한 발행기업에게 이슈가 생기는 경우에는 리스크가 발생할 수 있습니다. 예를 들어 회사가 폐업을 하거나, 폐업하지는 않아도 기대만큼 회사가 성장하지 못하거나, 지분 희석이 발생하는 경우 등에는 투자하신 원금을 회수하지 못하실 수도 있습니다.


Q. 와디즈와 P2P 대출 어떻게 다른가요?

A. 비슷한 것 같은데, 다른! 와디즈와 P2P 대출을 설명드리겠습니다.

와디즈와 P2P(Peer to Peer) 대출은 비슷하지만 다른 종류의 크라우드펀딩을 서비스하고 있습니다.

크라우드펀딩(Crowd funding)이라는 말을 들어보셨나요?

군중을 뜻하는 크라우드(Crowd)와 자금을 모으는 의미의 펀딩(Funding)이 합쳐진 단어랍니다. 자금을 필요로 하는 수요자를 위해 금융기관 없이 소셜네트워크를 기반으로 불특정 다수(Crowd)가 온라인을 통해 십시일반으로 자금을 모으는 것을 뜻합니다.

이러한 크라우드펀딩의 종류는 4가지가 있습니다.

- 리워드형(후원형): 펀딩의 댓가로 제품이나 서비스를 받을 수 있음

- 투자형(지분투자형): 펀딩의 댓가로 주식이나 채권 등을 받을 수 있음

- 대출형: 최근에 잘 알려진 P2P가 대출형에 해당하며, 소액 대출을 통해 개인/사업자가 원금 및 이자를 상환하는 방식

- 기부형: 보상의 조건이 없이 순수한 기부만을 목적으로 함

와디즈는 현재 리워드형과 투자형을 서비스하고 있고, P2P는 대출형에 해당합니다. 같은 크라우드펀딩이라는 영역이지만 종류가 다른 크라우드펀딩인 것이지요.

그렇다면, 무엇이 다른걸까요? 

P2P와 와디즈의 투자형을 비교해드리겠습니다. 투자자가 느낄 수 있는 매력포인트가 와디즈에는 많습니다.

첫 번째로 직접 투자인지 아닌지의 차이점이 있습니다. 자금을 모집하고자하는 수요자(기업 등)에게 투자자가 직접 투자를 할 수 있다는 점이 와디즈에서 누릴 수 있는 매력포인트가 되겠습니다. P2P 역시 새로운 영역이라 낯설기도 하실텐데요. 투자자와 자금수요자의 관계를 놓고 볼 때 P2P는 직접 대출계약이 체결되는 관계는 아닙니다. 대부분의 P2P 회사들은 '원리금수취권매매형'의 방식으로 자금조달과 원리금상환을 진행하고 있습니다.

두 번째로 투자자 입장에서는 이자(이익)에 부과되는 세율이 다릅니다. 예를 들어 와디즈에서 채권에 투자를 하였고 그에 이익이 발생했다면, 세율은 15.4%입니다. P2P는 비영업대금의 이익이기 때문에 세율은 이자소득세 25%와 지방소득세 2.5%(총 27.5%)입니다. 

세 번째로 소득공제의 혜택에 있어서 차이점이 있습니다. '중소기업창업투자조합에의 출자 등'에 해당할 경우에 소득공제 혜택을 받을 수가 있는데요. 와디즈의 크라우드펀딩을 통해서 벤처기업과 중소기업의 주식에 투자할 수 있기 때문에 소득공제 혜택을 받으실 수 있게 됩니다. P2P의 특성상 주식에 투자하는 방식은 아니기 때문에 아쉽게도 소득공제 혜택은 없습니다. 소득공제 관련한 자세한 내용은 여기를 클릭해서 확인해주세요 😄

네 번째로 일정 요건을 갖춘 크라우드펀딩 성공기업은 KONEX(코넥스) 시장에 특례상장이 가능합니다.

구분

추천인

특례상장 요건 

금액

투자자수

펀딩성공기업

중개사

3억원 

50인(전문투자자 2인 포함) 

정책기관 

1억원

50인(전문투자자 2인 포함) 

KSM 등록기업

중개사

1.5억원

50인(전문투자자 2인 포함) 

정책기관

0.75억원 

50인(전문투자자 2인 포함) 


Q. 와디즈 투자 수익률은 와디즈에서 보장하는 것인가요?

A. 와디즈의 모든 투자형 프로젝트는 원금 손실 가능성이 있습니다.

와디즈를 믿고 투자해주는 분들이 참 많으신데요.

한 가지 분명하게 말씀드릴 것은 와디즈에서 만나실 수 있는 모든 투자형 프로젝트들은 원금 손실의 가능성이 있습니다.

따라서 해당 기업이 앞으로 급격하게 성장할 것이라는 보장도, 투자 수익률도, 주가가 상승할 것이라는 약속도 해드릴 수는 없습니다 😅

특히 '투자설명서'에 대해서는 와디즈에서 '사실확인'이라는 단계를 거치고 있습니다. 발행기업에서 투자자분들께 설명드리기 위해 준비하는 자료들에 대한 사실 확인입니다. 투자설명서의 내용 중 기업에서 준비한 앞으로의 사업계획(방향성) 등은 아직 다가오지 않은 미래이기 때문에 사실 확인을 할 수 없는 영역이라는 점을 참고 부탁드립니다. 지금까지 그 기업이 무엇을 했다라고 주장하는 부분에 대해서 사실 관계를 확인한 것입니다.

다만, 와디즈에서는 투자자분께서 진행되는 거래가 안전하게 거래될 수 있도록 중개시스템을 준비해두었고, '핵심정보'와 '투자설명서' 그리고 '피드백' 메뉴를 통해서 발행기업과 투자자가 직접 소통을 할 수 있는 창구를 마련해두었습니다. 이 기능들을 적극 활용해주시길 부탁드립니다.


Q. 오픈예정이란 무엇인가요?

A. 프로젝트 오픈 알림 서비스

정말 관심있는 기업에 투자할 수 있는 기회를 얻고자 한다면,

그 프로젝트가 언제 오픈하는지, 오픈할 때 가장 먼저 소식을 알고 싶을텐데요 :)

그러한 투자자의 니즈를 채워드리기 위해 마련한 것이 바로 오픈 예정 서비스입니다.

쉽게 말하자면, 프로젝트 오픈 알림 서비스입니다.

오픈예정을 신청한 예비투자자들에게 프로젝트 오픈 되기 전 또는 오픈된 직후에 문자(또는 이메일)로 오픈되었다는 소식을 알려드립니다.

프로젝트가 오픈 되었다는 소식을 널리 알릴 수 있는 유용한 서비스입니다 


Q. MAC에서는 투자가 안되나요?

A. 청약신청서는 작성하실 수 있지만, 증거금 이체를를 위해 사용해야하는 뱅크페이(Bankpay)는 이용하실 수 없습니다.

OS X를 사용 중인 분들이 종종 Mac(맥)에서는 투자가 안되는지 문의를 주시는데요.

부분적으로 가능합니다만, 투자를 처음부터 끝까지 진행할 수는 없습니다.

우선 맥에서 와디즈의 홈페이지를 탐방하시거나 리워드형 프로젝트를 참여하시는 것은 가능합니다.

하지만 투자형 프로젝트에 투자하는 것은 청약신청서를 작성하는 것까지만 가능하고, 증거금을 이체하기 위해 사용해야하는 뱅크페이 프로그램은 사용하실 수 없습니다. 뱅크페이로 넘어가는 버튼을 회색으로 표시되게 해서 그 다음단계로 넘어가실 수가 없습니다.

이유는 뱅크페이가 아직 OS X를 지원하지 않아서 입니다. 

따라서 OS X 유저분들께서는 청약신청서 작성까지만 맥을 이용해주시거나, 스마트폰(아이폰 또는 안드로이드폰에서 청약 가능)을 이용해주시길 부탁드립니다


Q. 모바일에서도 투자할 수 있나요?

A. 아이폰/사파리에서도 투자하실 수 있습니다.

모바일에서도 투자를 하실 수 있습니다.

안드로이드폰(삼성, LG 등에서 나온 휴대폰), 아이폰에서 투자를 하실 수 있고 투자를 하실 때에는 앱스토어(구글은 Play Store)에서 와디즈앱을 다운받으시거나 웹브라우저를 이용해서 진행하실 수 있습니다.


Q. 회원가입할때 신분증을 왜 받나요?

A. 비대면으로 실명인증을 하기 위해 신분증을 확인하고 있습니다.

은행 지점에 방문하면 신분증을 제출하고 은행 직원이 신분증과 동일 인물인지 확인을 하지요?

와디즈는 온라인 중개 플랫폼이다보니 투자자분들을 대면으로 만날 수가 없습니다. 그래서 이러한 경우 비대면으로 실명인증 단계를 거쳐서 투자자 본인 여부를 확인하고, 투자자로 승인을 해드리고 있습니다.

실명인증을 위해 확인한 신분증은 확인 후 지체없이 파기하고 있으며, 실명인증증표로 사용가능한 주민등록증, 운전면허증, 여권, 장애인등록증, 외국인등록증을 사용하실 수 있습니다. 


Q. 친구초대코드가 무엇인가요?

A. 친구 초대하고 투자형 프로젝트에 쓸 수 있는 쿠폰도 받고!

기존 와디즈 회원이 친구에서 와디즈를 추천하여 그 친구가 와디즈의 투자회원으로 가입하면 기존 회원도, 친구도 투자형 프로젝트에서 사용할 수 있는 쿠폰을 발급해드립니다.

친구를 추천할 때 잊지 말고 '친구초대코드'를 공유해주세요. 친구는 그 코드를 투자회원으로 가입할 때 '프로모션 코드' 항목에 기입해주시면 됩니다.

기존 회원은 와디즈 홈페이지에서 쿠폰을 다운받을 수 있고, 초대받은 친구는 투자회원으로 가입한 즉시 이메일계정으로 쿠폰 계정을 보내드립니다 


Q. 투자자 배정이란 무엇인가요?

A. 정해진 순서에 따라 누가 투자자가 되는지 최종적으로 정하는 업무입니다.

투자형 프로젝트는 크게 청약(투자)-투자자배정-증권입고 과정을 거치게 됩니다. 채권인 경우에는 여기에 만기일에 정산이 되는 과정이 추가가 되고요.

어떤 프로젝트가 있고, 이 프로젝트에 투자하려는 사람이 굉장히 많은 상황을 상상해봅시다. 모두가 투자자가 되면 좋겠지만, 투자형 프로젝트는 처음에 목표하는 금액(모집금액)이 정해져 있습니다. 1억이면 1억, 3억이면 3억까지만 모집을 하게 됩니다.

그렇기 때문에 누구를 최종적으로 투자자로 정할지 규칙이 있어야겠지요. 정해진 규칙에 따라 투자자를 정하는 것이 "투자자 배정'입니다.

대부분의 와디즈의 투자형 프로젝트는 '청약신청서가 작성된 순서'대로 투자자를 배정합니다.

몇 구좌를 청약할지, 쿠폰을 적용할지, 약관에 동의사항들을 확인하고, 이메일인증까지 마치면 청약신청서가 작성완료된 것이고 투자순번이 부여됩니다. 이 순번과 모집금액에 따라 투자자가 정해집니다.

만약 나보다 먼저 투자한 사람이 청약철회를 하면 내 순번은 앞당겨집니다. 내 순번을 확인하기 위해서는 투자형 프로젝트 상세페이지에서 [투자자]탭을 확인해주세요. 참고로 PC에서만 확인하실 수 있고, 모바일에서는 [투자자] 탭을 보실 수 없습니다.


Q. 피드백이란 무엇인가요?

A. 투자자와 발행기업이 직접 소통할 수 있는 공간입니다.

피드백은 투자자와 발행기업이 직접 소통할 수 있는 공간입니다.

실제로 크라우드펀딩은 법상 투자자가 본인의 의견을 게시할 수 있습니다. 와디즈 이용약관에 위배되지 않는 내용이라면 누구든 본인의 의견을 자유롭게 게시할 수 있고, 발행기업에 프로젝트에 대해 또는 기업에 대해 궁금한 내용은 피드백을 통해서 질의하실 수 있습니다.

발행기업은 올려주신 피드백에 답글을 달아드리는 방식으로 소통하고 있습니다. 경우에 따라서 와디즈의 사용법과 관련된 질의 또는 비교적 간단하여 와디즈에서 답변을 드릴 수 있는 내용은 와디즈가 직접 답글을 달아드리기도 합니다.

의견을 표현하지 않아도 다른 투자자들이 궁금한 점을 살펴볼 수 있고, 더불어 와디즈의 배심원들의 날카로운 질문들을 엿볼 수 있어서 청약여부를 결정할 수 있는 유용한 기능입니다 

투자형 크라우드펀딩이 아직 낯설게 느껴지신다면 피드백을 기능을 적극 활용하시는 방법을 권해드립니다!


Q. Facebook 응원하기란 무엇인가요?

A. 프로젝트에 대한 공감+응원+공유가 합쳐진 기능입니다.

투자형 프로젝트에서 [투자하기] 버튼 아래 쪽에 보시면 [Facebook으로 응원하기]라는 파란색 버튼이 있습니다.

이 버튼을 클릭하면 내 와디즈 계정에 연동되어있는 페이스북 계정으로 프로젝트 링크가 공유되게 되며, 내 친구 수가 더해져서 OOO명에게 확산 중으로 카운트가 됩니다.

Facebook으로 응원하기는 실제 투자를 진행하지 않아도 진행하실 수 있어서 응원하는 마음을 온라인 상으로 표현하실 수 있는 유용한 수단입니다.


Q. 괜찮은 투자상품을 추천해주세요!

A. 안타깝지만 저희는 투자상품을 추천해드릴 수는 없습니다.

와디즈는 발행기업에 대해서 객관적인 정보를 제공해야 할 의무가 있습니다. 기업의 신용 또는 투자 여부에 대해 투자자의 판단에 영향을 미칠 수 있는 자문을 할 수가 없습니다(자본시장법 제117조의7 참조)

그래서 "괜찮다"라고 생각할 법한 프로젝트일지라도 투자자에게 상품을 추천해드리거나, 청약을 권해드릴 수가 없는 점 양해 부탁드립니다.

추천을 해드릴 수는 없지만, 발행기업에 궁금한 점은 피드백을 통해 소통하실 수 있도록 되어있고 청약의 단계에서 어려운 점이 있다면 와디즈로 연락주시면 안내드리겠습니다.


Q. 주식과 채권의 차이는 무엇인가요?

A. '자본'과 '부채'차이입니다.

주식회사에 자금이 필요하면 주식이나 채권을 발행해서 자금을 마련하게 됩니다.

투자자 입장에서는 내 돈이 나간다는 측면에서는 같지만, 엄밀히 말해 다른 증권입니다.

기업이 주식을 발행하고 자금을 모으면 그것은 기업의 '자본'이 됩니다. 투자자는 그 회사의 주주가 되는 것이고요. 주식에 보통주, 상환전환우선주 등 몇 가지의 종류가 있긴 하지만 여기서는 논하지 않겠습니다. 주식의 조건에 따라 다르긴하지만, 회사의 주주가 되었기 때문에 일정부분 경영에 관여할 수도 있게 되고, 기업이 이익을 많이 남기면 배당을 받기도 합니다.

주식은 기업에게 갚아야할 돈이 아니기 때문에, 만기일이 있지 않고 나중에 기업이 주식시장에 상장이 되거나, M&A가 되거나, 배당이 이뤄지거나, 주식 가치가 상승하여 매도를 하는 경우에 이익을 거둘 수 있습니다. 투자금보다 훨씬 높은 수익을 거둘 수도, 굉장한 손실로 원금이 손실되는 경우도 발생할 수 있습니다. 리스크가 높음에도 기업의 가치를 보고 투자한다고 보시면 됩니다.

반면에 채권은 기업 입장에서는 '빚'이 됩니다. 갚아야할 돈이 되는 것이죠. 그래서 채권에는 만기일이 있고, 만기일에 정산을 진행하게 됩니다.

채권은 만기일에 정산이 되고, 채권에 명시된 조건의 범위에서 손실/이익이 발생합니다. 영화 프로젝트는 관객수에 따라 이익이 나기도 원금 손실이 일어나기도 합니다. 몇몇 프로젝트는 고정된 금리가 있어서 그 이상의 수익을 기대할 수는 없지만, 차후에 정산을 받을 경우에 어느 정도를 받게 될지 예상가능하다는 장점이 있습니다. 주식처럼 리스크는 있지만, 기업의 가치를 가늠하는 것을 어려워하는 투자자에게 비교적 장벽이 낮다고 볼 수 있습니다.


Q. 투자설명서란 무엇인가요?

A. 투자자가 알아야할 내용, 궁금하실 내용을 모아둔 설명서입니다.

발행기업에 투자를 할 때 딱 한 곳을 본다면, 당연히 '투자설명서'를 살펴보실 권해드립니다.

투자자가 청약전에 살펴봐야하는 내용들 이 회사가 누구인지, 대표는 누구인지, 투자자 배정은 어떻게 되는지, 기업가치는 어떻게 산정되었는지, 사업 계획은 어떻게 되는지, 재무제표는 어떻게 되는지 등을 살펴보실 수 있는 것이 바로 투자설명서입니다.

투자설명서는 프로젝트 상세페이지에서 [투자설명서]를 클릭하시거나 [핵심정보]에서 '참고자료'라고 써있는 곳을 클릭하면 다운받으실 수 있습니다.


Q. 투자한도가 풀리는 시기는 언제인가요?

A. 증권발행일로부터 만 1년뒤에 한도가 풀립니다.

투자 한도와 관련해서 자주 문의하시는 내용을 FAQ로 정리해드릴게요 

1. 투자한도가 언제 풀리는지 어떻게 확인할 수 있나요?

 투자한도는 증권발행일로부터 만 1년입니다. 포털사이트에서 크라우드넷을 검색하셔서 한도조회 메뉴에 들어가시면 남아있는 투자한도와 언제 풀리는지 확인하실 수 있습니다.

2. 투자한 채권이 중도상환이 되었습니다. 투자 한도가 다시 복원되나요?

 아니요! 아쉽지만 그렇지 않습니다. 채권이 중도상환되더라도 투자한도는 여전히 증권발행일로부터 만 1년동안 영향을 받기 때문에 중도상환과는 관계없이 만 1년이 지난 후에 한도가 복원됩니다.

3. 와디즈에서 처음 투자하는건데, 한도가 없다고 나옵니다.

 이러한 경우는 보통 다른 크라우드펀딩 사이트에서 청약을 해본적이 있는 분일 수 있습니다. 투자등급에 따른 한도는 와디즈에서만 적용되는 것이 아니고 모든 증권형(투자형) 크라우드펀딩에서 투자한 금액이 통합적용 됩니다.  크라우드넷에 접속해주시면 어디에 투자한지, 얼마를 투자한지 살펴보실 수 있으니 이 사이트를 방문해서 살펴봐주시길 부탁드립니다.


Q. 전매제한이란 무엇인가요?

투자자 보호를 위해 크라우드펀딩으로 취득한 주식은 1년동안 매도/양도를 할 수가 없습니다.

자본시장과 금융투자업에 관한 법률 제117조의10 제7항에 "투자자는 온라인소액투자중개를 통하여 발행된 증권을 지체 없이 제309조제5항에서 정하는 방법으로 예탁결제원에 예탁하거나 보호예수하여야 하며, 그 예탁일 또는 보호예수일부터 1년간 해당 증권(증권에 부여된 권리의 행사로 취득하는 증권을 포함한다)을 매도, 그 밖의 방법으로 양도할 수 없다."라고 규정되어 있습니다. 예외적으로 전문투자자 또는 해당 증권의 투자 손실가능성 및 낮은 유통 가능성 등을 인지하고 있는 자로서 대통령령으로 정하는 자에게 매도하는 것은 허용하고 있습니다.

이는 크라우드펀딩에 투자한 투자자를 보호하기 위한 것으로, 증권의 발행일로부터 1년간 해당 증권을 사고 팔거나 양도할 수 없다는 뜻입니다. 언제 풀리는지 궁금하다면 크라우드넷에 들어가서 한도조회를 하면 지금까지 투자한 증권의 발행일을 확인할 수 있습니다. 그 날로부터 만 1년동안 전매제한이 되어 있는 것이고요. (크라우드넷 바로가기)


Q. 청약증거금이란 무엇인가요?

A. 쉽게 말해, 투자하는 금액입니다.

와디즈에서 '청약'이라고 함은 '투자자 되고 싶어요'라고 신청하는 과정을 말합니다. '청약증거금'은 이 청약을 하나의 계약과정으로 본다면 계약을 확실히 하기 위해서 증거로 제출하는 금액을 말하고요.

내가 투자자로서 얼마를 투자를 하고 싶다는 의미로 청약증거금을 이체하여야 청약이 완료가 됩니다. 투자자로 배정이 될 경우 증권(주식이나 채권)을 받게 되시는 거고, 투자자로 배정되지 않는다면 청약증거금을 다시 돌려받으시게 되는 것입니다.


Q. 기업가치란 무엇인가요?

A. 기업에서 산정한 회사의 가치를 말합니다.

기업에서 산정한 그 기업의 가치를 숫자로 표현한 것이 기업가치입니다. 일반적으로 기업가치는 펀딩을 진행하는 기업에서 자체적으로 산정을 하게 됩니다. 외부 전문가가 기업가치를 산정해주기도 합니다.

보통 주식을 발행하려는 기업이 기업가치를 평가해서 투자설명서 기재를 하게 됩니다.

어떻게 해서 기업가치가 그 금액이 나왔는지 궁금하다면 프로젝트 상세페이지 투자설명서 부분에서 기업가치를 산정한 이유에 대해서 확인하실 수 있으며, 투자설명서를 읽고도 궁금하신 점은 [피드백] 을 통해 질문을 해주시면 발행기업 내 담당자가 답변을 달아드립니다


Q. 재무제표란 무엇인가요?

A. 기업의 재무상태를 파악할 수 있는 자료입니다.

기업의 재무상태를 파악할 수 있는 자료 중에 가장 기본적인 것이 '재무제표'입니다. 같은 계정항목들이 있기 때문이 다른 기업과 비교하기도 용이한 자료이기도 하지요.

 와디즈에서 만나실 수 있는 발행기업들은 비상장법인이고 이제 성장을 시작하고 있는 기업이 많습니다. 따라서 재무제표를 토대로 앞으로의 사업계획을 함께 살펴보시는 것이 중요합니다 


재무제표는 기업의 재무상태나 경영성과 등을 보여주는 문서이다. 기업의 성과 등을 파악하기 위해 내부적인 목적으로 사용되기도 하나, 상장기업의 경우 이러한 재무제표들을 매년 결산기에 일반대중에게 공개하게 되어있다.

- 출처 : 위키피디아 -


전자공시시스템(보통 다트 DART라고 부르는 사이트)에는 상장법인의 공시서류를 확인할 수 있지만, 와디즈에서 만나실 수 있는 비상장법인이다보니 발행기업들은 대부분은 여기서 확인을 할 수 없지만, 투자프로젝트 상세페이지에서 투자설명서에 재무제표가 함께 나와있습니다 :) 투자설명서는 다운로드를 받으실 수도 있습니다.

[투자설명서]를 클릭해서 살펴보셔도 되고,

투자 프로젝트 상세페이지에서 [핵심정보]>[참고자료]를 클릭해주시면, 재무제표를 다운받아 확인하실 수 있습니다.

참고하면 좋은 글 : 

재무제표 해석하기 (금융감독원 공식블로그) http://fssblog.com/140108953602


Q. 이익배당이란 무엇인가요?

A. 주주 등에게 회사의 이익을 나눈 것을 말합니다.

회사가 점점 성장을 하고, 이익이 발생하게 되면 주주들에게 이익을 나누기도 합니다. 이것을 이익배당이라고 합니다. 기업마다 성장한 정도가 다르기 때문에 기업에 따라서 배당률이 달라질 수도 있습니다. 물론 이익배당을 하지 않는 기업도 있습니다.

와디즈에서 만날 수 있는 비상장 기업들은 성장초기단계에 있는 경우가 많기 때문에, 정기 배당을 실시하는 경우가 매우 드뭅니다. 따라서 배당수익을 기대하고 투자를 할 경우 기대한 만큼의 수익을 얻지 못할 수 있다는 점 꼭 기억해주세요 


Q. 증권 입고란 무엇인가요?

A. 투자한 증권(주식/채권)을 증권계좌에 입금하는 것을 말합니다.

은행계좌로 계좌이체를 하면서 돈을 주고받는 것을 '입금'한다라고 표현하기도 하지요?

주식이나 채권같은 증권을 게좌에 넣는 것을 '입고'라고 표현합니다.

기업이 발행한 증권을 일정한 과정을 거쳐서 증권계좌에 넣어드리는 것을 바로 '입고'라고 표현한답니다~! 


Q. 보통주란 무엇인가요?

A. 가장 일반적인 주식의 한 종류입니다.

이익을 배당하거나, 잔여재산을 분배하는 과정에서 다른 주식의 종류들에 비해 특별한 조건이 없는 보통의 주식을 말합니다.

특별한 조건이 없지만 의결권이 있어서 회사의 경영에 일정부분 참여할 수 있게 됩니다 


Q. 이익참가부사채란 무엇인가요?

A. 채권에 부여된 이익 외에 회사의 이익분배에도 참가할 수 있는 채권입니다.

 보통 영화나 문화 콘텐츠의 기업들이 '이익참가부사채' 발행하는 경우가 많습니다.

 영화같은 경우에는 관객의 수가 오르기도 하고, 내리기도 하는데요. 관객이 오르면 오를 수록 추가적인 수익률을 기대할 수 있는 채권입니다. 만약 관객이 손익분기점보다 적다면 원금 손실의 가능성도 배제할 수 없습니다.

이익참가부사채란 채무증권 중 '채권'의 한 형태입니다. 따라서 발행인 측에서 지분을 제공하지 않는다는 점이 특징입니다. 또한 기본적으로 '채권'이기 때문에 원금상환과 일정한 이자 수익이 기본적인 투자상품의 구조이지만, 이익 제공의 방식이 단순한 액면 이자의 제공에 한정되지 않습니다. 채권투자자임에도 불구하고 주주와 같이 이익분배에 참여할 수 있는 권리를 가지게 되는 것입니다. 그 결과 일정 이율 이상으로 이익이 발생하는 경우 이익배당에도 참가할 수 있어 투자자는 기업의 수익상황에 따라 더 많은 이익을 얻을 수 있습니다. 해당 프로젝트에서 발생한 매출액에서 지출되는 비용을 차감한 후 남는 수익을 투자자들과 공유하는 구조입니다.

 따라서 특정 지표를 달성할 경우 일반 채권처럼 액면 이율에 따른 이자만을 받는 것이 아니라 프로젝트의 수익에 따라 더 큰 이익을 얻게 됩니다. 물론 손실의 가능성도 존재하지요. 영화 "인천상륙작전"은 손익분기점에 도달할 수 있는 정도의 관객수를 초과하였기에 이익이, 영화 "사냥"은 관객의 모집이 미진하여 손실이 발생한 바 있습니다. 또 다른 특징은 원금 상환이 채권의 만기 이전에도 가능하다는 점입니다. 목표한 수익률을 조기에 달성할 경우 약정에 따라 채권을 조기에 상환할 수 있으므로, 투자자들의 입장에서도 만기 전에 수익을 실현할 가능성이 있습니다. 

 이익참가부사채를 발행하여 투자 유치를 하기 위하여는 몇가지 중요한 전제 사항이 있습니다. 해당 프로젝트에서 발생하는 매출과 비용 등이 명확히 측정가능해야 하며, 이에 관한 회계가 해당 프로젝트에 한정하여 관리되어야 합니다. 프로젝트와 무관한 회계 내역은 철저히 분리, 배제되어야 합니다. 이를 위하여 특정 프로젝트를 수행하기 위한 법인이 설립되는 경우가 많고, 회계 및 자산의 분리를 담보할 수 있는 신뢰장치들도 필요하게 됩니다. 프로젝트 투자가 영화에 많이 사용되는 이유가 바로 여기에 있습니다. 매출과 비용의 산정이 전체 관람객수와 관람료, 비용지출내역의 수치화로 측정이 가능하기 때문입니다. 


투자형 크라우드펀딩에서 "이익참가부사채"의 활용이 가지는 혁신적 의미

 영화뿐만 아니라 일반 기업들도 이와 같은 프로젝트성 투자상품을 만들 수 있습니다. 기업이 출시하는 수많은 상품라인이나 서비스 등을 개별 프로젝트화하면 가능합니다. 예를 들어, 특정 제품의 판매 통로를 한정하고 매출과 비용을 통제함과 동시에 회계의 분리 등 신뢰성을 담보할 수 있는 엄격한 회계 감사를 실시한다면, 프로젝트성 사업에 대한 투자를 위한 이익참가부사채를 충분히 발행할 수 있습니다. 그런데 이와 같이 설계된 이익참가부사채는 무한한 혁신의 가능성을 내포하고 있습니다. 그것이 미칠 영향은 기업의 자금 조달 및 운영, 투자, 유통, 창업 생태계까지 무궁무진합니다.


기업 자금 조달과 운영의 혁신

 지금까지는 주로 기업이 자금을 조달할 때에는 기업이 대출을 받거나 채권 또는 주식을 발행하는 방법을 이용해왔습니다. 이 경우 자금을 조달한 이후에도 기업 전체의 재무 구조에 영향을 미치게 됩니다. 부채비율에 따라 대출 여부 및 적용되는 이자율이 달라지고, 자금의 조달 이후에는 신용도 등에 영향을 미칩니다. 주식을 발행할 경우에도 주주의 구성에 따른 전체 지분율이 달라져 지배구조에 영향을 받습니다. 

 하지만 프로젝트성으로 이익참가부사채를 발행할 경우 기본적으로 영향의 범위가 기업 전체가 아닌 특정 프로젝트에 한정됩니다. 특정 프로젝트의 수행을 위한 자금이 필요한 경우, 투자자들은 기업 전체의 과거 재무구조보다는 계획하고 있는 특정 프로젝트의 수익성을 중심으로 판단할 여지가 높기 때문에 유망한 프로젝트의 경우 자금의 조달이 보다 용이할 수 있습니다. 설령 프로젝트 수행에 따른 이익분배가 어렵다고 하더라도, 특정 프로젝트에 한정된 실패이기에 기업 전체로 위험이 전이되지 않는 절연효과가 있습니다. 물론 해당 프로젝트를 실질적으로 수행한 기업의 이미지나 신용도에 미치는 영향 또한 간과할 수 없기 때문에 프로젝트를 담당한 주체의 책임있는 운영도 기대해볼 수 있습니다. 


투자의 혁신

 투자의 측면에서도 새로운 혁신이 일어날 수 있습니다. 이때까지 일반적인 투자는 금융 상품에 대한 투자 후에는 투자 대상이 된 기업의 경영을 주로 지켜볼 수밖에 없었습니다. 이익의 실현, 즉 기업의 수익발생에 투자자들이 관여할 수 있는 여지가 매우 적었습니다. 경영의 결과로서 나타난 이익상태에 그저 따르는 것입니다. 그러나 이익참가부사채의 경우 투자자들 스스로의 노력에 따라 기업의 이익 실현에 기여할 수 있는 구조 설계가 가능합니다. 

 특정 제품의 매출과 수익이 연계될 경우, 투자자들은 해당 프로젝트의 성공, 즉 수익의 발생을 위해 제품의 구매자 내지는 홍보자를 자처하며 판매를 촉진시킬 수 있습니다. 이 경우 매출을 달성할 가능성이 높아집니다. 그 결과 투자자는 본인의 자본과 노력을 투여함으로써 높은 수익률의 달성에 기여할 수 있는 것입니다. 수동적으로 투자의 결과만을 기다리던 투자에서 본인이 투자한 상품의 수익률을 높이기 위해 능동적으로 움직일 수 있는, 그야말로 새로운 투자문화를 형성하는 단초가 될 수 있습니다.


Q. 상환전환우선주란 무엇인가요?

A. 채권처럼 만기가 있어서 만기에 상환을 받을지, 보통주로 받을지 결정할 수 있는 채권입니다.

기본적으로 주식은 만기가 없지만, 상환전환우선주는 채권처럼 만기가 있습니다.

예를 들어 일정 기간 뒤에 채권처럼 어떠한 조건으로 돈으로 상환을 받을지, 보통주로 받을지 투자자가 결정을 할 수 있는 주식입니다.

투자할 시점에 비해서 해당 기업의 가치가 상승한다면 보통주로도 받을 수 있어서 일반적으로는 투자자에게 유리한 방식으로 알려져 있습니다 


Q. 목표금액이란 무엇인가요?

A. 기업이 프로젝트로 모으고자 하는 총 금액을 뜻합니다

기업이 크라우드펀딩을 통해 자금을 모으고 싶어도 무제한으로 투자자를 모을 수는 없습니다.

법적으로 연간 7억원 한도 내에서 모집할 수 있기 때문입니다.

그래서 기업은 프로젝트를 진행할 때 목표금액(모집금액)을 정하게 됩니다.

어떤 기업은 1천만원을 모집하는 것을 목표로 하기도 하고, 어떤 기업은 한도인 7억원을 목표로 모집하기도 합니다.

목표금액의 80%이상 투자금이 모이면 프로젝트는 성공하는 것이고, 80%미만이 모이면 프로젝트는 실패하고 투자자들에게 청약증거금이 반환됩니다.


Q. 장외주식 거래란 무엇인가요?

A. 상장된 주식들이 거래되는 시장 외에서 진행되는 주식거래를 뜻합니다.

장내/장외 이런 단어들을 주식거래를 시작하신 분들이라면 한 번 쯤은 들어보셨을 것 같습니다.

우리가 알고 있는 유명한 기업들의 대부분은 증권거래소가 만든 시장 안에서 주식의 사고 팔기가 이뤄지고 있습니다. 코스피, 코스닥, 코넥스 시장 등이 장내시장입니다.

반면에 와디즈에서 이루어지는 투자형 프로젝트들은 '장외'로 보시면 됩니다. 주식은 비상장법인의 주식에 투자하시는 것입니다. 비상장법인이라고 말하는 것이 바로 유가증권시장에 등록되지 않은 법인을 뜻합니다(주권비상장법인이라고도 합니다).

투자위험도가 매우 높으며, 투자위험도가 높기 때문에 차후에 얻을 수 있는 이익의 차이도 매우 큽니다. 반면에 원금 손실 가능성도 매우 높아서 투자자의 주의가 필요합니다.

와디즈를 통해 비상장법인의 주식에 투자하신 경우, 이 기업이 상장하기 전에는 '장외주식'으로 거래가 됩니다. 장외주식은 일반적으로 당사자들이 매매가격을 협의하여 결정되는 것이 일반적이기 때문에 장내주식을 거래하는 방식과는 사뭇 다릅니다.


Q. 발행 예정 주식수(구좌)란 무엇인가요?

A. 물건을 살 때 몇 개를 살지 고민하는 것처럼, 투자할 때도 얼마나 투자할지 결정해주셔야 합니다.

우리가 슈퍼에 가서 사과를 살 때 1개를 살 수도 있지만, 2~3개를 살 수도 있을 겁니다.

투자도 이와 비슷합니다.

기업에서는 채권 1구좌당, 주식 1주당의 가격을 설정해 놓았습니다.

예를 들어 주식 1주당 5,000원이고, 나는 10만원을 투자하고 싶다면 20주를 청약해야겠지요? 채권도 예를 들어보겠습니다. 채권 1구좌당 5,000원이고 나는 100만원을 투자하고 싶다면 200구좌를 청약하시면 됩니다.

주식수/구좌수를 입력하는 건 청약 단계에서 하실 수 있습니다.


Q. 증액이 무엇인가요?

A. 목표금액(모집금액)을 더 늘리는 것을 말합니다.

기업은 투자형 크라우드펀딩 프로젝트를 진행할 때, 무제한으로 투자자를 모집할 수 없습니다.

법적으로 연간 7억원 한도 내에서 자금을 모집할 수 있습니다.

기업마다 프로젝트로 모으고자하는 금액은 다릅니다. 어떤 기업은 천만원, 어떤 기업은 1억 이상이기도 합니다.

처음에 프로젝트를 오픈(청약 모집 시작)했을 때 목표금액(모집금액)보다 청약기간 중에 목표금액을 올리는 경우가 있습니다. 이것이 바로 '증액'입니다.

1억을 모집할 때보다 2억으로 증액했을 때 모집할 수 있는 투자자가 더 많아지겠죠? 일반적으로 투자형 프로젝트가 진행되는 상황을 지켜보고 기업에서는 증액여부를 결정합니다 

증액을 하게 되면 미리 [새소식] 메뉴에 공지를 하고 증액을 하게 됩니다.


Q. 증권입고일은 무엇인가요?

A. 투자자로 배정되고, 증권(주식/채권)을 받는 날입니다.

투자자로 배정이 된 후에 증권입고일에 증권계좌를 확인해주시면 됩니다! 투자하신 증권(주식/채권)을 받는 날이기 때문입니다 🎉

와디즈에서 청약할 때 입력하셨던 증권계좌에서 확인하실 수 있고, 증권계좌에 들어온 걸 어디서 확인할 수 있는지 궁금하다면 증권사에 문의하셔서 'O월 O일이 OOO회사의 주식(또는 채권)이 입고되는 날인데, 어떤 메뉴에서 확인할 수 있나요?'라고 문의해주시면 되겠습니다.

다만, 채권 중에서 보호예수되는 채권은 채권 실물이 발행되어 예탁원에 보관된 상태이기 때문에 별도로 증권계좌로 입고해드리지 않는다는 점 참고해주세요 


Q. 무보증사채란 무엇인가요?

A. 기업의 신용으로 발행하는 회사채를 말합니다.

기업이 원리금 상환 및 이자 지급을 제3자의 보증이나 물적담보 없이 신용에 의해 발행하는 회사채를 말합니다. 일반사채라고 말하기도 합니다.

신용에 의해 발행하는 회사채이기 때문에 투자위험이 높으며, 일반적으로 담보부사채에 비해서는 이자율이 높고 기간이 채권의 기간이 짧은 것 많습니다.

와디즈에서 채권에 투자하는 경우 '투자설명서'를 살펴보시면 해당 채권의 종류를 확인하실 수 있습니다 


Q. 증권계좌가 왜 필요한가요?

A. 증권계좌는 주식이나 채권을 받기 위해서 필요합니다.

친구와 더치페이를 할 때 '계좌번호 알려주면 돈 보내줄게'라고 말하는 경우 흔하게 있을 것 같습니다.

현금을 보내주거나 받기 위해서 은행예금통장을 이용하시듯이, 주식이나 채권 같은 증권을 주고받기 위해서는 '증권계좌'가 있어야 합니다.

증권사에서 만들어드리는 '증권계좌'는 여러 종류가 있습니다. 다양한 증권계좌에서도 주식거래가 가능한 계좌가 있고, CMA같이 주식거래를 할 수 없는 계좌도 있습니다.

와디즈에서 청약한 프로젝트에 투자자로 배정받게 되신다면 유효한 증권계좌가 있어야 증권을 보내드릴 수가 있겠지요? 그래서 청약단계에서 증권계좌를 받고 있습니다.

증권계좌는 청약기간 동안에는 [나의펀딩현황]에서 해당하는 프로젝트 이름을 클릭하시면 변경하실 수 있습니다.

[자주 묻는 질문]

Q. 증권계좌는 어떻게 만드나요?

A. 요즘에는 비대면계좌개설이라고 하여, 증권사나 은행에 방문하지 않고 스마트폰을 이용하여 증권계좌를 만들 수 있기도 합니다. 은행에 방문하여 증권계좌를 만드실 수도 있습니다. 은행에서 증권계좌 만드는 방법은 여기를 클릭해주세요. 


Q. 계좌를 만들 때, 어떤 계좌를 만들어 달라고 해야하나요?

A. 주식 거래가 가능한 계좌를 만들어주시면 됩니다. 투자자로 배정이 되면, 발행기업에서는 주식이나 채권을 해당 증권계좌로 넣어(입고)드립니다 :)


Q. 어느 증권사의 계좌를 만들어야 하나요?

A. 현재 와디즈에서 증권(주식/채권)을 받기 위해서 입력하는 증권계좌로 사용할 수 있는 증권사는 아래와 같습니다.

골든브릿지투자증권 

교보증권 

대신증권 

동부증권 

메리츠종금증권 

미래에셋대우 

삼성증권 

신영증권 

신한금융투자 

유안타증권 

유진투자증권 

코리아에셋투자증권 

키움증권 

하이투자증권 

HMC투자증권 

IBK투자증권 

KB증권

KTB투자증권 

NH투자증권 

SK증권


Q. 가족 명의로 대신 투자해도 되나요?

A. 본인의 투자는 본인의 이름으로!

금융실명제에 따라 차명거래는 금지되어 있습니다. 예외적으로 허용되는 경우를 제외하고는 가족명의로 차명거래를 하실 경우 경우에 따라서는 불법차명거래가 되실 수 있으니 본인의 자금으로 투자하시는 것은 투자한도에 따라 본인의 명의로 진행하시길 당부드립니다.

특히 금융소득 종합과세 대상자이신 분들은 세금 회피 목적으로 타인 명의 계좌를 이용하시는 경우 불법차명거래에 해당하시게 되고, 처벌대상이 되실 수 있습니다.

차명계좌를 빌려준 사람도 그 계좌의 사용목적이 불법차명거래에 해당한다는것을 알고 빌려준 경우에는 대여자도 같이 처벌을 받게 되기 때문에 가족명의, 타인 명의로는 투자하지도 명의를 빌려주지도 마시고, 본인의 투자는 본인 명의로 진행해주시는 것이 좋습니다.


Q. 채권에 수익이 발생하면 적용되는 세율은 몇 %인가요?

A. 이자소득세 15.4%가 적용됩니다(종합소득세 신고대상자는 제외)!

채권에 투자한 분들이 많이 질문하시곤 합니다.

채권이 투자하고 수익이 났다면 정말 기쁘실 것 같은데요. 세율이 몇 %가 적용되는지 궁금하실 것 같기도 합니다.

채권에 수익이 발생하면 그 수익의 15.4%가 원천징수됩니다.

예를 들어, 100만원을 채권에 투자하고 이익이 10만원이라고 가정해봅시다. 원금손실이 없었고 이익만 발생했다는 가정하에 계산해봅시다.

1. 그렇다면 세금은 15,400원이 되고 (이익 10만원 * 이자소득세 15.4% = 15,400원)

2. 채권이 정산할 때 100만원+10만원-15,400원=108만 4,600원을 정산받게 되는 것입니다.

만약에 경우에 따라서 이익이 없고 원금만 정산받게 되거나, 원금에 손실이 발생하는 경우에는 이익이 0원이기 때문에 공제하는 세금도 없다는 점 참고 부탁드립니다.


Q. 비대면실명인증이란 무엇인가요?

A. 온라인 상에서 금융거래를 할 수 있게 해주는 본인확인 과정입니다.

예전에는 금융거래를 하기 위해서 은행이나 증권사에 직접 방문을 해야했습니다. 그게 간소화되면서 ATM이나 인터넷뱅킹 같은 기술들이 개발되었고, 이제는 온라인 상에서 금융거래를 하고자하는 니즈가 많아지면서 금융위원회에서 소비자 편의성 증대를 위해 비대면실명인증 과정을 고안하게 되었습니다.

온라인상에서 진행되기 때문에 본인여부를 확인하는데 취약할 수 있지만, 비대면실명인증(신분증 확인) 단계를 통해 도용이 되는 위험성을 낮출 수 있게 되었고 투자자분들은 조금 더 편하게 온라인상에서 투자(청약)을 진행하실 수 있게 되었습니다 


Q. 비대면 인증 대기중입니다. 언제 인증이 완료될까요?

A. 보통 몇 시간, 최대 2영업일 정도 소요가 됩니다.

투자하려고 보니 비대면실명인증을 위해 신분증을 업로드하였는데, 계속 '확인 중'으로 보셨나요?

보통 실명인증은 저희 와디즈 직원의 근무시간 내에 진행이 됩니다. 평일 오전 9시 ~ 오후 6시 사이에 진행하고 있으며 그 외에 접수된 건은 다음 영업일에 순차적으로 확인하고 있습니다.

와디즈에 투자회원으로 가입해주시는 분이 많다보니 신분증 인증하는 건수도 많은 편입니다. 최대한 빠르게 승인해드리고 싶으나 올려주신 신분증을 확인하는데 최소 몇 시간~최대 2영업일 정도가 소요됩니다.


Q. 수수료 및 청약 취소하는 방법

A. 청약시 발생하는 수수료 및 청약취소하는 방법을 안내드립니다.

1. 뱅크페이 이체수수료

투자하시는 금액(청약 증거금)에 따라 투자자가 부담해야 하는 뱅크페이(Bankpay) 실시간 계좌이체 수수료가 있습니다.

예를 들어, 100,000원(십만원)을 투자한다면 청약금액 100,000원+600원=100,600원을 청약할 때에 출금하게 됩니다.


2. 프로젝트 청약 취소시 환불되는 금액

청약을 취소(철회)하는 것은 프로젝트 기간 중에만 가능하며,

청약을 취소하면 위에 안내된 이체수수료를 제외한 청약금액만 출금하셨던 계좌로 최대 30분 내에 환급됩니다. (환급은 평일 10시~16시 사이에만 가능하며, 주말/공휴일에 청약취소시 익영업일 오전 10시 이후에 증거금이 환급됩니다)

만약 청약 신청 당일에 청약철회를 하시면 이체수수료를 포함하여 청약금액이 환불됩니다.

청약 취소는 [나의 펀딩현황]에서 해당하는 프로젝트를 클릭하여 진행하실 수 있습니다.


3. 프로젝트 청약 취소하는 방법

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [투자]를 클릭하여서 취소를 원하는 프로젝트명을 클릭합니다.

6) [청약 신청 철회]라는 버튼을 클릭합니다.

7) 청약신청 철회할지 묻는 팝업창에서 [확인]을 누르면 청약이 취소됩니다.


Q. 증권계좌가 유효하지 않다고 합니다. 어떻게 해야하나요?

A. 프로젝트 종료되기 전까지 [나의펀딩현황]에서 유효한 계좌로 변경해주세요.

증권계좌가 유효하지 않은 경우에는 '입고불가'라는 문자를 받게 되실 겁니다.

증권계좌가 입고 불가상태로 조회되는 이유는 여러 가지인데, 주된 이유는 아래와 같습니다.

- CMA계좌와 같이 증권계좌는 맞지만 주식거래를 할 수 없는 계좌인 경우

- 휴면계좌인 경우

- 계좌를 개설한 것은 맞지만, 아직 계좌가 활성화된 상태는 아닌 경우

- 계좌번호에 오타가 있는 경우

- 증권계좌를 입력해야하는데 은행계좌를 입력하는 경우

증권계좌를 변경하기 위해서는 홈페이지 우측 상단 프로필사진> 나의 펀딩 현황> 해당 프로젝트를 클릭한 후 증권계좌를 변경하실 수 있습니다 


Q. 스마트 OTP는 사용할 수 없나요?

A. 토큰형 OTP를 사용하실 수 있습니다.

뱅크페이로 청약증거금(=투자하는 돈)을 이체하실 때 공인인증서와 보안매체가 필요합니다.

보안매체는 보안카드나 OTP를 뜻합니다.

요즘에는 OTP가 토큰형 OTP도 있고, 스마트 OTP도 있는데요.

뱅크페이에서 실시간계좌이체를 이용할 때는 스마트 OTP가 아직 지원되지 않고 토큰형OTP만 이용하실 수 있습니다.

은행가서 OTP만들어야겠다라고 생각하셨다면, 아래 그림을 참고해주셔서 토큰형 OTP로 준비하시길 권해드립니다.


Q. 투자 취소 시 바로 돈을 환불 받을 수 있나요?

A. 당일 청약한 것을 당일 취소하면 이체수수료까지 환불 받고, 그 다음 날에 취소하시게 되면면 이체수수료를 제외한 나머지 증거금만 환불받게 됩니다.

투자를 하셔도 개인 사정상 마음이 바뀔 수 있습니다.

이때는 청약기간 중이라면 청약 철회(투자 취소)를 하실 수 있습니다.

투자 취소를 하게 될 경우 청약증거금(=투자한 돈)은 출금하셨던 게좌로 다시 돌려받게 됩니다.

참고로 오늘 투자했는데 오늘 바로 투자취소를 한다면, 뱅크페이를 사용하면서 납부하셨던 이체수수료 및 청약증거금을 모두 환불 받으시게 됩니다.

만약 어제 투자했는데 오늘 투자취소를 하시면 이체수수료는 환불되지 않지만, 청약증거금은 출금하셨던 계좌로 환불이 됩니다.


Q. 공인인증서와 보안매체가 왜 필요한가요?

A. 본인의 계좌를 본인이 거래하는게 맞는지 확인하기 위해 필요합니다.

한국에서 온라인 상에서 금융거래할 때 피할 수 없는 것이 공인인증서와 보안매체일 것 같습니다.

인터넷뱅킹에 익숙한 분들은 공인인증서와 보안매체가 필요하다는 것은 이미 알고 계실 것 같습니다.

공인인증서와 보안매체는 본인의 계좌를 통해 본인이 거래하는 것이 맞는지 확인하기 위한 수단입니다. 공인인증서는 특히 거래를 확인하는 서명의 역할도 하고 있습니다(마치 사인을 하는 것과 같지요).

홍길동이 예금주가 '홍길동'으로 된 본인의 계좌를 통해 10,000원을 이체한다는 것을 컨펌하는 것이 공인인증서이고, 계좌번호를 아는 누구나 돈을 인출하면 안되기 때문에 거래시 보안매체(보안카드 또는 OTP)를 이용해 '내가 거래하는 것이 맞다'고 인증하는 것입니다.


Q. 투자 취소하고 싶어요. 어떻게 해야하나요?

A. 청약기간 중에는 취소하실 수 있고, 프로젝트가 마감되었다면 취소하실 수는 없습니다.

1. 청약기간 중에 투자취소를 원할 경우

청약기간 중이라면 투자를 취소하실 수 있습니다.  아래 방법에 따라 진행해주시길 부탁드립니다.

- 홈페이지 우측상단 동그라미 프로필 사진을 클릭

- [나의 펀딩현황]을 클릭

- 해당하는 프로젝트를 클릭한 후 청약 철회 버튼을 클릭

2. 프로젝트가 마감된 후 투자취소를 원할 경우

이 경우에는 투자취소를 하실 수 없습니다. 투자 취소는 오직 프로젝트가 진행되는 청약기간 중에만 하실 수 있습니다.


Q. 증권 입고받을 증권계좌를 변경하려면 어떻게 해야하나요?

A. 프로젝트 종료 전까지 [나의 펀딩현황]에서 변경하실 수 있습니다.

일반적으로 증권계좌를 변경해야하는 경우는 프로젝트(청약기간) 종료 전과 후로 나뉠 수 있겠습니다.

1. 프로젝트(청약기간) 종료 전

 프로젝트 기간 중에는 청약/청약철회/증권계좌 변경이 가능합니다. 증권계좌를 변경하기 위해서는 홈페이지 우측 상단 프로필사진> 나의 펀딩 현황> 해당 프로젝트를 클릭한 후 증권계좌를 변경하실 수 있습니다 😀

2. 프로젝트(청약기간) 종료 후

 청약기간이 종료된 후에는 증권계좌를 변경하실 수 없습니다. 다만, 이미 투자자로 배정받은 경우에 채권이 정산될 때 유효한 계좌로 확인되지 않는다면 유효한 계좌로 변경해주시길 요청드리고 있습니다.


Q. CMA 계좌는 사용할 수 없나요?

A. 대부분의 CMA계좌는 와디즈에서는 사용하실 수 없습니다.

CMA계좌는 주식거래를 하기 위해 만들어진 계좌는 아니고, 증권사에서 고객이 수시입출금을 하면서 MMF나 RP 등에 투자할 수 있는 기능을 연계해서 내놓은 것이 CMA입니다.

원래 주식을 거래할 목적으로 만든 계좌가 아니다보니, 주식이나 채권에 투자하는 와디즈의 금융상품들에는 적합하지 않은 계좌입니다.

다만 일부 증권사에서는 CMA계좌를 개설하신 후에 이 계좌를 위탁계좌로 전환하는 경우도 있습니다. 이 경우에는 와디즈에서 증권계좌로서 사용하실 수 있습니다.

따라서 증권사에 '제 계좌가 주식 거래가 가능한 계좌인가요?'라고 문의해보시는 게 좋습니다.


Q. 투자금이 100% 모이지 않을 경우 어떻게 되나요?

A. 뱅크페이에 납부하셨던 이체수수료를 제외하고는 증거금은 돌려드립니다.

투자형 프로젝트의 성공과 실패를 나누는 기준은 목표한 모집금액의 80% 이상이 모였는지 여부입니다.   

만약 1억원을 모집하고자하는 기업이 있고, 청약 마감일까지 7천만원이 모집된 경우에는 70%가 모집된 것이기 때문에 프로젝트가 실패한 것이고, 만약 8천만원이 모집된 경우에는 80% 이상이 모집된 것이기 때문에 프로젝트가 성공한 것입니다.

프로젝트가 실패하면 프로젝트 종료 다음 영업일에 청약증거금(=투자하신 금액)을 출금했던 계좌로 투자하신 금액이 돌아갑니다. 다만, 이전에 청약하실 때 뱅크페이를 사용하며 납부하셨던 이체수수료는 환불되지 않습니다.

예를 들어, 프로젝트가 실패했고 프로젝트의 종료일이 9월 4일(월)이면 청약증거금(=투자하신 금액)은 9월 5일(화)에 청약증거금을 출금했던 계좌로 반환되고, 뱅크페이를 사용하며 납부하셨던 이체수수료는 환불되지 않습니다.

100%가 넘은 후에도 투자가 가능한지 궁금하시다면 여기를 클릭해주세요.


Q. 100%가 넘은 프로젝트에 청약해도 되나요?

A. 청약은 하실 수 있지만, 투자자로 배정되지 않을 수 있습니다.

목표금액 대비 100% 초과한 프로젝트에서 

[투자하기] 버튼을 누를 경우 팝업창을 보실 수 있습니다!

물론 모집 목표보다 100%가 넘은 상태에서도 청약하실 수 있습니다.

다만, 프로젝트가 종료하고 최종 투자자를 배정할 때는 투자자로 배정되지 않으실 수도 있습니다.

투자자로 배정되는 것은 투자순번에 따라 진행이 됩니다. [투자하기] 버튼을 눌러서 청약신청서를 작성해주시면 청약예약이 되면서 투자순번이 부여됩니다. 입금기한 내에 청약증거금을 입금하시면 투자순번이 유효하게 되지만, 입금기한 내에 청약증거금을 입금되지 않으면 청약이 자동으로 취소되며 다시 [투자하기] 버튼을 눌러서 청약을 진행해주셔야합니다.


Q. 소득공제를 얼마나 받을 수 있나요?

A. 소득공제 혜택이 궁금하다면 여기를 살펴봐주세요.

와디즈에서 유망한 벤처기업에 투자하고,

소득공제 100% 혜택까지 받은 Jenny의 이야기

저는 와디즈를 통해서 증권형 크라우드펀딩에 처음 참여해 보았습니다. 총 3개의 기업에 주주로 참여를 했는데요, 수제자동차 기업 ‘모헤닉게라지스'에 200만원, 친환경 파도에너지 기업 ‘인진'에 100만원, 그리고 대한민국 수제맥주 시장의 선두주자 ‘세븐브로이'에 200만원을 투자했답니다.

    - 국내유일 수제자동차 기업 '모헤닉게라지스'에 200만원 투자

    - 친환경 파도에너지 기업 '인진에 100만원 투자

    - 수제맥주의 선두주자 세븐브로이'에 200만원 투자

일반 투자자의 경우 연간 투자 한도가 500만원이기 때문에, 저는 500만원을 세 기업에 골고루 나누어 투자했어요. 와디즈에는 앞으로의 성장이 기대되는 기업들이 정말 많더라구요! 이런 멋진 기업들의 주주가 될 수 있는 기회가 일반인들에게도 열리게 되어서 열심히 참여하고 있습니다. 관심있는 기업의 주주가 될 수 있는 기회도 정말 좋은데, 100% 소득공제 혜택까지 받을 수 있었어요. 

❤︎ 먼저 '세금'과 '소득공제'에 대해 알아봅시다!

‘세금’은 한 해 동안의 소득에 따라 결정됩니다.

우리 같이 아래 표를 활용해 세금을 계산해 볼까요?

1. 과세표준 구간을 보고, 내 소득이 해당되는 구간을 찾습니다.

2. 나의 연소득에 세율을 곱합니다.

3. 누진공제액을 빼줍니다.

(ex. 내 연소득이 5,000만원일 경우: 5,000만 X 24% - 522만원 = 678만원)

과세표준 

세율 

누진공제 

1,200만원 이하

6% 

 

1,200만원 초과 4,600만원 이하 

15% 

108만원 

4,600만원 초과 8,800만원 이하 

24% 

522만원 

8,800만원 초과 1억 5천만원 이하 

35%

1490만원 

1억 5천만원 초과 

38% 

1,940만원 

* 누진공제액이 왜 발생하는지 궁금하신 분?

 우리나라는 버는 소득에 따라 세율을 다르게 부과하는 누진세율을 택하고 있스빈다. 과세표준 구간에 따라 세율을 부과하는 것이죠, 그런데, 원칙적인 방법은 매우 복잡합니다. (ㅠㅠ)

 예를 들어 5,000만원을 버는 사람이면 ~ 1,200만원까지는 6% ~4,600만원까지는 15%, ~5,000만원까지는 24%를 각각 적용합니다. 그 다음 각 구간의 세율 차이에 의하 세액을 차감해주어야 합니다. ( 너무 복잡하지요) 그래서! 좀 더 쉽게 계산하기 위해 누진된 금액을 한꺼번에 빼주는, 누진공제액이 등장한 것입니다. 두 가지 방법 모두 같은 세금액이 나오므로, 우리는 좀 더 쉽게 간편한 방법을 이용하자구요!


 정리해보면, 세금은 다음과 같이 계산할 수 있습니다.

세금 = (연소득 x 세율) - 누진공제액

 당연히 연소득이 줄어들면 세금도 줄어들겠죠?

세금↓ = (연소득↓ x 세율) - 누진공제액


내 실제 연소득은 그대로이지만, 세금이 적용될 때 실제 연소득보다 적어 보이게 하는 방법이 있습니다. 바로 '소득에서 빼주는, 소득공제' 항목을 적극 활용하는 것입니다! 조세특례제한법에 의하면 1) 개인연금저축, 2) 연금저축, 3) 소기업/소상공인 공제부금, 4) 중소기업창업투자조합에의 출자 등 총 네 가지가 소득공제 항목에 해당됩니다. 하지만 2013년 1월 1일부터 개인연금저축과 연금저축 항목이 삭제되었고, 소기업/소상공인 공제부금은 소기업/소상공인 대상이라 일반인들에게는 적용되지 않습니다.

그렇다면, 우리에게 남은 것은 바로! '중소기업창업투자조합에의 출자 등' 항목만 남습니다. 그리고, 우리는 크라우드펀딩을 통해 벤처기업과 중소기업에 투자를 할 수 있습니다. 1,500만원까지 100% / 5,000만원까지 50% / 5,000만원 초과분은 30%가 소득공제 적용을 받을 수 있습니다.


❤︎ 제 경험을 바탕으로 좀 더 구체적인 예시를 들어볼게요 :)

 저는 일반투자자라 1년에 500만원까지 크라우드펀딩을 통해 투자가 가능합니다. 100%까지 소득공제를 받을 수 있지요! 제 1년 소득은 5,000만원입니다. 위에서 안내드린 방법에 따라 두가지 경우(크라우드펀딩으로 투자 안 할 때/ 투자 할 때)로 나누어 세금을 계산해 보았어요. 자그마치 120만원(!)이나 차이가 납니다.

 크라우드펀딩으로 투자안 할 때

5,000만원 x 0.24(세율) - 522만원(누진공제액) = 678만원

 크라우드펀딩으로 투자 할 때

4,500만원 x 0.24(세율) - 522만원 (누진공제액) = 558만원

이왕 투자할거라면... 소득공제 혜택을 눈여겨 보는 것도 좋겠죠? :) 와디즈에서는 소득공제 혜택을 받을 수 있는 유망한 벤처기업들이 크라우드펀딩을 진행중입니다. 투자 메인 페이지에서 '소득공제 가능기업'에 체크박스를 표시하면 다음과 같이 소득공제 혜택을 받을 수 있는 기업들만 확인할 수 있어요!

와디즈에서 멋진 기업의 주주가 될 수 있는 기회, 그리고 소득공제 혜택을 받을 수 있는 기회를 놓치지 마세요! 아참, 소득공제 혜택 적용은 올해 2017년까지만 가능합니다! 와디즈에 올라오는 프로젝트의 소득공제 마크를 유심히 지켜봐주세요 :) 


Q. 투자 내역을 어디서 볼 수 있나요?

A. [나의펀딩현황] 메뉴를 살펴봐주세요.

[나의펀딩현황]에서 투자현황(투자내역)을 살펴보실 수 있습니다.

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [투자]를 클릭하여서 투자내역을 살펴볼 수 있습니다.


Q. 투자를 했는데 증권이 입고되지 않았습니다. 어떻게 해야하나요?

A. 증권입고 관련해서 체크해야하는 사항들을 안내드릴게요.

투자를 완료하고, 투자자로 배정되었다는 문자까지 받으셨다면

증권(주식/채권)이 입고되는 날짜를 기다리고 계실텐데요.

막상 입고되는 날짜에 증권계좌를 열어봤는데, 입고된 내역이 확인되지 않는다면 많이 당황스러우실 것 같습니다.

아래 사항들을 미리 체크해주시는 게 좋을 것 같습니다.

- 주식에 투자했다면, 증권사에 "O월 O일에 OOO주식회사의 주식이 입고되었는데 어떤 메뉴에서 입고된 걸 확인할 수 있나요?"라고 문의해주시면 됩니다.

- 채권에 투자했다면 채권의 종류에 따라서 증권계좌에 보일 수도, 보이지 않을 수도 있습니다. '보호예수'되는 채권이라면 증권계좌에 입고되지 않고 실물의 증권이 예탁결제원에 맡겨진 상태로 있다가 채권의 만기일(또는 중도상환일)에 현금을 정산하는 방식으로 진행이 되기 때문에 증권계좌에서는 확인하실 수가 없습니다.

채권의 경우가 어렵게 느껴지실 수 있는데요, 내가 투자한 채권이 '보호예수'되는지 안되는 지 궁금하시다면 와디즈로 문의주세요 


Q. 입고 받은 증권은 어디에서 확인할 수 있나요?

A. 입고된 증권은 청약할 당시 입력하셨던 증권계좌에서 확인하실 수 있습니다.

입고된 증권은 입력하신 증권계좌에서 조회하실 수 있습니다.

입력하신 증권계좌는 [나의펀딩현황]에서 확인하실 수 있습니다 😊

간혹 증권계좌에 보이지 않는 경우는 크게 두 가지가 있습니다.

1. 이익참가부사채 등 보호예수 채권인 경우

  영화에 투자하는 프로젝트이거나, 금리가 변동되는 채권에 투자하는 프로젝트인 경우에는 채권이 증권계좌로 입금되는 것이 아니라 사채가 실물로 발행되어 한국예탁원에 보관되어집니다. 이것을 보호예수라고 말합니다.

  증권계좌로 입고되지 않기때문에 증권계좌에서 확인하실 수 없고, 정산이 되어야 이익 또는 손실금이 반영된 금액을 투자할 때 미리 입력하셨던 은행 또는 증권계좌로 상환받게 되는 방식입니다. 배정이 되었는지 확인을 원하시는 경우에는 [나의펀딩현황]에서 확인해주세요.

2. 비상장 주식 조회

크라우드펀딩으로 받은 주식은 '비상장 주식'인데요,

비상장주식의 경우에는 증권사에 따라 잔액 조회 방법이 다를 수 있습니다.

증권사로 비상장 주식 조회 방법을 문의해주시기 바랍니다 😀

혹시,  투자하신 금액과 증권계좌의 잔액이 다른가요?

증권사에 따라서 계좌 조회 하면의 평가금액을 '액면가'로 보여주는 곳이 있답니다. 

아직 유통되지 않는 '비상장주식' 이기 때문입니다 :) 

주식수량을 확인해주시고, 수량이 맞다면 입고가 정상적으로 된 상황이오니, 안심하셔도 됩니다.

- 액면가 = 주식의 초기 가격 

** 와디즈매입가(발행가) = 기업가치가 반영된 시장의 가격


Q. 투자금 회수는 어떻게 하나요?

A. 채권은 만기일에, 주식은 거래를 통해 회수하실 수 있습니다.

투자자로 배정된 후에 '어떻게 투자금을 회수할 수 있을지?'가 궁금하실 것 같습니다.

채권에 투자하신 경우에는 기본적으로 만기일까지 기다려주셔야합니다. 원금 손실의 가능성이 있겠지만, 채권은 만기일에 정산이 되는 것이 원칙이며 미리 투자설명서에 중도상황에 대해서 명시한 내용이 있다면 그 보다 앞당겨 정산될 수도 있습니다.

주식에 투자하신 경우에는 좀 더 오래 기다리셔야 투자금 회수가 기회를 얻으실 수 있습니다. 주식은 해당 발행기업이 M&A를 하거나, 전매제한 기간(1년)이 지난 후 매도를 하시거나, 전매제한 기간 내이더라도 해당 발행기업이 KSM 시장에 상장한 경우에는 거래하실 수 있습니다. 그리고 전매제한 기간 내이더라도 전문투자자에게는 예외적으로 주식을 매도하실 수 있습니다.

대부분의 기업들이 투자자분들에게 '투자혜택'을 제공해드리고 있습니다.

- 영화 프로젝트는 영화 굿즈를 드리는 혜택을 제공하기도 하고, 시사회를 진행하기도 합니다.

- 주식을 발행하는 기업의 경우 주주들과의 모임을 진행을 적극적으로 검토하고 있습니다.

- 일정 금액이상 투자하거나, 선착순으로 일부 투자자분에게는 해당 기업에서 이용가능한 '선불카드'나 '(뮤지컬프로젝트인 경우) 공연할인권'등을 제공해드리기도 합니다.

와디즈에서 기업에 투자도 하고, 추가적으로 '투자혜택'도 누려보시는 것도 좋을 것 같습니다 :)

투자혜택이 궁금하시다면, 프로젝트 페이지 내에서 '핵심정보' 또는 '투자설명서'를 참고해주시길 부탁드립니다!


Q. 미배정되었다고 하는데 사유가 무엇인가요?

A. 미배정되는 경우의 수를 알려드리겠습니다.

열심히 청약완료를 했는데, 미배정되었다고 문자를 받으면 많이 아쉬우실 것 같습니다.

투자자에서 미배정되는 사유를 투자자분들께서 종종 궁금해하시기도 하는데요, 경우의 수를 알려드리겠습니다.

- 모집금액 100% 초과(모집완료 금액+입금대기 금액)된 후에 청약을 하신 경우에는 투자자 순번이 후순위 이시기 때문에 먼저 투자한 투자자가 청약취소를 하지 않는 이상 투자자 배정이 되지 않습니다.

- 모집금액 100% 내에 청약했을 지라도, 증권계좌가 입고 불가 상태로 확인되는 경우에는 투자자 배정에서 제외됩니다.

대부분의 경우 위 2가지 중 하나의 사유로 투자자 미배정이 됩니다.


Q. 발행기업와 연락하고 싶어요. 어떻게 해야하나요?

A. 피드백과 이메일을 활용해주세요.

발행기업에 문의사항이 있을 때 프로젝트 상세 페이지에 있는 회사 이메일주소 또는 상세페이지의 [피드백]란을 이용해주시길 부탁드립니다.

[회사 이메일주소 확인하는 방법]

[피드백 남기는 방법]


Q. 환불된 투자금은 어느 계좌로 입금되나요?

A. 환불된 투자금은 청약증거금(=투자한 돈)을 출금하셨던 계좌로 돌아갑니다.

청약하실 때 팝업창이 뜨면서(모바일이라면 뱅크페이앱이 실행되면서) 출금할 계좌, 예금주명, 주민등록번호, 비밀번호 등을 입력하셨을텐데요. 이 때 입력하셨던 그 계좌번호로 환불이 됩니다.

와디즈는 투자자분이 어떤 계좌에서 출금하셨는지는 알지 못합니다. 따라서 본인이 출금하셨던 계좌를 기억해주셔서 투자취소를 한 후에는 해당 계좌를 확인해주시면 됩니다 


Q. 근로소득 원청징수영수증은 어디서 발급받나요?

A. 근무처에 발급을 요청하시거나 홈택스에서 발급받으시면 됩니다.

근로소득원천징수 영수증은 근무처에서 발급받거나, 국세청 홈택스 페이지에서 발급받으실 수 있습니다. 

2017년에 와디즈에 근로소득원천징수영수증을 제출하고자 하신다면, 2016년 귀속 근로소득원천징수영수증을 제출해주시면 됩니다.

근무처에서는 보통 총무/인사/경리 관련 부서에서 근로소득원천징수영수증을 발급하고 있습니다 😀

와디즈로 근로소득원천징수영수증을 제출해주실 때 아래 사항이 빠지지 않았는지 체크 부탁드려요!

- 회사 직인 필수

- 본인 이름, 주민등록번호 확인가능해야함(주민등록번호가 가려진 경우에는 근로소득원천징수영수증 상에서 성함/주소 등을 확인할 수 있어야함)

- 1~2페이지를 제출해야함

- '23. 근로소득금액'이 1억원 초과인지 확인(1억원 이하일 경우 소득요건구비투자자 대상이 아님)


Q. 일반투자자/소득적격투자자/전문투자자의 차이는 무엇인가요?

A. 소득요건, 자격요건에 따라 투자등급이 달라지고, 투자등급이 변경되면 투자한도가 달라집니다.

투자등급은 총 3가지이고, 본인의 소득/자격 요건에 따라 와디즈에 투자등급 변경을 신청하실 수 있습니ek.


[일반투자자]

- 자격요건: 만 19세 이상의 성인 누구나

- (소득적격투자자 또는 전문투자자에 해당하지 않는 경우에는 일반투자자입니다.)

- 투자한도: 연간 총 500만원(발행기업 당 투자한도는 연 200만원)

- 증빙서류: 없음


[소득적격투자자]

- 자격요건(아래 사항 중 1가지 충족될 경우 가능)

① 근로소득금액이 1억원을 초과하는 경우

② 사업소득금액이 1억원을 초과하는 경우

③ 근로소득금액과 사업소득금액의 합계가 1억원을 초과하는 경우

④ 금융소득(이자소득+배당소득)이 2천만원을 초과하는 경우

⑤ 금융전문자격시험에 합격하고, 금융투자전문인력으로 협회에 3년이상 등록되어있는 경우(퇴직하여 말소된 경우는 해당하지 않음)

- 투자한도: 연간 총 2,000만원(발행기업 당 투자한도는 연 1,000만원)

- 증빙서류:

① 근로소득금액이 1억원을 초과하는 경우

ㄱ. 직전 과세기간의 근로소득원천징수영수증 1~2페이지(발행회사 직인날인 필수)

ㄴ. 근로소득원천징수영수증이 없다면 직전 과세년도 근로자 연말정산용 소득금액증명으로 대체가능

② 근로소득금액과 사업소득금액의 합계가 1억원을 초과하는 경우

⒧ 본인이 홈택스에서 출력하는 경우: 

ㄱ. 직전 과세기간의 종합소득 과세표준 확정신고서

(인적사항이 있는 첫 페이지 서명 및 근로소득+사업소득명세서 페이지 필수)

ㄴ. 종합소득세 신고서 접수증(신고자실명 기재된 접수증)

⑵ 세무대리인에게 신고서를 받는 경우:

ㄱ. 직전 과세기간의 종합소득 과세표준 확정신고서

(세무대리인 날인 필수, 근로소득+사업소득명세서 페이지 필수)

③ 금융소득(이자소득+배당소득)이 2천만원을 초과하는 경우

⒧ 본인이 홈택스에서 출력하는 경우: 

ㄱ. 직전 과세기간의 종합소득 과세표준 확정신고서

 (인적사항이 있는 첫 페이지 서명 및 이자소득명세서+배당소득명세서 페이지 필수)

ㄴ. 종합소득세 신고서 접수증(신고자실명 기재된 접수증)

⑵ 세무대리인에게 신고서를 받는 경우:

ㄱ. 직전 과세기간의 종합소득 과세표준 확정신고서

 (세무대리인 날인 필수, 이자소득명세서+배당소득명세서 페이지 필수)

④ 금융전문자격시험에 합격하고, 금융투자전문인력으로 협회에 3년이상 등록되어있는 경우(퇴직하여 말소된 경우는 해당하지 않음)

ㄱ. 아래 자격에 해당하는 합격증

(ⅰ) 금융투자협회가 주관하는 다음 각 목의 어느 하나에 해당하는 시험

ⓐ 펀드투자권유자문인력 적격성 인증 시험 또는 펀드투자상담사 시험

(다만, 종전증권펀드투자상담사 시험과 부동산펀드투자상담사 시험은 포함한다.)

ⓑ 파생상품투자권유자문인력 적격성 인증 시험 또는 파생상품투자상담사 시험

ⓒ 투자자산운용사 시험

ⓓ 일임투자자산운용사 시험 또는 집합투자자산운용사 시험

ⓔ 금융투자분석사 시험

ⓕ 재무위험관리사 시험

(ⅱ) 종전 한국증권업협회가 주관하는 다음 각 목의 어느 하나에 해당하는 시험

ⓐ 1종투자상담사 자격시험 또는 선물거래상담사 자격시험

ⓑ 자산설계운용전문인력시험 또는 자산설계전문인력시험

ⓒ 재무위험관리사자격시험

(ⅲ) 종전 한국증권업협회와 투자신탁협회가 공동으로 주관하는 운용전문인력시험

(ⅳ) 종전 투자신탁협회가 주관하는 일반운용전문인력시험

(ⅴ) 종전 자산운용협회가 주관하는 운용전문인력시험

(ⅵ) 종전 한국선물협회가 주관하는 선물거래상담사자격시험

(ⅶ) 다음각목의어느하나에해당하는시험

ⓐ 미국 CFA협회(CFA Institute)가 주관하는 국제재무분석사(CFA)

ⓑ 국제재무위험관리 전문가협회(Global  Association of Risk Professionals)가 주관하는 국제재무위험관리사(FRM)

(ⅷ) 금융투자협회가 주관하는 증권투자권유자문인력 적격성 인증시험 또는  증권투자상담사 시험

(ⅸ) 국제투자분석사회(Association of Certified  International Investment Anyalysts)가  주관하는 국제공인투자분석사(CIIA)시험

ㄴ. 금융투자전문인력 등록 확인서

(투자권유자문인력, 투자운용인력, 조사분석인력, 위험관리전문인력으로 등록된 기간이 3년 이상이고, 말소된 기간은 포함하지 않음)


[전문투자자]

- 자격요건: 자본시장법상 전문투자자(법 제9조제5항), 전문성, 위험감수능력을 갖춘자(시행력 제118조의17제2항)

- 투자한도: 제한 없음

- 증빙서류: 위 표 참조


2. 리워드 펀딩하는 방법이 궁금하다면(클릭!)

Q. 펀딩하기는 쇼핑하기가 아닙니다.

펀딩과 쇼핑은 다릅니다. 어떻게 다른지 안내드리겠습니다.

펀딩하기는 쇼핑하기가 아닙니다.

쇼핑과 어떻게 다른지 아래 내용을 읽어주세요! :)

 와디즈의 리워드 프로젝트에 펀딩하는 것은 메이커의 창작물을 단순히 사고파는 쇼핑이 아니라, 메이커의 창작활동 및 목표실현을 위한 과정을 지원하는 것입니다. 

1. 펀딩 즉시, 결제가 진행되지 않아요.

 결제 수단을 등록하면 결제가 바로 진행되는 쇼핑하기와 다르게 펀딩하기는 프로젝트의 목표금액과 마감일이 있어 해당 프로젝트가 목표금액을 달성했을 때만, (프로젝트의 펀딩 타입에 따라 그렇지 않은 경우도 있습니다.) 마감일 다음날 펀딩에 참여한 서포터 모두 함께 결제가 진행됩니다.

2. 배송이 바로 진행되지 않아요.

 결제가 모두 완료되었다고 펀딩한 리워드가 바로 발송되지 않습니다. 메이커는 각 리워드마다 리워드 발송 시작일을 명시하고 있으며, 메이커가 약속한 리워드 발송 시작일에 발송이 진행되는 것을 원칙으로 합니다.

3. 메이커의 사정으로 리워드 발송이 지연 또는 불가할 수도 있습니다. 

 펀딩 금액을 전달받아 리워드 제작을 시작하는 크라우드펀딩의 특성 상, 메이커가 약속한 리워드 발송이 지연 또는 불가할 수도 있습니다. 스토리 하단에 메이커가 약속한 리워드 발송 지연 시에 대한 약속과 교환 및 환불 정책에 대한 설명이 작성되어 있으니 펀딩 참여 전 꼭 읽어주세요.


Q. 와디즈 리워드 펀딩이란 무엇인가요?

A. 메이커가 만든 제품/서비스를 돌려주는 리워드형 크라우드펀딩

리워드형 펀딩은 자금이 필요한 메이커가 펀딩을 통해 자금을 모집하여 제작하며 리워드가 완성되면 펀딩에 참여한 서포터에게 제공하는 방식입니다. 메이커는 프로젝트 진행중 서포터에게 받은 피드백을 보상품 제작에 반영하거나 프로젝트 홍보에 도움을 준 서포터들을 위해 이벤트를 진행하는 등 펀딩하는 서포터와 제품/서비스를 만드는 메이커간의 긴밀한 소통이 이루어지는 점이 특징입니다.


Q. 리워드 프로젝트 참여방법 한눈에 보기

A. 펀딩 하는 방법을 안내드립니다.

Q. 와디즈 프로젝트? 쇼핑몰과 다른건가요?

A : 와디즈는 결제하고 바로 배송하는 쇼핑몰이 아닙니다 :) 세상에 아직 출시되지 않은 제품을 생산자(메이커)가 직접 소개하고 정해진 기간동안 오픈예정(펀딩)을 받는 방식이랍니다. 따라서 프로젝트가 종료되고 목표금액을 달성 해야만 카드결제가 실행이 되며, 프로젝트가 종료 이후인 '리워드 발송 시작일'부터 제품 발송이 시작됩니다.

꼭 읽어주세요!

- 펀딩을 하고 나서 리워드를 받기까지 2주 ~ 6개월까지 기다리실 수 있습니다.

- 지금은 카드결제 예약을 하시는 거구요! 프로젝트 종료 후에 일괄 결제됩니다.

- 펀딩 참여가 아니더라도 프로젝트를 SNS에 공유해주시거나 댓글을 달아주시면 메이커에게는 정말 큰 힘이 되오니 많은 참여 부탁드립니다.

리워드 펀딩(결제예약)하기

1. 펀딩하실 프로젝트를 클릭해주세요. (페이지 URL이 있다면 바로 접속해주세요!)

2. 오른쪽 상단에 있는 펀딩하기 버튼을 클릭해주세요.

3. 리워드를 선택하고, [다음 단계로] 버튼을 클릭합니다.

4. 리워드를 배송받을 주소와 카드정보를 입력하면 끝!

※ 프로젝트의 펀딩기간, 리워드 발송 시작일을 다시 한번 확인해주세요

※ 펀딩 취소는 프로젝트 기간 내에만 가능한 점 유의해주세요 :)


Q. 왜 우리를 서포터라고 부르나요?

A. 프로젝트에 펀딩(투자)을 하고 그에 대한 대가를 받는 사람

와디즈를 이용하는 분은 크게 2가지로 나뉩니다.

1. 프로젝트를 개설해서 펀딩(투자)을 받는 사람

2. 프로젝트에 펀딩(투자)을 하고 그에 대한 대가를 받는 사람

1번을 와디즈에서는 프로젝트를 개설한 사람이라고해서 메이커(Maker)라고 부르고, 2번을 프로젝트를 응원해주는 서포터(Supporter)라고 부릅니다. 그리고 저희 와디즈는 이 둘 사이를 중개하는 플랫폼입니다.

프로젝트를 자신의 SNS에 공유하기도 하고, 직접 펀딩에 참여하기도 하는 방식으로 프로젝트를 응원하는 분들이기 때문에 서포터라고 부르고 있습니다.

와디즈에서 프로젝트를 진행하는 대다수의 메이커들은 초기단계의 스타트업이나 개인이 많습니다. 서포터분들의 응원과 지지를 바탕으로 프로젝트 또는 비즈니스를 더 확장시킬 수 있는 기회를 얻게 될 것입니다 


Q. 리워드 포인트는 어떻게 받을 수 있나요?

A. 이벤트에 참여하고, 포인트 받아가세요~

리워드 포인트는 리워드 프로젝트에 참여할 때 캐쉬처럼 사용할 수 있는 포인트입니다.

리워드 포인트는 와디즈에서 진행하는 이벤트에 참여하여 받을 수 있습니다!

아래 이벤트 내용을 확인하셔서 이벤트에 참여하고, 포인트 받아가세요~


Q. 배송이 지연될 수도 있나요?

A. [위험요인과 해결방안]을 꼼꼼히 살펴주세요.

크라우드펀딩으로 진행하는 제품들의 경우에는 양산을 거치지 않은 시제품 정도의 상태인 경우가 많이 있습니다. 양산 전 펀딩을 통해 자금을 모집하여 제작하고 배송하는 형태로 진행을 하는거죠. 

그러다보니 실제 시제품과 양산 제품이 다르거나, 제작 과정 중 문제가 발생하는 등 예상치 못하는 상황이 발생하기도 합니다. 이런 부분에 대해서는 와디즈에서도 프로젝트 오픈 전 꼼꼼히 확인하기 위해 노력하고 있으나, 다양한 변수들로 종종 배송이 지연될 수 있습니다.

배송이 지연되는 경우 

프로젝트 스토리 하단의 [위험요인과 해결방안]에 명시되어있는 내용처럼

배송이 지연된 자세한 사유와 예상 배송일정 대해 메이커가 [새소식] 페이지에 작성하여 서포터분들에게 공지합니다. 

새소식 내용은 메일로 발송이 되니, 메일로 내용을 받아보실 수 있습니다.

또한, [위험요인과 해결방안]의 내용에 따라

일정 기간(통상적으로, 약속한 날로부터 1~2개월이 경과했을 때) 이상 지연되는 경우에는 메이커에게 요청하여 100% 환불을 받으실 수 있습니다.


Q. 리워드를 직접 수령할 수 있나요?

A. 일반적으로 리워드의 배송은 택배배송으로 이뤄집니다.

 펀딩에 참여 후 결제가 이뤄지고, 이렇게 모인 금액으로 메이커는 제품을 생산하거나 서비스를 제공해드리기 위한 준비기간을 갖게 됩니다.

리워드가 서비스 이용권의 종류였다면, 리워드 발송 예정일에 서포터님께 문자 또는 우편을 통해 발송을 시작하게 됩니다. 

 배송과 관련된 정보는 [새소식]을 통해서 살펴보실 수 있으며 새소식이 업데이트 되면 이메일로 알림을 드립니다.

리워드가 제품의 종류라면, 메이커는 펀딩금액으로 제품을 생산하는 기간을 거쳐서 리워드 배송시작일에 서포터님께 택배 발송을 해드립니다.

 대부분의 메이커는 리워드 배송 시작 후 며칠 동안 나누어서 택배를 발송해드리고 있으며, 택배 발송이 시작되는 내용과 진행상황, 그리고 택배 발송이 완료되면 [새소식]을 통해서 안내를 드리고 있습니다.


Q. 회원탈퇴하는 방법을 알려주세요.

A. 떠나신다는 것이 아쉽지만, 회원 탈퇴 방법을 안내드리겠습니다.

이 가이드글을 읽는 회원분은,

와디즈를 떠나기로 결심하신 것이라 저희로서는 무척 아쉽습니다.

하지만, 언젠가 다시 만나뵐 수 있기를 희망하며 회원탈퇴 방법을 알려드리겠습니다.

탈퇴하기 전 아래의 사항들을 참고해주세요.

- 탈퇴는 PC에서 가능합니다.

- 리워드형 프로젝트에 참여한 경우, 아직 배송완료되지 않았다면 탈퇴를 하실 수 없습니다.

- 투자형 프로젝트에 참여한 경우, 주식은 증권 교부일/채권은 만기일까지는 탈퇴를 하실 수 없습니다.

- 와디즈스쿨 수강자는 강의일 +1일이 지나야 탈퇴가 가능합니다.

회원탈퇴 방법

1. PC홈페이지(www.wadiz.com)에서 로그인 후 우측 상단 프로필 사진을 클릭

2. [My정보설정]이라는 메뉴를 클릭

3. [회원탈퇴]라는 링크를 클릭

4. 각 항목을 확인하신 후에 하단의 빨간색 [회원 탈퇴] 버튼을 클릭

5. 팝업에서 뜨는 [정말로 탈퇴하시겠습니까?]에서 [확인]을 클릭

다음에 또 만나뵙기를 바라면서..

문의사항이나 피드백은 언제든지 저희에게 연락 부탁드립니다.


Q. 얼리버드는 무엇인가요?

A. 남들보다 먼저 리워드 펀딩에 참여하시면 얼리버드 혜택을 누릴 수 있습니다.

리워드형 프로젝트는 서포터분들의 참여로 이뤄집니다.

각 리워드 제품 또는 서비스마다 가격이 있고, 가격별로 리워드 구성에 차이가 있습니다.

대부분의 메이커(프로젝트 개설자)는 먼저 펀딩에 참여해주는 서포터분들을 위해 "얼리버드" 혜택을 준비합니다. 똑같은 구성이라도 조금 더 저렴하거나, 같은 가격이라면 추가 구성품이 있습니다.

얼리버드는 제한 수량이 정해져 있는 경우가 많아 선착순으로 마감됩니다.

리워드 펀딩에 참여하기 전에 [슈퍼 얼리버드] 또는 [얼리버드] 라고 써있는 리워드가 아직 수량이 남았다면 얼리버드 리워드로 참여해보시는 것을 권해드립니다 :)


Q. 결제는 일시불로만 가능한가요?

A. 카드 할부는 어떻게 하나요?

와디즈 시스템 상 펀딩에 참여하실 때

카드 할부 결제는 불가하다는 점 양해부탁드립니다.


Q. 리워드 포인트 사용방법을 안내드립니다.

A. 리워드 포인드 사용, 유효기간, 반환에 대해 안내드려요.

리워드 포인트 제도란, 와디즈에서 진행하는 리워드형 크라우드펀딩 프로젝트의 모금 참여 시 결제금액에서 포인트 상당의 금액을 차감하여 사용할 수 있도록 한 적립금 제도를 말합니다.

리워드 포인트의 사용

- 리워드 포인트는  1포인트가 1원의 가치와 동일하게 적용됩니다. 

- 100포인트 이상의 단위로 사용 가능합니다. 

- 포인트 사용 한도는 제한이 없으며, 리워드형 크라우드펀딩 참여 시 총 결제금액을 포인트만으로도 결제가 가능합니다. 

리워드 포인트의 유효기간 

- 리워드 포인트는 유효기간 내에 사용하여야 합니다. 

- 리워드 포인트의 유효기간은 포인트를 획득한 해당 년도의 차기 년도 12월 31일 23시 59분까지입니다(예를 들어, 2016년 1월 1일에 획득한 포인트는 2017년 12월 31일까지입니다).

- 유효기간 내 사용하지 않은 잔여 포인트는 유효기간 종료일의 익일에 소멸됩니다.

리워드 포인트의 반환

- 리워드형 크라우드펀딩 프로젝트가 목표한 금액모집이 실패한 경우 참여자들의 결제는 일괄적으로 취소되며, 이때 결제에 사용한 포인트들도 사용 전의 상태로 반환됩니다. 

- 리워드형 크라우드펀딩 프로젝트 진행 중에 참여의사를 철회하기 위해 결제예약 취소를 신청한 경우, 취소 처리 후 지체 없이 사용한 포인트도 사용 전의 상태로 반환됩니다. 

▶ 리워드 프로젝트 참여방법(펀딩하는 방법)이 궁금하면 여기를 클릭해주세요!


Q. 결제는 언제 되나요?

A. 프로젝트 종료 후 다음 영업일에 결제가 이루어집니다.

와디즈는 프로젝트 진행중에는 결제 예약을 받고

프로젝트 종료 후 다음 날 결제가 이루어집니다.

D-day 프로젝트 종료일

D+1 오후5시  1차 결제 

D+2 오후5시 2차 결제

D+3 오후5시 3차 결제

D+4 오후5시 4차 결제 (최종결제)

참고로, 결제가 이루어지는 날짜는 영업일(평일)기준입니다. 

ex) 금요일에 프로젝트가 종료되면 월~목에 결제가 이루어집니다.최종결제 시에도 결제가 실패하는 경우에는, 프로젝트 참여에서 제외되어집니다.


Q. 배송은 언제 되나요?

A. 발송 시작일을 확인해주세요.

크라우드펀딩은 프로젝트 종료 후 기재된 배송일에 배송이 됩니다 :)

프로젝트의 배송 예정일은 곳곳에서 확인하실 수 있습니다.

- 프로젝트 참여 전, 리워드의 발송 시작일을 확인해주세요.

- 펀딩참여 후에는 마이페이지 > [나의펀딩현황]에서 확인하실 수 있습니다.

혹시, 발송 시작일이 지났는데도 아직 배송을 받지 못하셨나요?

배송 진행상황을 프로젝트의 [새소식]에서 확인해주시고, 문의사항이 있다면 메이커에게 문의해주세요 :)


Q. 펀딩 취소 하려면 어떻게 해야하나요?

A. 프로젝트 종료 이후에는 펀딩 취소가 불가하니, 종료 이전에 취소해주세요.

프로젝트가 종료되기 이전에는 아래 경로를 통해  펀딩 취소가 가능합니다.

로그인 후 [나의 펀딩 현황] >참여한 프로제트의 [변경/취소] > [참여 취소] 버튼 클릭

단, 프로젝트 종료 후에는 메이커가 서포터를 위해 보상품 제작을 시작한 상태입니다. 

따라서, 프로젝트 종료 이후에는 펀딩 취소가 불가하니, 종료 이전에 취소해주세요! :)

결제는 프로젝트 종료 D+1부터 이루어지기 때문에 결제당일 취소는 불가능합니다.

리워드 펀딩 취소하는 방법

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [리워드]를 클릭하여서 펀딩취소를 원하는 프로젝트를 클릭합니다.

   (펀딩 취소는 프로젝트 종료 전까지만 가능하고, 종료 후에는 취소할 수 없습니다)

6) [결제예약 취소] 버튼을 클릭하여 취소를 합니다.

7) 취소된 것을 확인하실 수 있게 됩니다.


Q. 교환/환불/AS는 어디로 문의해야하나요?

A. 제품 관련 교환/환불/AS은 메이커에게 문의해주세요.

제품을 제작하고 배송하는 역할은 해당 프로젝트를 개설한 '메이커'가 하기때문에

제품 관련 교환/환불/AS은 메이커에게 문의하시면 더 정확한 안내를 받으실 수 있습니다.

메이커 연락처는 프로젝트 화면 오른쪽(PC기준)이나 프로젝트 명 아래(모바일기준)에서 확인하실 수 있습니다 :)


Q. 펀딩번호는 어디서 확인하나요?

A. 펀딩 번호를 확인하는 방법을 안내드립니다.

펀딩번호는 펀딩한 건별로 부여되는 고유번호입니다. 아래 진행방법으로 확인해보실 수 있습니다.

1. PC에서 펀딩 번호 확인하는 방법

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) 펀딩번호를 확인하고 싶은 프로젝트를 클릭합니다.

6) 펀딩번호를 확인할 수 있습니다!

2. 모바일에서 펀딩번호 확인 하는 방법(와디즈앱 기준)

1)좌측 상단 메뉴모양(三)을 클릭합니다.

2) [나의 펀딩현황] 메뉴를 클릭합니다.

3) 펀딩 번호를 확인하고 싶은 프로젝트를 클릭합니다.

4) 펀딩번호를 확인할 수 있습니다.


Q. 카드 결제 정보를 변경하고 싶어요.

A. [펀딩결제내역] > [정보변경/취소] > [결제정보변경]으로 이동해주세요.

리워드 프로젝트가 종료 전이라면 언제든

로그인 후 [나의 펀딩현황] > [펀딩결제내역]  > 참여한 프로젝트 이름 우측 [ 정보변경/취소] 버튼  > [ 결제정보변경] 을 통해 카드정보를 변경하실 수 있습니다 :)

결제 정보를 변경하셨다면, 다음 결제 시기에 결제가 이루어집니다.

D-day 프로젝트 종료일

D+1 오후5시  1차 결제 

D+2 오후5시 2차 결제

D+3 오후5시 3차 결제

D+4 오후5시 4차 결제 (최종결제)

※ 카드 결제는 영업일에만 진행된다는 점 참고 부탁드립니다.  

결제카드 정보 변경 방법

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [리워드]를 클릭하여서 옵션 변경을 원하는 프로젝트를 클릭합니다.

6) [결제 정보 변경하기]버튼을 클릭하여 결제 카드 정보를 변경한 후 [저장] 버튼을 클릭합니다.


Q. 주소변경은 어떻게 해야하나요?

A. 주소 변경은 [나의펀딩현황]에서 하실 수 있습니다.

리워드 펀딩에 참여하고, 주소를 변경하고 싶으시다면 프로젝트가 종료되기 전까지만 와디즈 홈페이지에서 주소 수정을 하실 수 있습니다.

프로젝트가 종료된 후에 변경을 원하시면, 해당 프로젝트의 메이커에게 연락하여 배송지변경요청을 해주시길 부탁드립니다.

주소 변경하는 방법

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [리워드]를 클릭하여서 주소 변경을 원하는 프로젝트를 클릭합니다.

    (프로젝트 종료되기 전까지만 와디즈 홈페이지에서 변경할 수 있습니다.)

6) 아래쪽에 [배송지 정보 변경하기] 버튼을 클릭합니다.


Q. 펀딩 참여했는데, 옵션을 변경하고 싶어요.

A. 옵션변경은 [나의 펀딩현황]에서 프로젝트 종료전까지 변경 하실 수 있습니다.

리워드형 프로젝트가 종료되기 전까지 와디즈 홈페이지에서 옵션을 변경하실 수 있습니다.

혹시 이미 프로젝트 종료되었다면 메이커에게 연락하여 옵션 변경이 가능할지 확인 부탁드립니다. 이미 생산이 진행되고 있다면 옵션 변경이 어려울 수 있기 때문입니다.

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [리워드]를 클릭하여서 옵션 변경을 원하는 프로젝트를 클릭합니다.

6) 초록색 글씨로 되어있는 '옵션 변경'을 클릭하여 옵션을 변경한 뒤 '변경완료' 버튼을 클릭합니다.


Q. 새소식은 어디에서 확인할 수 있나요?

A. 새소식은 프로젝트 상세페이지 또는 이메일을 통해서 확인하실 수 있습니다.

프로젝트가 진행되는 상황을 메이커는 서포터에게 [새소식] 메뉴를 통해 공유하게 됩니다.

서포터분들이 매일 와디즈 홈페이지에 들어올 수 있는 것은 아니기에,

메이커가 새소식을 업데이트하면 서포터분들의 이메일(와디즈에 가입한 이메일계정)으로 알림메일을 발송드립니다.

와디즈 홈페이지에서 내가 참여한 프로젝트의 새소식을 확인하고 싶다면 아래의 방법을 참고해주세요 :)

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) 펀딩번호를 확인하고 싶은 프로젝트를 클릭합니다.

6) 프로젝트 제목을 클릭하면, 프로젝트 상세 페이지로 이동합니다.

7) [새소식]을 클릭합니다.


Q. 펀딩 내역은 어디서 확인할 수 있나요?

A. [나의 펀딩현황]에서 확인하실 수 있습니다.

리워드형 프로젝트에 펀딩하신 내역은 [나의펀딩현황]에서 살펴보실 수 있습니다.

1) 와디즈 홈페이지 우측 상단 [로그인]을 클릭합니다.

2) 로그인을 진행합니다.

3) 우측 상단 프로필 사진을 클릭합니다

    (프로필사진을 설정하지 않았다면, 동그라미 회색 모양이 기본 설정입니다.)

4) [나의 펀딩현황] 메뉴를 클릭합니다.

5) [리워드]를 클릭하여서 펀딩내역을 보실 수 있습니다.


2. 리워드 펀딩하는 방법이 궁금하다면(클릭!)

Q. 와디즈펀딩과 쇼핑은 어떻게 다른가요?

A. 펀딩하기는 쇼핑하기가 아닙니다.

1. 카드 정보 입력 즉시 결제(또는 승인)가 실행되지 않아요.     

 프로젝트 종료일 기준으로 성공할 경우, 종료일 다음날에 모든 참여자가 동시에 결제됩니다. 

2. 즉시 배송되지 않아요.    

프로젝트가 성공한 경우, 메이커가 약속한 배송일에 배송이 시작됩니다. 리워드 배송일이 펀딩한 날로부터

조금 멀더라도 설레는 마음으로 기다리며, 메이커의 목표달성을 응원해주세요.

3. 메이커의 불가피한 사정으로 리워드 배송이 변경 또는 불가할 수 있어요. 

메이커는 약속한 리워드를 제공하기 위해 노력합니다. 하지만, 크라우드펀딩의 특성상 불가피한 사정으로 리워드 제공 일정이 변경될 수 있습니다. 

모든 프로젝트 페이지 하단에 '위험요인과 해결방안' 이 작성되어 있으니 펀딩에 참여하시기 전에 이 부분을 꼭 읽어보시고 참여하세요.  


Q. 왜 우리를 메이커라고 부르나요?

A. 메이커 : 자신의 아이디어를 실현하는 사람

메이커(Maker)의 사전적 의미는 상품을 만든 사람. '제작자'의 의미입니다.

최근에는 

"디지털 기기와 다양한 도구를 사용한 창의적인 만들기 활동을 통해 자신의 아이디어를 실현하는 사람으로서 함께 만드는 활동에 적극적으로 참여하고, 만든 결과물과 지식, 경험을 공유하는 사람들"이라는 의미로 사용되고 있습니다 :)

와디즈에서는 메이커가 펀딩을 통해 자신의 아이디어를 세상에 소개하고 모집된 자금으로 실제로 제작하여 제공하는 역할을 하고 있습니다.


Q. 목표금액은 왜 설정하는 건가요?

A. 프로젝트를 통해 모으고자 하는 금액이 얼마인가요?

'목표금액'은 프로젝트를 통해 모으고자 하는 금액입니다.

크라우드펀딩이란 프로젝트를 통해 얼만큼의 자금을 모을 계획인지 목표를 세우고

프로젝트가 진행되는 기간동안 집중 홍보하여 서포터들의 지지와 펀딩을 통해 목표 금액을 달성하는 형태입니다.

목표금액 설정 TIP!

목표금액을 설정하실 때에는 프로젝트 기간과 리워드 금액, 수수료 등 고려하여 목표금액을 설정해 주세요. 실제로 필요하신 금액보다는 낮게 설정하여 높은 펀딩율로 관심을 이끄는 것이 프로젝트 기간동안 운영하는 것이 유리합니다.


Q. 와디즈 수수료 체계는 어떻게 되나요?

A. 수수료 Type을 선택하실 수 있습니다.

리워드형 프로젝트 개설 시 와디즈 중개수수료는 Type에 따라 다르게 발생합니다 :)

Type별 자세한 수수료는 아래 링크를 클릭하시면 자세히 확인하실 수 있습니다.

수수료는 프로젝트 모집 신청 시 선택해주시면 됩니다.

아래의 링크로 와디즈 리워드 서비스 운영정책 https://www.wadiz.kr/web/wterms/reward 로 링크연결된다.

리워드 프로젝트 수수료 정책


Q. 왜 결제 예약 방식을 사용하나요?

A. 프로젝트가 실패한 경우 결제가 이루어지지 않습니다.

모집된 금액이 프로젝트 목표 금액의 100% 미만이면 '실패'로 자금을 받지 않는 형태입니다. 

프로젝트가 실패한 경우 서포터의 결제예약 상태는 취소되어 결제가 이루어지지 않게됩니다 :)

단, 

수수료 정책을 Type B로 선택하시는 경우, 목표금액 달성 여부와 관계없이 얼마가 모이든 모인만큼 자금을 받게 됩니다 :)


Q. 프로젝트 성공/실패의 기준은 무엇인가요?

A. 모집된 금액이 목표 금액 100% 달성 여부

모집된 금액이 프로젝트 목표 금액의 100% 미만이면 '실패'

모집된 금액이 프로젝트 목표 금액의 100% 이상 달성한 경우 '성공'입니다.

프로젝트 개설 시 선택하셨던 수수료 Type에 따라

Type A인 경우, 목표금액의 100% 이상 모금에 성공했을 때만 자금을 받게되고

Type B인 경우, 목표금액 달성 여부와 관계없이 얼마가 모이든 모인만큼 자금을 받게 됩니다 :)


Q. 와디즈 스쿨은 의무적으로 들어야하나요?

A. 스쿨에 참석하셔서 내 프로젝트를 더욱 빛나게 만들어보세요!

크라우드펀딩은 일반 판매와 형태가 다르고 생소한 분야이기 때문에 사전에 많은 공부와 준비 과정이 필요합니다. 와디즈에서는 '스쿨'을 통해 예비 메이커분들에게 프로젝트 운영 방법, 홍보 방법, 성공 사례들을 알려드리고 있습니다.

프로젝트를 성공적으로 진행하고 싶으시다면, 

스쿨 수강을 강하게 추천드립니다!

와디즈 스쿨은 기초강의와 심화강의 두 종류가 있습니다.

기초강의는 아직 프로젝트를 오픈하지 않은

프로젝트 개설에 관심이 있는 예비 메이커들을 대상으로 하는 강의입니다.

심화강의는 프로젝트 오픈 신청 후 심사에서 승인이 된 프로젝트 개설을 진행중인 메이커를 대상으로 하는 강의입니다.

스쿨에 참석하셔서 내 프로젝트를 더욱 빛나게 만들어보세요!


Q. 프로젝트 개설하기까지 얼마나 걸리나요?

A. 심사 5 영업일 + 피드백 반영 및 약정서 작성 과정을 거쳐야합니다.

프로젝트 내용(스토리)작성 후 [검토 요청하기]를 클릭하여 제출해주시면

심사가 진행되며 심사는 영업일 기준으로 5일 정도 소요됩니다.

심사에 대해 메일로 회신을 드리며,

심사 승인이 된 경우 담당자가 배정이 되어

스토리 내용 중 수정이 필요한 내용 피드백을 드리고 약정서 체결을 진행하게 됩니다.

이 과정에서 평균적으로 일주일 정도 소요가 되구요,

피드백이 빠르게 반영되거나 약정서를 빠르게 체결해주시면 

개설 일정이 조금 더 앞당겨질 수 있습니다.

즉, 영업일 기준 심사 5일 + 피드백 및 약정서 7일로

2주 정도로 예상하시면 됩니다.


Q. 프로젝트 내용(스토리)는 제가 다 작성해야하나요?

A. 메이커의 정성이 느껴지는 내용(스토리)를 작성해주세요.

프로젝트 내용(스토리)는 메이커가 직접 작성해주셔야 합니다.

스토리, 이미지, 동영상 등 와디즈가 작성을 하거나 제작해드리지는 않습니다.

프로젝트 내용 작성 후 [검토 요청하기]를 클릭하시면,

심사가 진행되며 심사 승인 후 담당 콘텐츠 디렉터가 배정이 됩니다.

콘텐츠 디렉터는 프로젝트 내용 중 수정이 필요한 내용에 대해 가이드와 피드백을 드립니다. 다만, 프로젝트의 전체적인 스토리나 이미지, 동영상 등을 제작해드리는 것이 아닌 프로젝트 진행 시 이슈가 발생하지 않도록 수정이 필요한 내용에 대해 안내드린다는 점을 참고해주세요.


Q. 와디즈에서 프로젝트 진행하려면 어느 정도 준비가 되어 있어야 하나요?

A. 시제품, 베타버전 정도의 리워드와 지속적인 관심을 쏟을 마음가짐이 필요합니다 :)

프로젝트 종료 후 약속한 배송일에 실제로 배송가능한지 여부를 확인하기 위해

제품이라면 시제품 / 어플 등의 소프트웨어는 베타버전 정도로 리워드가 준비되어 있는 상태에서 개설이 가능합니다 :)

리워드 외에도 프로젝트를 진행하면서

프로젝트를 홍보하고, 서포터들의 문의와 댓글에 대해 응대하는 등의 지속적인 관심을 쏟을 수 있는 시간과 마음가짐이 준비되어 있어야합니다 :)


Q. 저희 제품(서비스)가 리워드로 가능할까요?

A. 프로젝트 심사 기준을 확인해보세요.

와디즈 프로젝트는 다음의 내용을 검토 후 오픈을 승인합니다.  

1. 프로젝트의 목적 및 범위

- 공공의 가치를 훼손하지 않는 프로젝트이어야 합니다.

- 제품/문화컨텐츠/공익나눔 중 하나 이상의 카테고리에 부합해야 합니다.

- 실제 구현이 가능한 프로젝트여야 합니다.

2. 명확한 자금 사용 계획 

- 크라우드펀딩으로 자금을 모금하는 목적을 분명하게 밝혀야 합니다.

- 펀딩 모금액의 사용계획에 대해 누가, 언제, 어디서, 어떻게 사용할 것인지 구체적으로 밝혀야 합니다. 

3. 프로젝트 및 메이커의 신뢰성 

- 프로젝트 스토리에는 사실 여부를 밝힐 수 있는 분명한 정보만 작성해야 합니다. 

- 프로젝트 진행중 제품의 디자인, Spec이 변경 될 수 있다면 이에 대해 사전에 스토리에 밝혀야 합니다.

- 프로젝트 메이커는 사진과 함께 이름, 소속을 밝히며 본인이 누구인지에 대해 설명해야 합니다.  - 프로젝트 메이커는 보상품 제작, 발송뿐만 아니라 프로젝트 진행기간 동안 서포터에게 진심을 다해 응대하고, 프로젝트를 홍보할 수 있는 시간과 의지가 있는 분이어야 합니다. 

4. 보상품(리워드) 제공 가능성 

- 프로젝트 메이커는 서포터에게 반드시 펀딩 금액에 합당한 보상품(리워드)을 제공해야 합니다. 

- 단순히 브랜드, 상품, 행사 정보 등이 나열된 형태인 경우 등록을 제한합니다.

- 보상품(리워드)의 종류에 따라 추가서류를 요청할 수 있으며, 요청한 자료가 증빙되지 않을 경우 오픈이 불가할 수 있습니다. 

- 보상품(리워드)은 프로젝트 종료일 기준 7일 이후~3개월 이내에 제공할 것을 권장합니다.

5. 프로젝트 유형별 확인 사항

- 공연, 행사 프로젝트를 진행할 경우 공연, 행사에 대한 정확한 정보 (장소, 공연자)를 밝혀야 합니다.

- 출판 프로젝트의 경우 원고 작성이 완료된 상태에서 출판일정이 확정되어야 프로젝트 오픈이 가능합니다.

- 제품 프로젝트의 경우 시제품이 있어야 하며, 서포터가 어떤 제품인지 인지할 수 있는 형태의 이미지를 공개해야 합니다. 

- 웹사이트 또는 어플리케이션 제작이 필요한 프로젝트는 최소 프로토타입 형태의 개발이 완료된 상태에서만 진행이 가능합니다.  

6. 기타

- 펀딩 기간은 시작일로부터 30일 내외를 권장하며 60일을 넘겨서는 안됩니다. 

- 프로젝트 진행 중에는 기간을 변경할 수 없습니다. 

- 펀딩 목표 금액은 50만원 이상, 1억원 이하를 권장합니다.

 아래에 해당하는 스토리 내용은 삭제 후 오픈이 가능합니다. 

- 소수자 차별 및 타인의 인권을 침해하는 내용이 포함된 경우

- 특정 국적/인종/종교/민족/성별/장애 등을 비방하거나, 개인정보 유출, 타인에 대한 욕설이나 인신공격 등이 해당

- 정치적, 종교적, 성적 편향성을 띄는 내용이 포함된 경우

- 비속어, 욕설 등 불쾌감을 줄 수 있는 내용을 포함한 경우

- 지적 재산권을 위반한 경우

- 이용자로 하여금 불법적인 행위를 조장하는 내용이 포함된 경우

- 음란하거나 선정적인 내용이 포함된 경우

  아래에 해당하는 프로젝트는 오픈이 불가합니다.

- 타인의 명예를 손상시키거나 불이익을 주려는 목적의 프로젝트

- 범죄적 행위, 국익 또는 사회적 공익을 저해하려는 목적의 프로젝트

- 정치적, 종교적, 성적 편향성 등을 띄는 소재의 경우

- 관계법령에 위배되거나 사회의 질서 혹은 미풍양속을 저해하려는 목적을 가진 경우

- 리워드로 제공할 계획인 제품이 타 크라우드펀딩사, 자사홈페이지를 포함하여 외부에서 유통중인 경우

- 기타 와디즈가 정한 프로젝트 조건에 부적합한 경우

- 프로젝트의 완성도가 떨어지거나 가독성이 떨어지는 경우

- 와디즈 스토리 가이드에 맞지 않은 컨텐츠로 작성된 경우


Q. 개인도 크라우드펀딩을 통해 자금을 모을 수 있나요?

A. 개인 / 개인사업자 / 법인 모두 프로젝트 개설이 가능합니다.

네 :)

사업자가 없는 개인도 리워드형 프로젝트 개설이 가능합니다.

다만, 펀딩으로 모집된 금액에 대한 세금 처리방법은 미리 확인 후 진행하시는 것을 추천드립니다.

세금 관련 내용은 세무서나 국세청에서 확인해주세요!


Q. 품목 제조 보고서가 무엇인가요?

A. 식품을 리워드로 계획 중인 메이커분이시라면, 품목제조보고서를 제출해주셔야합니다.

프로젝트 개설을 위해서 열심히 스토리를 작성하여 검토요청을 해주신 후에, 저희 심사팀에서 피드백을 드리는 경우가 있습니다.

그 중 리워드가 식품이라면 '품목제조 보고서' 또는 '시험 성적서' 등을 제출해달라고 요청드리는 경우가 있습니다.

쉽게 설명드리자면 음식이 어떤 재료로,  어떤 방식으로 제조되는지 해당 관청(시/구청) 위생 관련 부서에 신고하시는 서류입니다.

농산물, 가공식품 등으로 리워드를 준비 중인 메이커이시라면 관련 기관(식약처, 시청 등)에 필수적으로 인허가, 신고를 해야하는 사항을 챙기시어서 심사 과정 중 저희가 관련 증빙서류를 요청드렸을 때 이메일로 회신하여 증명해주시면 됩니다.

필요한 증빙서류에 대해서는 식품의약품안전처 통합민원상담서비스, 해당 관청을 통해서 확인해주시길 부탁드립니다 :)

▶ 식품의약처안전처 통합민원상담서비스

▶ 식품안전나라


Q. 스토리 작성시 최적화 이미지 사이즈는 어떻게 되나요?

A. 이미지 파일이 깨져서 보이나요? 이 글을 읽어주세요!

대표이미지

프로젝트가 소개되는 모든 화면에 (와디즈 사이트의 프로젝트 리스트, Facebook 지지서명 시, 카카오톡으로 프로젝트 링크 공유 시) 노출되는 프로젝트의 첫 얼굴입니다.

리워드가 잘 드러나는 고화질의 사진이나, 프로젝트의 성격이 한눈에 드러나는 사진이 좋습니다. (용량 1MB 미만)

하단 150px 영역에는 위의 예시와 같이 상태바가 삽입되기 때문에 텍스트나 로고가 삽입되지 않은 이미지를 사용해 주셔야 합니다.

대표 이미지는 프로젝트 오픈 후에도 계속 변경이 가능합니다.

1~2주에 한 번 변화를 주시는 것도 좋겠죠?

스토리 내에 삽입되는 이미지는 가로 630 * 세로 1000 픽셀 사이즈에 맞게 올려주세요. (jpg, jpeg, gif, png형식)

    ※ 해당 사이즈 초과 시, 모바일에서 깨져서 노출된답니다.


Q. 프로젝트에 있는 내용을 수정/삭제하려면 어떻게 해야하나요?

A. 프로젝트가 공개된 이후에도 스토리를 수정하실 수 있습니다.

프로젝트가 공개된 이후에도 스토리를 수정하실 수 있습니다. 

진행 중간 업데이트되는 소식을 스토리에 반영하여 프로젝트가 현재진행형이라는 생동감을 불어넣어 주세요.

수정을 원하시면, 개설한 아이디로 로그인 후

마이페이지에서 [만든 프로젝트] > [수정]을 클릭해주세요.

* 프로젝트 공개 이후 수정할 수 있는 것은 아래와 같습니다.

- 프로젝트 스토리

- 비디오와 커버 이미지

* 수정할 수 없는 것은 아래와 같습니다.

- 수수료 

- 프로젝트 종료일 

- 리워드 ( 담당 매니저와 협의하여 추가 가능, 공개 이후에도 참여자가 없는 것은 협의 하에 수정 가능)

- 목표금액


Q. 프로젝트 심사 전 미팅을 하고 싶습니다.

A. 먼저 온라인 신청서를 작성해주세요!

프로젝트 개설 전 어떤 방식으로 진행을 해야할 지 고민이 많으신가요?

신청서를 통해 먼저 메이커와 리워드 제품에 대해 상세히 확인 후 안내를 드리는 것이 효율적이기 때문에, 먼저 [펀딩모집 신청하기]를 통해 신청서를 접수해주시면 감사하겠습니다. 

신청서 확인 후 메일로 회신을 드리니, 메일을 확인해주세요 :)

혹은, 크라우드펀딩에 대한 전반적인 설명이 필요하시다면,

와디즈에서 진행하고 있는 와디즈 스쿨에 참석해보세요 :)

기본강의를 듣고 나면, 크라우드 펀딩 전문가가 되어 있을꺼에요!

프로젝트 개설 전인 경우에는 '리워드 기본교육'을 수강하시면 됩니다.


Q. 약정서 작성 시 어떤 서류가 필요하나요?

A. 개인 / 개인사업자 / 법인사업자에 따라 필요한 서류를 확인해주세요.

약정서 작성 시 개인 / 개인사업자 / 법인사업자에 따라 필요한 서류가 다릅니다.

- 개인 : 본인 명의의 계좌 사본

- 개인사업자 : 사업자등록증, 사업자(대표)명의의 계좌 사본

- 법인사업자 : 사업자등록증, 사업자 명의의 계좌 사본


Q. 약정서 작성 후 사업자가 변경되었을 경우에는 약정서를 다시 작성해야하나요?

A. 변경된 사업자로 다시 약정서를 작성해야합니다.

네, 사업자가 변경되었다면 약정서를 다시 작성해야합니다.

와디즈 담당자에게 변경된 내용을 말씀해주시면, 새 약정서를 전달드리겠습니다!

약정서를 다시 작성하지 않는 경우, 정산 시 문제가 발생할 수 있으니

담당자에게 미리 말씀해주세요 :)


Q. '오픈예정'에 제 프로젝트도 올리고 싶습니다. 어떻게 해야하나요?

A. 오픈 전 프로젝트를 효과적으로 홍보하고 싶어요.

'오픈예정'에 신청한 서포터에게는 프로젝트 오픈 시에 SMS로 오픈 알림발송되어,

프로젝트 오픈 직후 초기 서포터 모집에 도움이 됩니다.

'오픈 예정'에 프로젝트를 올리시기 위해서는 3%의 추가 중개수수료가 부과되며,

'오픈예정'에 신청한 서포터의 리스트는 메이커에게 전달드리지 않는다는 점을 참고해주세요.

오픈 예정 페이지에 프로젝트를 올리기 원하신다면, 

와디즈 담당자에게 말씀해주시면 안내도와드리겠습니다 :)


Q. '오픈예정'에 신청한 서포터 명단을 받을 수 있을까요?

A. '오픈예정' 명단은 공개할 수 없습니다.

'오픈예정'은 추후 프로젝트 오픈 시에 알림을 받기 위한 서비스로,

아직 프로젝트에 참여하지 않은 상태이기때문에

'오픈예정'에 신청한 서포터 명단을 메이커분에게 공개할 수 없다는 점 양해부탁드립니다 :)


Q. 프로젝트는 언제 오픈하는 게 제일 좋은가요?

A. 평일 오전9시~오후6시 사이에 오픈해주세요.

접속자가 많은 시간대에 오픈을 하시는 편이 오픈 직후 펀딩율을 높이는데 도움이 됩니다 :)

와디즈는 워킹타임 (평일 9시~6시)에 접속자가 많은 편이며

혹시 오픈 후에 발생할 수 있는 문제에 와디즈에서 즉각적으로 대응할 수 있도록 워킹타임 중에 오픈하시는 것을 권장드립니다.


Q. 프로젝트 오픈 후 내용을 수정/삭제할 수 있나요?

A. 스토리는 수정할 수 있지만, 수정불가한 항목을 확인해주세요!

프로젝트 오픈 후에 프로젝트 스토리와 커버 이미지, 비디오는 수정할 수 있습니다.

하지만,

프로젝트 종료일 / 목표금액 / 리워드 가격 / 리워드 상세설명 / 리워드 제공예상일 / 위험요인과 해결방안 / 수수료는 변경하실 수 없으니 오픈 전 마지막으로 꼼꼼히 체크해주세요.

추가 이벤트나 배송 지연 등 서포터에게 안내하고 싶은 내용이 있다면, [새소식]란을 이용해주세요. 

[새소식]에 글을 작성하면 서포터에게 해당 글이 메일로 발송됩니다.


Q. 새소식은 언제 쓰는건가요?

A. 새소식 활용 방법 안내

새소식은 서포터와 소통하는 창구이자, 신뢰를 만드는 공간일 뿐 아니라, 

펀딩에 참여해주신 분들께 (Facebook으로 응원해주신 분들 포함) 이메일로 알림이 가기 때문에 프로젝트 진행상황을 공유하며 메이커님의 열정을 보여줄 수 있습니다. 

  ① 펀딩 달성률 안내 ex) 코드잇

  ② 서포터분들이 궁금해하는 질문에 대한 답변 ex) 톤28

  ③ 프로젝트 비하인드 스토리 ex)와치피

  ④ 이벤트 진행 / 결과 알림 ex) 상뗄 팔찌

  ⑤ 제작 과정 소개 ex) 코르크

  ⑥ 감사의 인사 ex) 세월호 폰케이스

  ⑦ 종료 안내 ex) 딜라잇 톡스

  ⑧ 배송 진행 상황 ex) 여행배낭 엠비치오넴

  ⑨ 후원 현황 보고 ex) 페미니스트 맨투맨

  ⑩ 펀딩 종료 이후의 소식들 ex) 같이 걸을까 

 이 외에도, 새소식을 꾸준히 올려 많은 인기를 얻은 세 팀을 소개할게요. 

- 포밍보글 : https://www.wadiz.kr/web/campaign/detailPost/3822

- 오피스 멀티데스크 : https://www.wadiz.kr/web/campaign/detailPost/11288

- 홍군아떡볶이 : https://www.wadiz.kr/web/campaign/detailPost/11639


Q. 프로젝트가 100% 이상 모금되어 성공하였습니다. 종료 후 프로세스를 알려주세요.

A. 성공한 프로젝트의 종료 후 프로세스를 안내드립니다.

우선 프로젝트 성공을 진심으로 축하드립니다 :)

프로젝트 종료 후 바로 아래 사항을 진행해주시길 부탁드립니다.

1. 스토리 상단에 아래 내용을 포함하여 [종료 및 배송안내]를 작성해주세요.

- 종료 및 결제 예정일

- 리워드 발송 예정일

- 리워드 관련 문의처(메이커 담당자 이름/이메일/전화번호)

- 지속적인 업데이트 약속 멘트

2. 서포터에게 문자를 발송해주세요.

- 프로젝트 성공 시, 종료일 다음 영업일 오후 5시에 1차 결제를 실행합니다.

- 메일과 새소식을 잘 확인하지 않는 서포터들을 위해 따로 문자를 발송해주세요.

- 문자 내용에는 [프로젝트 종료 안내] [감사 인사] [결제예정일 안내] [리워드 제공일 안내(배송계획)] 등을 포함해주세요.

- 참고: 1차 결제에 실패한 서포터는 결제 실패했다는 문자(SMS)를 받게 됩니다. 1차 결제일로부터 3 영업일(오후 5시마다) 동안 재결제를 시도하게 됩니다.

3. 결제 기간이 종료된 후 최종 참여자 명단을 확인해주세요.

- 최종 결제가 완료된 이후 최종 참여자 명단을 확인 후 리워드를 제공해주세요.

- 명단 확인 방법: 와디즈 홈페이지에서 로그인 후> 오른쪽 상단 동그라미 프로필 사진을 클릭> 개설한 프로젝트 클릭> 관리자 화면 클릭> 펀딩 참여자 정보 다운로드 받기(명단이 안보일 경후 하단에 동의 버튼 클릭)

4. 와디즈에서 발송한 정산내역서를 확인하신 후, 요청한 정산서류로 등기를 발송해주세요. 

- 정산담당자가 확인 후 정산금액을 입금해드립니다.

- 어떤 서류가 필요한지 궁금하시다면 여기를 클릭해주세요.

- 자세한 내용은 리워드 운영정책페이지를 참고해주세요.


Q. 정산을 받으려면 어떤 서류가 필요한가요?

A. 개인/개인사업자/법인사업자별로 준비하셔야하는 서류를 안내드립니다.

프로젝트 종료 후에는 펀딩금액 결제, 정산, 리워드 배송의 과정을 거치게 됩니다.

프로젝트 종료일 기준 10~15영업일 내 정산이 진행됩니다.

- 프로젝트 종료일 기준 10 영업일(통상적으로는 영업일 기준 5일) 내에 정산내역서를 메이커의 이메일로 보내드립니다. 정산금입금요청서와 아래의 첨부서류를 등기로 발송해주시면 정산담당자가 확인 후 10 영업일(통상적으로는 영업일 기준 5일) 안에 정산금을 입금해드립니다. 정산금은 매주 화/목요일만 입금이 가능합니다.

- 개인인 경우: 정산금입금요청서, 인감증명서 또는 본인서명사실확인서

- 개인사업자인 경우: 정산금입금요청서, 대표이사의 인감증명서

- 법인사업자인 경우: 정산금입금요청서, 법인인감증명서, 법인등기부등본

모든 서류는 3개월 이내의 원본이어야 합니다. 사본인 경우 다시 서류를 준비해서 등기로 보내주셔야 합니다.

[자주 묻는 질문]

Q. 정산금입금요청서는 무엇인가요?

A. 정산내역서를 발송시 첨부해서 보내드리는 정산서류 양식이라고 생각하시면 됩니다. 작성방법은 정산내역서를 발송해드리는 이메일 내에 설명드리고 있습니다.

Q. 정산 관련 서류는 이메일로 보내도 되나요?

A. 아니요. 정산 관련 서류는 모두 3개월 이내의 원본서류로 등기발송해주셔야 합니다.

Q. 인감증명서는 어떻게 발급받나요? 없으면 어떻게 하나요?

A. 인감증명서는 민원24 또는 관할 지역기관(시군구/읍면동)에 방문하여 발급받으실 수 있습니다. 개인/개인사업자가 인감증명서가 없는 경우에는 정산금입금요청서 인감란에 등록한 서명을 하시고 본인서명사실확인서를 제출해주시면 되며, 법인사업자는 반드시 법인인감날인만 가능하고 대표자의 서명은 인정되지 않습니다.

Q. 법인인데 지점이라 법인인감이 없는데 어떡하죠?

A. 지점의 사용인감을 날인하고, 사용인감계(본점의 법인인감이 날인된)를 제출하시면 됩니다. 이 때, 본점 및 지점의 사업자등록증 사본, 본점의 법인인감증명서,법인 등기부등본, 법인인감이 날인된 사용인감계를 제출해주셔야 합니다.


Q. 정산은 언제, 어떻게 진행되나요?

A. 일반적으로 프로젝트 종료일 기준 10~15 영업일 내에 정산이 이루어집니다.

프로젝트 종료일 기준 10~15영업일 내 정산이 진행됩니다.

1. 프로젝트 종료일 기준 10 영업일(통상적으로는 영업일 기준 5일) 내에 정산내역서를 메이커의 이메일로 보내드립니다.

2.정산금입금요청서와 서류를 등기 와디즈로 발송해주세요. 

- 주소: 경기도 성남시 분당구 판교로 242 (삼평동) 판교디지털센터 A동 4층 402호 와디즈 정산담당자 앞

3.정산담당자가 미비사항이 있는지 확인 후 10 영업일(통상적으로는 영업일 기준 5일) 안에 정산금을 입금해드립니다. 정산금은 매주 화/목요일만 입금이 가능합니다.

정산에 필요한 서류가 궁금하시다면 여기를 클릭해주세요.


Q. 펀딩금액에 대해서도 세금을 납부해야 하나요?

A. 세무서나 국세청에 문의하셔서 확인해주세요.

펀딩금을 지급받으신 후  법인세법, 소득세법, 부가가치세법 등 관계법령에 따라 세금 신고 및 납부를 하셔야합니다.

메이커의 형태(개인/ 개인사업자/ 법인사업자)와 프로젝트의 성격(공익성, 제품 판매 등)에 따라 다르게 적용되어지기 때문에, 와디즈에서 정확한 가이드를 드리기는 어렵습니다.

세무서나 국세청에 문의하셔서 확인해주시길 부탁드립니다 :)


Q. 와디즈에 세금계산서를 발행해야하나요?

A. 와디즈에 세금계산서를 발행하는 것이 아닙니다.

모집된 금액에서 와디즈 중개수수료와 카드PG사 수수료(3.3% vat포함)를 제외한 금액을 정산합니다.

정산받은 금액에 대해서는 와디즈의 매출이 아니기 때문에 와디즈로 세금계산서를 발행하실 필요가 없습니다. 

와디즈에서 메이커님께 중개수수료에 대한 세금계산서를 발행해드리고 있습니다.

메이커의 형태 (개인/ 개인사업자/ 법인) 등에 따라 세금의 내용이 달라질 수 있으므로, 매출 신고에 대해서는 세무서나 국세청에 문의해주시길 부탁드립니다 :)


Q. 서포터가 환불요청을 하면 어떻게 해야하나요?

A. 종료 후에는 환불이 불가하다는 점을 친절하게 설명해주세요 :)

크라우드펀딩으로 모인 자금으로 메이커가 제작 및 배송을 시작하기 때문에

마감일 이후에는 환불이 불가하다는 점을 서포터에게 부드럽게 설명해주세요 :)

하지만, 메이커가 작성한 프로젝트 위험 요인과 해결 방안에 따라,

약속된 배송일보다 일정 기간 이상 배송이 지연되는 경우

서포터가 펀딩한 금액의 100%를 계좌로 환불하여야 합니다.



SiteMap

https://www.wadiz.kr/

https://www.wadiz.kr/web/wmain - 와디즈 캐스트

https://www.wadiz.kr/web/winvest/main - 투자

https://www.wadiz.kr/web/wreward/main - 리워드

https://www.wadiz.kr/web/wcomingsoon/main - 오픈예정

https://www.wadiz.kr/web/wcomingsoon/rwd

https://www.wadiz.kr/web/wcomingsoon/ivt

https://www.wadiz.kr/web/wcast/main - 와디즈 캐스트

https://www.wadiz.kr/web/wcast/detail

https://www.wadiz.kr/web/wcast/list

https://www.wadiz.kr/web/wcast/list/BRD0000011

https://www.wadiz.kr/web/wcast/list/BRD0000012

https://www.wadiz.kr/web/wcast/list/BRD0000013

https://www.wadiz.kr/web/fthelpCenter - 이용가이드

https://www.wadiz.kr/web/wsub/makeproject - 펀딩모집 신청하기

https://www.wadiz.kr/web/wsub/wadizstory - 와디즈 이야기

https://www.wadiz.kr/web/wsub/makerQuiz - 리워드? 투자?

https://www.wadiz.kr/web/wsub/makeproject#startWithWadiz - 신청 절차 알아보기

https://www.wadiz.kr/web/wsub/successstory - 성공 프로젝트

https://www.wadiz.kr/web/waccount/wAccountLogin

https://www.wadiz.kr/web/waccount/wAccountRegistIntro

https://www.wadiz.kr/web/school/main - 와디즈 스쿨

https://www.wadiz.kr/web/wterms/reward - 수수료 안내

https://www.wadiz.kr/web/wpage/juror - 와디즈 배심원

https://www.wadiz.kr/web/wcampaign/search - 프로젝트 검색하기

https://www.wadiz.kr/web/campaign/detail

https://www.wadiz.kr/web/campaign/detail/qa

https://www.wadiz.kr/web/campaign/detailPost

https://www.wadiz.kr/web/campaign/detailBacker

https://www.wadiz.kr/web/ftcampaign/detail/

https://www.wadiz.kr/web/wpartner/main - 와디즈 바트너

https://www.wadiz.kr/web/wboard/newsBoardList - 공지사항

https://www.wadiz.kr/web/wboard/newsBoardList/1

https://www.wadiz.kr/web/wboard/newsBoardList/2 - 이벤트

https://www.wadiz.kr/web/wboard/newsBoardList/3 - 채용

https://www.wadiz.kr/web/wboard/newsBoardList/4

https://www.wadiz.kr/web/wboard/csBoardList - 문의하기

https://www.wadiz.kr/web/wboard/csBoardRegist


404ErrorPage


'Legend 개발자 > 기업' 카테고리의 다른 글

LG 스마트 팩토리  (0) 2017.12.05
매트릭스투비  (0) 2017.11.16
Posted by 전설의아이
|

JSP책

Legend 개발자/JSP책 2017. 9. 14. 14:43

Code

Function 

Explain

<%= new java.util.Date() %> 

Sun Ar 26 21:51:13 KST 2015

현재 시간을 출력해준다. 

<%@ page %>

page directive

JSP 페이지에 대한 정보를 설정할때 사용한다.

<%@ page import="java.util.Calendar" %>

<% calendar cal = Calendar.getInstance(); %>

<%= cal.get(Calendar.YEAR) %>

<%= cal.get(Calendar.MONTH) %>

<%= cal.get(Calendar.DATE) %>

import java.util.Calendar

declare calendar

call year

call month

call date

java.util.Calendar을 import해서 선언을 한 후 년, 월, 일을 출력한다.

<%@ page trimDirectiveWhitespaces="true"%>

trim spaces

브라우저에서 소스코드를 볼 때 공백을 제거해준다.

<%@ page contentType="text/html:charset=euc-kr" %>

<%@ page pageEncoding="utf-8" %>

JSP written by UTF-8

response EUC-KR

JSP 파일은 UTF-8로 작성하고 응답 결과는 EUC-KR로 생성할 경우

<%

  int sum = 0;

  for( int i = 1 ; i<=10 ; i++ ){

    sum = sum + i;

  }

%>

<%= sum %>

<%

sum= 1+2+3+4+5+6+7+8+9+10

%>

<%= sum=55; %>

1부터 10까지의 합을 구한다.

<%= 1+2+3+4+5+6+7+8+9+10 %>

<%= 55 %>

숫자나 무자열 등의 값을 표현식에서 사용할 수도 있다.

<%= request.getRemoteAddr() %>

0:0:0:0:0:0:0:1

클라이언트IP

<%= request.ContentLength() %>

-1

요청정보길이

<%= request.getCharacterEncoding() %>

null

요청정보 인코딩

<%= request.getContentType() %>

null

요청정보 컨텐츠타입

<%= request.getProtocol() %>

HTTP/1.1

요청정보 프로토콜

<%= request.Method() %>

GET

요정정보 전송방식

<%= request.getRequestURI() %>

/chap03/requestInfo.jsp

요청 URI

<%= request.getContextPath() %>

/chap03

컨텍스트 경로

<%= request.getServerName() %>

localhost

서버이름

<%= request.getServerPort() %>

8080

서버포트

<%= request.getParameter("name") %>

name

name파라미터를 호출한다. 

<%

  String[] values =             

  request.getParameterValues("pet");

  if ( values != null) {

    for( int i = 0 ; i < values.length ; i++) {

%>

  <%= values[i] %>

<%

    }

  }

%>

String[] values

 request.getParameterValues() 메서드는 이름이 pet인 파라미터의 값 목록을 배열로 (Sring[]) 리턴한다. 배열 변수 이름을 values로 지정했으므로, values[0], values[2]와 같은 형식으로 파라미터 값에 접근한다.

<%

  Enumeration paramEnum = request.getParameterNames();

  while(paramEnum.hasMoreElements()) {

    String name = (String)paramEnum.nextElement();

%>

  <%= name %>

<%

  }

%>

name, adress, pet

 파라미터 이름을 출력한다. 이 코드가 request.getParameterNames()메서드를 사용하는 기본형태이다.

<%

  Map parameterMap = request. getParameterMap();

  String[] nameParam = (String[])parameterMap.get("name");

  if(nameParam != null) {

%>

  <%= nameParam[0] %>

<%

  }

%>

 

 request.getParameterMap()은 자바의 Map을 사용하여 파라미터 이름과 파라미터 값을 리턴한다. 이 Map에는 <파라미터 이름, 파라미터 값 배열> 이 쌍을 이루고 있다.

<% 

Enumeration headerEnum = request.getHeaderNames();

while(headerEnum.hasMoreElements()){

  String headerName = (String)headerEnum.nextElement();

  String headerValue = request.getHeader(headerName);

%>

  <%= headerName %> = <%= headerValue%> <br>

<% 

  }

%>

 

HTTP 프로토콜 헤더 정보에 있는 부가정보인 host, user-agent, accept, accept-language, accept-encoding, cookie, connection 등을 호출한다.

<%

  response.setHeader("Cache-Control", "no-cache");

  response.addHeader("Cache-Control, "no-store");

  response.setHeader("Pragma", "No-cache");

  response.setDateHeader("Expires", IL);

%>

최근 웹 브라우저는 HTTP 1.1 버전을 지원하기 때문에 Cache-Control 응답 헤더의 값을 "no-cache"로 지정하면 응답 결과를 웹 브라우저가 캐시에 보관하지 않도록 설정할 수 있다. 하지만, HTTP 1.0 버전만 지원하는 웹 브라우저가 존재할 수 있기 때문에 코드와 같이 Cache-Control 응답 헤더와 Pragma 응답 헤더를 모두 설정해주는 것이 좋다.

<%@ page "pageEncoding=utf-8"%>

<%@ page import = "java.net.URLEncoder"%>

<%

    String value ="자바";

   String encodedValue = URLEncoder.encode("value,""utf-8");

    response.sendRedirect("/chap03/index.jsp?name=" + encodedValue);

%>

java.net.URLEncoder 클래스 내에 있는 URLEncoder.encode() 메서드를 사용하면 파라미터 값으로 사용될 문자열을 지정한 캐릭터 셋으로 인코딩할 수 있다.

<%@ page buffer="1kb" autoFlush="true" %>

<%@ page buffer="8kb" autoFlush="false" %>

JSP에서 실행되는 것이 버퍼에 차는데 buffer로 용량을 설정할 수 있다. autoFLush가 true일 경우 buffer의 용량이 꽉차면 비우는데 false로 지정할 경우 에러가 발생한다.

<%= request.getContextPath() %>

/chap04

request.getContextPath() 메서드를 사용하면 JSP가 포함된 웹 어플리케이션의 컨텍스트 경로를 구할 수 있다.

   
   
   
   
   
   
   


About Error

Error

Explain

HTTP Status 500 - Unable to compil class for JSP 

소스 코드 자체에 오타가 있는 경우 출력되는 메시지 

HTTP Status 500 - An exception occured processing JSP page /?? at line ??

autoFlush속성이 false이면서 버퍼가 다 찰 경우 발생하는 에러














JSP를 배운다는 것은 아래를 배우는 것과 같다.

- 디렉티브(Directive)

<%@ 디렉티브이름 속성1="값1" 속성2="값2" ... %>

Ex:) <%@ page contentType="text/html; charset=utf-8" %>

여기서 디렉티브이름은 page가 되고, contentType이라는 속성을 사용했으며, contentType 속성의 값은 "text/html; charset=utf-8"이 된다.

JSP가 제공하는 디렉티브

디렉티브 

설명 

page

JSP 페이지에 대한 정보를 지정한다. JSP가 생성하는 문서의 타입, 출력 버퍼의 크기, 에러 페이지 등 JSP 페이지에서 필요로 하는 정보를 설정한다.

taglib

JSP 페이지에서 사용할 태그 라이브러리를 지정한다.

include

JSP 페이지의 특정 영역에 다른 문서를 포함시킨다. 


- 스크립트 : 스크립트릿(Scriptlet), 표현식(Expression), 선언부(Declaration)

JSP에서 문서의 내용을 동적으로 생성하기 위해 사용되는 것이 스크립트 요소이다.

 스크립트 요소를 사용하면 사용자가 폼에 입력한 정보를 데이터베이스에 저장할 수 있으며, 데이터베이스로부터 게시글 목록을 읽어와 출력할 수도 있다. 또한 스크립트를 사용하면 자바가 제공하는 다양한 기능도 사용할 수 있다.

JSP의 스크립트 요소는 다음과 같이 세 가지가 있다.

표현식(Expression)

값을 출력한다. 

스크립트릿(Scriptlet)

자바 코드를 실행한다. 

선언부(Declaration)

자바 메서드(함수)를 만든다.


- 표현 언어(Expression Language)

JSP의 스크립트 요소(스크립트릿과 표현식 그리고 선언부)는 자바 문법을 그대로 사용할 수 있기 때문에, 자바 언어의 특징을 그대로 사용할 수 있다는 장점이 있다.

표현 언어는 '${' 와 '}' 사이에 정해진 문법을 따르는 식(expression; 값을 생성하는 코드) 을 입력한다. 

JSP는 ${ }식을 분석해서 알맞은 기능을 실행한다. 


- 기본 객체(Implicit Object)

JSP는 웹 어플리케이션 프로그래밍을 하는 데 필요한 기능을 제공해주는 '기본 객체(implicit object)를 제공하고 있다. request, response, session, application, page 등 다수의 기본 객체가 존재하는데, 이들은 각각 요청 파라미터 읽어오기, 응답 결과 전송하기, 세션 처리하기, 웹 어플리케이션 정보 읽어오기 등의 기능을 제공하고 있다.


- 정적인 데이터


- 표준 액션 태그(Action Tag)

액션 태그는 JSP 페이지에서 특별한 기능을 제공한다. <jsp:액션태그이름> 의 형태를 띠며 액션 태그 종류에 따라서 서로 다른 속성과 값을 갖는다.

<jsp:include>태그는 특정한 페이지의 실행 결과를 현재 위치에 포함시킬 때 사용한다.


- 커스텀 태그(Custom Tag)

커스텀 태그는 JSP를 확장시켜주는 기능으로서, 액션 태그와 마찬가지로 태그 형태로 기능을 제공한다. 

액션 태그와의 차이점은 커스텀 태그는 개발자가 직접 개발해주어야 한다는 것이다. 일반적으로 JSP 코드에서 중복되는 것을 모듈화하거나 스크립트 코드를 사용할 때 발생하는 소스 코드의 복잡함을 없애기 위해 커스텀 태그를 사용한다.


- 표준 태그 라이브러리(JSTL)

커스텀 태그 중에서 자주 사용하는 것들을 별도로 표준화한 태그 라이브러리를 JSTL(JavaServer Pages Standard Tag Library)라고 한다. JSTL은 if-else 조건문 그리고 for 구문과 같은 반복 처리를 커스텀 태그를 이용해서 구현할 수 있도록 해 준다.


page 디렉티브

page 디렉티브는 JSP 페이지에 대한 정보를 입력하기 위해서 사용된다.

page 디렉티브를 사용하면 JSP 페이지가 어떤 문서를 생성하는지, 어떤 자바 클래스를 사용하는지, 세션(session)에 참여하는지, 출력 버퍼의 존재 여부와 같이 JSP 페이지를 실행하는데 필요한 정보를 입력할 수 있다.

- page 디렉티브의 주요 속성

속성 

설명

기본값

contentType

JSP가 생성할 문서의 MIME 타입과 캐릭터 인코딩을 지정한다. 

text/html 

import 

JSP 페이지에서 사용할 자바 클래스를 지정한다. 

 

session 

JSP 페이지가 세션을 사용할지의 여부를 지정한다."true"일 경우 세션을 사용하고 "false"일 경우 세션을 사용하지 않는다 

true 

buffer 

JSP 페이지의 출력 버퍼 크기를 지정한다. "none"일 경우 출력 버퍼를 사용하지 않으며, "8kb"라고 입력한 경우 8킬로바이트 크기의 출력 버퍼를 사용한다. 

최소 8kb 

autoFlush 

출력 버퍼가 다 찼을 경우 자동으로 버퍼에 있는 데이터를 출력 스트림에 보내고 비울지 여부를 나타낸다. "true"인 경우 버퍼의 내용을 웹 브라우저에 보낸 후 버퍼를 비우며, "false"인 경우 에러를 발생시킨다 

true 

info 

JSP 페이지에 대한 설명을 입력한다. 

 

errorPage 

JSP 페이지를 실행하는 도중에 에러가 발생할 때 보여줄 페이지를 지정한다 

 

isErrorPage 

현재 페이지가 에러가 발생될 때 보여주는 페이지인지의 여부를 지정한다. "true"일 경우 에러 페이지이며, "false"일 경우 표현 언어를 지원한다. 

false 

deferredSyntax

AllowedAsLiteral 

#{문자가 무자열 값으로 사용되는 것을 허용할지의 여부를 지정한다. 

false 

trimDirective

Whitespaces

출력 결과에서 템플릿 텍스트의 공백 문자를 제거할지의 여부를 지정한다. 

false 


MIME

MIME은 Multipurpose Internet Mail Extensions의 약자로서 이메일의 내용을 설명하기 위해 정의되었다. 하지만, 메일뿐만 아니라 HTTP 등의 프로토콜에서도 응답 데이터의 내용을 설명하기 위해서 MIME을 사용하고 있다. 

MIME에 대한 보다 자세한 내용은 http://en.wikipedia.org/wiki/MIME 사이트에서 확인할 수 있으며, 등록된 MIME 타입의 목록은 http://www.iana.org/assignments/mediatypes/index.html에서 확인할 수 있다.


BOM

BOM은 Byte Order Mark의 약자로서 UTF-8, UTF-16, UTF-32와 같은 유니코드 인코딩에서 바이트의 순서가 리틀 엔디언 (Little Endian)인지 빅 엔디언(BigEndian)인지의 여부를 알려주는 16비트(2바이트)값이다. BOM에 대한 보다 상세한 내용은 http://en.wikipedia.org/wiki/Byte_Order_Mark페이지에서 확인할 수 있다.


스크립트 요소

- 스크립트릿

스크립트릿(Scriptlet)은 JSP 페이지에서 자바 코드를 실행할 때 사용하는 코드 블록이다.

스크립트릿의 코드 블록은 '<%'로 시작해서 '%>'로 끝나며, '<%'와 '%>' 사이에는 실행할 자바 코드가 위치한다.

- 표현식

표현식(Expression)은 어떤 값을 출력 결과에 포함시키고자 할 때 사용된다. 

표현식의 구문은 <%= 값 %> 이다.

표현식은 '<%='로 시작해서 '%>'로 끝나며, 이 둘 사이에는 출력할 값이 위치한다.

- 선언부

JSP 페이지의 스크립트릿이나 표현식에서 사용할 수 있는 메서드를 작성할 때에는 선언부(declaration)를 사용한다. 선언부는 다음과 같은 문법 구조를 갖는다.

<%!

      public 리턴타입 메서드이름(파라미터목록) {

          자바코드1;

          자바코드2;

          ...

          자바코드n;

          return 값;

      }

  %>

 리턴타입 : 메서드 실행 결과값의 타입을 지정한다.

 메서드이름 : 메서드의 이름을 의미한다. 

 파라미터 목록 : 콤마로 구분된 파라미터의 목록을 지정한다. 파라미터는 메서드 내에서 사용될 변수이다. 

 자바코드 1~n : 메서드 내에서 실행할 자바 코드가 위치한다. 

 return 값 : 메서드의 실행 결과로 값을 리턴한다. 

표현식뿐만 아니라 스크립트릿에서도 선언부에서 정의한 메서드를 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%@ page contentType = "text/html; charset=utf-8"%>
<%!
    public int add(int a, int b) {
        int c = a+ b;
        return c;
    }
 
    public int subtract(int a, int b) {
        int c = a - b;
        reutrn c;
    }
%>
<html>
<head><title> 스크립트릿에서 선언부 사용하기</title></head>
<body>
<%
    int value1 = 3;
    int value2 = 9;
 
    int addReault = add(value1, value2);
    int subtractResult = subtract(value1, value2);
%>
 
<%= value1%> + <%= value2%> = <%= addResult%>
<br>
<%= value1%> - <%= value2%> = <%= subtractResult%>
 
</body>
</html>
cs


request 기본 객체

request 기본 객체는 JSP 페이지에서 가장 많이 사용되는 기본 객체로서 웹 브라우저의 요청과 관련이 있다. 웹 브라우저에 웹 사이트의 주소를 입력하면, 웹 브라우저는 해당 웹 서버에 연결한 후 요청 정보를 전송하는데, 이 요청 정보를 제공하는 것이 바로 request 기본 객체이다.

- request 기본 객체가 제공하는 기능

클라이언트(웹 브라우저)와 관련된 정보 읽기 기능

서버와 관련된 정보 읽기 기능

클라이언트가 전송한 요청 파라미터 읽기 기능

클라이언트가 전송한 요청 헤더 읽기 기능

클라이언트가 전송한 쿠키 읽기 기능

속성 처리 기능

- request 기본 객체는 웹 브라우저, 즉 클라이언트가 전송한 정보와 서버 정보를 구할 수 있는 메서드를 제공하고 있다.

request 기본 객체의 클라이언트 및 서버 정보 관련 메서드

메서드 

리턴 타입 

설명 

getRemoteAddr()

String 

웹 서버에 연결한 클라이언트의 IP 주소를 구한다. 게시판이나 방명록 등에서 글 작성자의 IP 주소가 자동으로 입력되기도 하는데, 이때 입력되는 IP 주소가 바로 이 메서드를 사용하여 구한 것이다. 

getContentLength()

long 

클라이언트가 전송한 요청 정보의 길이를 구한다. 전송된 데이터의 길이를 알 수 없는 경우 -1을 리턴한다. 

getCharacterEncoding() 

String 

클라이언트가 요청 정보를 전송할 때 사용한 캐릭터의 인코딩을 구한다. 

getContentType() 

String 

클라이언트가 요청 정보를 전송할 때 사용한 컨텐츠의 타입을 구한다. 

getProtocol() 

String 

클라이언트가 요청한 프로토콜을 구한다. 

getMethod()

String 

웹 브라우저가 정보를 전송할 때 사용한 방식을 구한다. 

getRequestURI() 

String 

웹 브라우저가 요청한 URL에서 경로를 구한다. 

getContextPath() 

String 

JSP 페이지가 속한 웹 어플리케이션의 컨텍스트 경로를 구한다. 

getServerName() 

String 

연결할 때 사용한 서버 이름을 구한다. 

getServerPort()

int 

서버가 실행중인 포트 번호를 구한다. 

request 기본 객체의 파라미터 읽기 메서드

메서드 

리턴 타입 

설명 

getParameter(String name)

String 

이름이 name인 파라미터의 값을 구한다. 존재하지 않을 경우 null을 리턴한다. 

getParameterValues(String name) 

String[] 

이름이 name인 모든 파라미터의 값ㅇ르 배열로 구한다. 존재하지 않을 경우 null을 리턴한다. 

getParameterNames() 

java.util.Enumeration 

웹 브라우저가 전송한 파라미터의 이름 목록을 구한다. 

getParameterMap() 

java.util.Map 

웹 브라우저가 전송한 파라미터의 맵을 구한다. 맵은 <파라미터 이름, 값> 쌍으로 구성된다. 

request 기본 객체가 제공하는 헤더 관련 메서드

메서드

리턴 타입

설명 

getHeader(String name) 

String 

지정한 이름의 헤더 값을 구한다. 

getHeaders(String name) 

java.util.Enumeration 

지정한 이름의 헤더 목록을 구한다. 

getHeaderNames() 

java.util.Enumeration 

모든 헤더의 이름을 구한다. 

getIntHeader(String name) 

int 

지정한 헤더의 값을 정수 값으로 읽어온다. 

getDateHeader(String name) 

long 

지정한 헤더의 값을 시간 값으로 읽어온다.

(이때 시간은 1970년 1월 1일 이후로 흘러간 1/1000초 단위의 값을 가진다. 




GET 방식 전송과 POST 방식 전송

웹 브라우저는 GET 방식과 POST 방식의 두 가지 방식 중 한 가지를 이용해서 파라미터를 전송한다. 

<form> 태그의 method속성에서 GET 방식과 POST방식을 설정할 수 있다.

GET 방식과 POST 방식의 차이점은 전송 방식에 있다.

GET 방식은 요청 URL에 파라미터를 붙여서 전송한다. GET 방식은 URL의 경로 뒤에 물음표('?')와 함께 파라미터를 붙여 전송하는데, 이를 쿼리 문자열(query string)이라고 한다. 쿼리 문자열의 형식은 이름1=값1&이름2=값2&..&이름n=값n 이와 같으며 각각의 파라미터는 앰퍼샌드(&) 기호로 구분하며, 파라미터의 이름과 값은 등로기호(=)로 구분한다. [RFC 2396규약을 찾아보자]

웹 브라우저는 HTTP 프로토콜에 맞춰 아래 코드와 같은 데이터를 전송한다. 

1
2
3
4
5
6
7
8
GET /chap03/viewParameter.jsp?name=cbk&address=seoul&pet=cat HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintoshl Intel Mac OS X 10.10; rv:36.0) Gecko/20100101 Firefox/36.0
Accept: text/html, application/xhtml+xml, application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US, en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Cache-Control: max-age=0
cs

URL에 파라미터가 함께 전송되는 GET 방식과 달리 POST 방식은 데이터 영역을 이용해서 파라미터를 전송한다. POST 방식을 사용할 때 웹 브라우저가 웹 서버에 전송하는 데이터는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
POST /chap03/viewParameter.jsp HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length:30
Cache-Control: max-age=0
Accept: text/html, application/xhtml+xml, application/xml;q=0.9,image/webp,*/*;q=0.8
Orgin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintoshl Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
Content-Type:application/x-www-form-urlencoded
Refer: http://localhost:8080/chap03/form.jsp
Accept-Encoding:gzip, deflate
Accept-Language: ko, en-US;q=0.8,en;q=0.6
Cookie: JSESSIONID=8D2476E3EB99C478A04BB59CEBC3858C
 
name=cbk&address=seoul&pet=cat
cs

여기서 15행이 데이터 영역에 해당하며, 데이터 영역에 파라미터 데이터가 전송되는 것을 확인할 수 있다. GET 방식은 웹 브라우저, 웹 서버 또는 웹 컨테이너에 따라 전송할 수 있는 파라미터 값의 길이에 제한이 있을 수 있다. 반면에 POST 방식은 데이터 영역을 이용해서 데이터를 전송하기 때문에 웹 브라우저나 웹 서버 등에 상관없이 전송할 수 있는 파라미터의 길이에 제한이 없다.


요청 파라미터 인코딩

- GET 방식을 이용해서 파라미터를 전송하는 방법은 3가지가 있다.

 

GET 방식 이용 시 파라미터 전송 방법

인코딩 결과 

1

<a> 태그의 링크 태그에 쿼리 문자열 추가 

웹 페이지 인코딩 사용 

2

HTML 폼(FORM)의 method 속성값을 "GET"으로 지정해서 폼을 전송 

웹 페이지 인코딩 사용 

3

웹 브라우저에 주소에 직접 쿼리 문자열을 포함하는 URL 입력 

웹 브라우저마다 다름 

1번 방식의 경우

<a href="viewParameter.jsp?name=홍길동&address=아차곡">링크</a>

2번 방식의 경우

<form method="viewParameter.jsp" method=get">

<input type="text" name="name">

<input type="text" name="address">

<input type="submit" value="전송">

</form>


response 기본 객체

response 기본 객체는 request 기본 객체와 반대의 기능을 수행한다. request 기본 객체가 웹 브라우저가 전송한 요청 정보를 담고 있다면 response 기본 객체는 웹 브라우저에 보내는 응답 정보를 담는다.

- response 기본 객체가 제공하는 기능

헤더 정보 입력

리다이렉트 하기

- response 기본 객체는 응답 정보에 헤더를 추가하는 기능을 제공한다.

response 기본 객체가 제공하는 헤더 추가 메서드

메서드 

설명 

addDateHeader(String name, long date) 

name헤더에 date를 추가한다. date는 1970년 1월 1일 이후 흘러간 시간을 1/1000초 단위로 나타낸다. 

addHeader(String name, String value) 

name 헤더에 value를 값으로 추가한다. 

addIntHeader(String name, int value) 

name 헤더에 정수 값 value를 추가한다. 

setDateHeader(Strng name, long date) 

name 헤더의 값을 date로 지정한다. date는 1970년 1월 1일 이후 흘러간 시간을 1/1000초 단위로 나타낸다. 

setHeader(String name, String value) 

name 헤더의 값을 value로 지정한다. 

setIntHeader(String name, int value) 

name 헤더의 값을 정수 값 value로 지정한다. 

containsHeader(String name) 

이름이 name인 헤더를 포함하고 있을 경우 true를, 그렇지 않을 경우 false를 리턴한다. 

위 표에서 add로 시작하는 메서드는 기존의 헤더에 새로운 값을 추가할 때 사용하고

set로 시작하는 메서드는 헤더의 값을 새로 지정할 때 사용된다.

response 기본 객체가 제공하는 헤더 추가 메서드

응답 헤더 

설명 

Cache-Control 

HTTP 1.1 버전에서 지원하는 헤더로서, 이 헤더의 값을 "no-cache"로 지정하면 웹 브라우저는 응답 결과를 캐시하지 않는다.

"no-cache"로 설정하더라도 응답 내용을 캐시 저장소에 보관할 수 있다. 예를 들어, "no-cache"로 설정했더라도, 웹 브라우저에 따라 뒤로가기 버튼을 클릭하면 캐시 저장소에 보관된 응답 내용을 사용하기도 한다. 응답 결과가 캐시 저장소 자체에 보관되지 않도록 하려면, 이 헤더에 "no-store"를 추가한다. 

Pragma 

HTTP 1.0 버전에서 지원하는 헤더로서, 이 헤더의 값을 no-cache"로 지정하면 웹 브라우저는 응답 결과를 캐시에 저장하지 않는다. 

Expires

HTTP 1.0 버전에서 지원하는 헤더로서, 응답 결과의 만료일을 지정한다. 만료일을 현재 시간보다 이전으로 설정함으로써 캐시에 보관되지 않도록 할 수 있다. 

- response 기본 객체에서 많이 사용되는 기능 중 하나는 리다이렉트 기능이다. 리다이렉트는 웹 서버가 웹 브라우저에게 다른 페이지로 이동하라고 응답하는 기능이다.

- response 기본 객체는 response.sendRedirect(String location) 메서드를 사용해서 웹 브라우저가 리다이렉트하도록 지시할 수 있다.

- response.sendRedirect() 메서드는 주로 다음과 같은 형태로 사용된다.

<%@ page import = "java.sql.* %>

...

<%

    // JSP 페이지에서 필요한 코드를 실행한다.

    ...

    response.sendRedirect("이동할페이지");

%>


캐시(Cache)란?

웹 브라우저가 WAS에 a.jsp의 실행을 요청하고 잠시 뒤에 한 번 더 a.jsp의 실행을 요청했다고 하자. 첫 번째 요청과 두 번째 요청 사이에 a.jsp가 출력한 결과에 차이가 없다면 웹 브라우저는 불필요하게 동일한 응답 결과를 두 번 요청한 셈이 된다. 캐시는 이렇게 동일한 데이터를 중복해서 로딩하지 않도록 할 때 사용한다. 웹 브라우저는 첫 번째 요청 시 응답 결과를 로컬 PC의 임시 보관소인 캐시에 저장한다. 이후, 동일한 URL에 대한 요청이 있으면 WAS에 접근하지 않고 로컬 PC에 저장된 응답 결과를 사용한다. 캐시에 보관된 데이터를 사용하는 경우, WAS에 접근하지 않기 때문에 훨씬 빠르게 응답 결과를 웹 브라우저에 출력할 수 있게 된다. 따라서 변경이 발생하지 않는 JSP의 응답 결과나 이미지, 정적인 HTMl 등은 캐시에 보관함으로써 웹 브라우저의 응답 속도를 향상시킬 수 있다.


java.net.URLEncoder 클래스

해당 클래스 내에 있는 URLEncoder.encode() 메서드를 사용하면 파라미터 값으로 사용될 문자열을 지정한 캐릭터 셋으로 인코딩할 수 있다.

1
2
3
4
5
6
7
<%@ page "pageEncoding=utf-8"%>
<%@ page import = "java.net.URLEncoder"%>
<%
    String value ="자바";
    String encodedValue = URLEncoder.encode("value,""utf-8");
    response.sendRedirect("/chap03/index.jsp?name=" + encodedValue);
%>
cs


JSP 처리 과정

WAS는 JSP 페이지에 대한 요청이 들어오면 다음과 같은 처리를 한다.

JSP에 해당하는 서블릿이 존재하지 않을 경우 (과정 1.1)

JSP 페이지로부터 자바 코드를 생성한다. (과정 1.2)

자바 코드를 컴파일해서 서블릿 클래스를 생성한다. (과정 1.3)

서블릿에 클라이언트 요청을 전달한다. (과정 2.1)

서블릿이 요청을 처리한 결과를 응답으로 생성한다. (과정 2.2)

응답을 웹 브라우저에 전송한다. (과정 3)

JSP에 해당하는 서블릿이 존재하는 경우 (즉, 이미 과정 1.1~1.3을 거친 경우)

서블릿에 클라이언트 요청을 전달한다. (과정 2.1)

서블릿이 요청을 처리한 결과를 응답으로 생성한다. (과정 2.2)

응답을 웹 브라우저에 전송한다 (과정 3)


출력 버퍼와 응답

JSP 페이지는 응답 결과를 곧바로 웹 브라우저에 전송하지 않는다. 대신 출력 버퍼(buffer)라고 불리는 곳에 임시로 응답 결과를 저장했다가 한 번에 웹 브라우저에 전송한다.

JSP 페이지가 생성하는 출력 내용을 버퍼에 저장했다가 한꺼번에 웹 브라우저에 전송할 때 생기는 장점

데이터 전송 성능 향상

JSP 실행 도중에 버퍼를 비우고 새로운 내용 전송 가능

버퍼가 다 차기 전까지 헤더 변경 가능


page 디렉티브에서 버퍼 설정하기 : buffer 속성 

buffer 속성을 사용하면 JSP 페이지가 사용할 버퍼를 설정할 수 있다. buffer 속성은 JSP 페이지가 사용할 버퍼의 크기를 지정할 때 사용하며 <%@ page buffer = "4kb" %> 와 같이 킬로바이트 단위로 버퍼의 크기를 지정한다. 여기서 kb 단위를 붙이지 않으면 에러가 난다. buffer 속성의 default 값은 8KB이다.

buffer 속성을 사용하고 싶지 않으면 <%@ page buffer = "none" %> 으로 지정하면 된다.

buffer 속성의 값을 "none"으로 지정하면 JSP 페이지가 출력하는 내용을 곧바로 웹 브라우저에 전송하기 때문에, <jsp:forward> 기능을 사용할 수 없고, 곧바로 전송되기 때문에 출력한 내용을 취소할 수 없다.


플러시(flush)

버퍼가 다 찼을 때, 버퍼에 쌓인 데이터를 실제로 전송되어야 할 곳(또는 저장되어야 할 곳)에 전송하고(또는 저장하고) 버퍼를 비우는 것을  플러시라고 한다.


page 디렉티브에서 버퍼 설정하기 : autoFlush 속성

page 디렉티브는 autoFlush 속성을 제공한다. 이 속성을 사용하면 버퍼가 다 찼을 때 어떻게 처리할지를 결정할 수 있다. autoFlush 속성은 "true"나 "false"를 값으로 갖는다.
true : 버퍼가 다 차면 버퍼를 플러시하고 계속해서 작업을 진행한다.
false : 버퍼가 다 차면 익셉션을 발생시키고 작업을 중지한다.

웹 어플리케이션 폴더 구성과 URL 매핑

서블릿/JSP 규약은 웹 어플리케이션이 특정 폴더 구조를 따르도록 제한하고 있기 때문에, 이 폴더 구조를 모르면 제대로 동작하는 코드를 작성할 수 없게 된다.

웹 어플리케이션 폴더 구조 

WEB-INF 

웹 어플리케이션 설정 정보를 담고 있는 web.xml 파일이 위치한다.

WEB-INF\classes 

웹 어플리케이션에서 사용하는 클래스 파일이 위치한다. 

WEB-INF\lib 

웹 어플리케이션에서 사용하는 jar 파일이 위치한다. 

나머지

웹 어플리케이션에서 사용할 JSP, HTML 이미지 등의 파일이 위치한다. 


web.xml 파일을 작성해야 하는 경우

서블릿을 직접 설정하는 경우

리스너(Listener)를 직접 설정하는 경우

특정 URL에 속하는 JSP들에 대해 공통 속성값을 설정하는 경우


웹 어플리케이션 배포

웹 어플리케이션을 WAS에 배포하는 방법

대상 폴더에 파일을 직접 복사

war 파일로 묶어서 배포 (war는 Web Application Archive의 약자이다)


기본 객체

JSP가 제공하는 기본 객체

기본 객체

실제 타입

설명

request 

javax.servlet.http.HttpServletRequest

클라이언트의 요청 정보를 저장한다.

response

javax.servlet.http.HttpServletResponse

응답 정보를 저장한다.

pageContext

javax.servlet.jsp.PageContext

JSP 페이지에 대한 정보를 저장한다.

session

javax.servlet.http.HttpSession

HTTP 세션 정보를 저장한다.

application

javax.servlet.ServletContext

웹 어플리케이션에 대한 정보를 저장한다.

out

javax.servlet.jsp.JspWriter

JSP 페이지가 생성하는 결과를 출력할 때 사용하는 출력 스트림이다.

config

javax.servlet.ServletConfig

JSP 페이지에 대한 설정 정보를 저장한다.

page

java.lang.Object

JSP 페이지를 구현한 자바 클래스 인스턴스이다.

exception

java.lang.Throwable 

익셉션 객체이다. 에러 페이지에서만 사용한다. 


out 기본 객체 

- JSP 페이지가 생성하는 모든 내용은 out 기본 객체를 통해 전송된다. JSP 페이지 내에서 사용하는 비-스크립트 요소들(HTML 코드와 텍스트)은 out 기본 객체에 그대로 전달된다. 값을 출력하는 표현식의 결과값도 out 기본 객체에 전달된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page contentType = "text/html: charset=utf-8"%>
<html>
    <!-- <html>은 out.prinln("<html>") 으로 작성한 것과 같다 -->
<head><title>out 기본 객체 사용</title></head>
<body>
<%
    out.println("안녕하세요?");
%>
<br>
out 기본 객체를 사용하여
<%
    out.println("출력한 결과입니다.");
%>
</body>
</html>
cs


out 기본 객체의 출력 메서드

- print() : 데이터를 출력한다.

- println() : 데이터를 출력하고, 줄바꿈 문자(\r\n 또는 \n)를 출력한다.

- newLine() : 줄바꿈 문자(\r\n 또는 \n)를 출력한다.


out 기본 객체의 버퍼 관련 메서드

메서드

리턴 타입

설명

getBufferSize()

int

버퍼의 크기를 구한다.

getRemaining()

int

현재 버퍼의 남은 크기를 구한다.

clear()

void

버퍼의 내용을 비운다. 만약 버퍼를 이미 플러시했다면 IOException을 발생시킨다. 

clearBuffer()

void

버퍼의 내용을 비운다. clear() 메서드와 달리 버퍼를 플러시한 경우에도 IOException을 발생시키지 않는다.

flush()

void

버퍼를 플러시한다. 즉 버퍼의 내용을 클라이언트에 전송한다.

isAutoFlush()

boolean

버퍼가 다 찼을 때 자동으로 플러시 할 경우 true를 리턴한다.


1
2
3
4
5
6
7
8
9
10
<%@ page contentType = "text/html; charset=utf-8"%>
<%@ page buffer="8kb" autoFlush="false"%>
<html>
<head><title>버퍼 정보</title></head>
<body>
버퍼 크기 : <%= out.getBufferSize()%>
남은 크기 : <%= out.getRemaining()%>
auto flush : <%= out.getisAutoFlush()%>
</body>
</html>
cs


pageContext 기본 객체는 JSP 페이지와 일대일로 연결된 객체로 

- 기본 객체 구하기

- 속성  처리하기

- 페이지의 흐름 제어하기

- 에러 데이터 구하기

 기능을 제공한다.

 

pageContext가 제공하는 기본 객체 접근 메서드

메서드 

리턴 타입 

설명 

getRequest() 

ServletRequest 

request 기본 객체를 구한다. 

getResponse() 

ServletResponse 

response 기본 객체를 구한다.

getSession() 

HttpSession 

session 기본 객체를 구한다. 

getServletContext() 

ServletContext 

application 기본 객체를 구한다. 

getServletConfig() 

ServletConfig 

config 기본 객체를 구한다. 

getOut() 

JspWriter 

out 기본 객체를 구한다. 

getException() 

Exception 

exception 기본 객체를 구한다. 

getPage() 

Object 

page 기본 객체를 구한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page contentType = "text/html; charset=utf-8"%>
<html>
<head><title>기본 객체</title></head>
<body>
<%
    HttpServletRequest httpRequest = (HttpServletRequest)pageContext.getRequest();
%>
request 기본 객체와 pageContext.getRequest()의 동일여부:
<%= request == httpRequest%>
<br>
pageContext.getOut() 메서드를 사용한 데이터 출력:
<%pageContext.getOut().println("안녕하세요!");%>
</body>
</html>
cs


application 기본 객체

특정 웹 어플리케이션에 포함된 모든 JSP 페이지는 하나의 application 기본 객체를 공유하게 된다. application 기본 객체는 웹 어플리케이션 전반에 걸쳐서 사용되는 정보를 담고 있다.

서블릿 규약은 웹 어플리케이션 전체에 걸쳐서 사용할 수 있는 초기화 파라미터를 정의하고 있다.

웹 어플리케이션에서 사용할 수 있는 초기화 파라미터는 WEB-INF\web.xml 파일에 <context-param> 태그를 사용하여 추가한다.

1
2
3
4
5
<context-param>
    <description>파라미터 설명(필수 아님)</description>
    <param-name>파라미터이름</param-name>
    <param-value>파라미터값</param-value>
</context-param>
cs

web.xml 파일에 초기화 파라미터를 추가하면, JSP는 application 기본 객체가 제공하는 메서드를 사용해서 초기화 파라미터를 사용할 수 있다. application 기본 객체는 초기화 파라미터를 읽어올 수 있는 메서드를 제공하고 있다.

application 기본 객체의 웹 어플리케이션 초기화 파라미터 관련 메서드

메서드 

리턴 타입 

설명 

getInitParameter(String name) 

String 

이름이 name인 웹 어플리케이션 초기화 파라미터의 값을 읽어온다. 존재하지 않으면 null을 리턴한다. 

getInitParameterNames() 

Enumeration<String> 

웹 어플리케이션 초기화 파라미터의 이름 목록을 리턴한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <context-param>
      <description>로깅 여부</description>
    <param-name>logEnabled</param-name>
    <param-value>ture</param-value>
  </context-param>
  <context-param>
      <description>디버깅 레벨</description>
    <param-name>debugLevel</param-name>
    <param-value>5</param-value>
  </context-param>
</web-app>
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.Enumeration"%>
<html>
<head>
<title>초기화 파라미터 읽어오기</title>
</head>
<body>
    초기화 파라미터 목록:
    <ul>
        <%
            Enumeration<String> initParamEnum = application.getInitParameterNames();
            while (initParamEnum.hasMoreElements()) {
                String initParamName = initParamEnum.nextElement();
       %>
        <li><%=initParamName%> = <%=application.getInitParameter(initParamName)%>
            <%
                }
           %>
    </ul>
</body>
</html>
cs


서버 정보 읽어오기

application 기본 객체는 현재 사용 중인 웹 컨테이너에 대한 정보를 읽어오는 메서드를 제공하고 있다.

application 기본 객체가 제공하는 서버 정보 관련 메서드

메서드 

리턴 타입 

설명 

getServerInfo() 

String 

서버 정보를 구한다. 

getMajorVersion() 

String 

서버가 지원하는 서블릿 규약의 메이저 버전을 리턴한다. 버전의 정수 부분을 리턴한다. 

getMinorVersion() 

String 

서버가 지원하는 서블릿 규약의 마이너 버전을 리턴한다. 버전의 소수 부분을 리턴한다. 

1
2
3
4
5
6
7
8
9
10
11
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>서버 정보 출력</title>
</head>
<body>
    서버정보:<%=application.getServerInfo()%><br> 
    서블릿 규약 메이저 버전:<%=application.getMajorVersion()%><br>
    서블릿 규약 마이너 버전:<%=application.getMinorVersion()%><br>
</body>
</html>
cs


로그 메시지 기록하기

application 기본 객체는 웹 컨테이너가 사용하는 로그 파일에 로그 메시지를 기록할 수 있도록 메서드를 제공하고 있다.

application 기본 객체가 제공하는 로그 기록 메서드

메서드 

리턴 타입 

설명 

log(String msg) 

void 

msg를 로그로 남긴다. 

log(String msg, Throwable throwable) 

void 

msg를 로그로 남긴다. 익셉션 정보도 함께 로그에 기록한다. 

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>로그 메시지 기록</title>
</head>
<body>
    <%
        application.log("로그 메시지 기록");
   %>
    로그 메시지를 기록합니다.
</body>
</html>

cs

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>로그 메시지 기록2</title>
</head>
<body>
    <%
    log("로그 메시지 기록2");
   %>
    로그 메시지를 기록합니다.
</body>
</html>
cs


웹 어플리케이션의 자원 구하기

JSP 페이지에서 웹 어플리케이션 폴더에 위치한 파일을 사용해야 할 때가 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<html>
<head>
<title>절대 경로 사용하여 자원 읽기</title>
</head>
<body>
<%
    char[] buff = new char[128];
    int len = -1;
    String filePath = "../../message/notice.txt";
    try(InputStreamReader fr = new InputStreamReader(
            new FileInputStream(filePath), "UTF-8")) {
        while ((len = fr.read(buff))!=-1){
            out.print(new String(buff, 0, len));
        }
    }catch(IOException ex){
        out.println("익셉션 발생:: "+ex.getMessage());
    }
%>
</body>
</html>
cs


1
2
본 사이트는 예제 사이트입니다. <br>
이 내용은 <b> notice.txt </b>에 있습니다.
cs


application 기본 객체는 절대경로를 사용할 경우 유지보수에 어려움이 있는 문제를 해결할 수 있도록 웹 어플리케이션 파일에 접근할 수 있는 메서드를 제공하고 있다. 아래의 메서드를 사용하면 위의 소스코드에 있는 절대 경로를 사용하지 않고도 웹 어플리케이션 폴더의 파일에 접근할 수 있다.

application 기본 객체가 제공하는 자원 접근 메서드

메서드 

리턴 타입 

설명 

getRealPath(String path) 

String 

웹 어플리케이션 내에서 지정한 경로에 해당하는 자원의 시스템상에서의 경로를 리턴한다. 

getResource(String path) 

java.net.URL 

웹 어플리케이션 내에서 지정한 경로에 해당하는 자원에 접근할 수 있는 URL 객체를 리턴한다. 

getResourceAsStream(String path) 

java.io.InputStream 

웹 어플리케이션 내에서 지정한 경로에 해당하는 자원으로부터 데이터를 읽어올 수 있는 InputStream을 리턴한다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<html>
<head>
<title>application 기본 객체 사용하여 자원 읽기</title>
</head>
<body>
    <%
        String resourcePath = "C:/message/notice.txt";
   %>
    자원의 실제 경로:
    <br>
    <%=application.getRealPath(resourcePath)%>
    <br> ----------
    <br>
    <%=resourcePath%>의 내용
    <br> ----------
    <br>
    <%
        char[] buff = new char[128];
        int len = -1;
        try (InputStreamReader br = new InputStreamReader(application.getResourceAsStream(resourcePath), "UTF-8")) {
            while ((len = br.read(buff)) != -1) {
                out.print(new String(buff, 0, len));
            }
        } catch (IOException ex) {
            out.println("익셉션 발생: " + ex.getMessage());
        }
   %>
</body>
</html>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ page import="java.net.URL"%>
<html>
<head>
<title>application 기본 객체 사용하여 자우너 읽기2</title>
</head>
<body>
    <%
        String resourcePath = "C:/message/notice.txt";
        char[] buff = new char[128];
        int len = -1;
        URL url = application.getResource(resourcePath);
        try (InputStreamReader br = new InputStreamReader(url.openStream(), "UTF-8")) {
            while ((len = br.read(buff)) != -1) {
                out.print(new String(buff, 0, len));
            }
        } catch (IOException ex) {
            out.println("익셉션 발생: " + ex.getMessage());
        }
   %>
</body>
</html>
cs


web.xml 파일

web.xml 파일은 웹 어플리케이션을 위한 설정 정보를 담고 있는 파일이다. JSP 프로그래밍을 할 때 web.xml 파일이 꼭 필요한 것은 아니다. 서블릿 2.5/JSP 2.1 버전까지는 web.xml 파일이 필수였지만 서블릿 3.0/JSP 2.2 버전부터 필요할 때만 web.xml 파일을 작성하면 된다.


웹 어플리케이션 초기화 파라미터는 언제 사용할까?

웹 어플리케이션 초기화 파라미터는 이름처럼 웹 어플리케이션을 초기화하는 데 필요한 설정 정보를 지정하기 위해 사용된다. 예를 들어, 데이터베이스 연결과 관련된 설정 파일의 경로나, 로깅 설정 파일. 또는 웹 어플리케이션의 주요 속성 정보를 담고 있는 파일의 경로 등을 지정할 때 초기화 파라미터를 사용한다.


JSP 기본 객체와 영역

웹 어플리케이션은 다음의 네 가지 영역(scope)으로 구성된다.

PAGE 영역 : 하나의 JSP 페이지를 처리할 때 사용되는 영역

- PAGE 영역은 한 번의 클라이언트 요청에 대해서 하나의 JSP 페이지를 범위로 갖는다. 웹 브라우저의 요청이 들어오면 JSP 페이지를 실행하는데, 이때 JSP 페이지를 실행하는 범위가 하나의 PAGE 영역이 된다.

- pageContext 기본 객체

REQUEST 영역 : 하나의 HTTP 요청을 처리할 때 사용되는 영역

- REQUEST 영역은 한 번의 웹 브라우저 요청과 관련된다. 웹 브라우저의 주소에 URL을 입력하거나 링크를 클릭해서 페이지를 이동할 때, 웹 브라우저가 웹 서버에 전송하는 요청이 하나의 REQUEST 영역이 된다. 웹 브라우저가 요청을 보낼 때마다 새로운 REQUEST 영역이 생성된다. PAGE 영역은 오직 하나의 JSP 페이지만을 포함하는데 반해, REQUEST 영역은 하나의 요청을 처리하는 데 사용되는 모든 JSP 페이지를 포함한다는 차이점이 있다.

- request 기본 객체

SESSION 영역 : 하나의 웹 브라우저와 관련된 영역

- SESSION 영역은 하나의 웹 브라우저와 관련된 영역이다. 세션이 생성되면 하나의 웹 브라우저와 관련된 모든 요청은 하나의 SESSION 영역에 포함된다.

- session 기본 객체

APPLICATION 영역 : 하나의 웹 어플리케이션과 관련된 영역

- APPLICATION 영역은 하나의 웹 어플리케이션과 관련된 전체 영역을 포함한다. 예를 들어, 이장에서 사용 중인 예제인 웹 어플리케이션에 포함된 모든 JSP 페이지, 이 웹 어플리케이션을 사용하는 모든 요청 그리고 브라우저의 세션은 모두 하나의 APPLICATION 영역에 소갛게 된다.

- application 기본 객체


JSP 기본 객체의 속성(Attribute) 사용하기

네 개의 기본 객체 pageContext, request, session, application은 속성을 갖는다. 각 기본 객체가 존재하는 동안 기본 객체의 속성을 사용할 수 있다. 속성은 JSP 페이지 사이에서 정보를 주고받거나 공유하기 위한 목적으로 사용된다. 속성은 <속성이름, 값>의 형태를 갖는다. 네 개의 기본 객체는 서로 다른 이름을 갖는 속성을 여러 개 포함할 수 있다.

속성 처리 메서드

메서드 

리턴 타입 

설명 

setAttribute(String name, Object value) 

void 

이름이 name인 속성의 값을 value로 지정한다. 

getAttribute(String name) 

Object 

이름이 name인 속성의 값을 구한다. 지정한 이름의 속성이 존재하지 않으면 null을 리턴한다. 

removeAttribute(String name) 

void 

이름이 name인 속성을 삭제한다. 

getAttributeNames() 

Enumeration<String> 

속성의 이름을 구한다.(pageContext 기본 객체는 이 메서드를 제공하지 않는다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page contentType="text/html; charset=UTF-8"%>
<%
    String name = request.getParameter("name");
    String value = request.getParameter("value");
    if (name != null && value != null){
        application.setAttribute(name,value);
    }
%>
<html>
<head>
<title>application 속성 지정</title>
</head>
<body>
<%
    if(name !=null && value !=null) {
%>
    application 기본 객체의 속성 설정:
<%= name%> = <%= value%>
<%
    } else {
%>
    application 기본 객체의 속성 설정 안함
<%
    } 
%>
</body>
</html>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Enumeration"%>
<html>
<head>
<title>application 기본 객체 속성 보기</title>
</head>
<body>
    <%
        Enumeration<String> attrEnum = application.getAttributeNames();
        while (attrEnum.hasMoreElements()) {
            String name = attrEnum.nextElement();
            Object value = application.getAttribute(name);
   %>
    application 속성 :
    <b><%=name%></b> =
    <%=value%><br>
    <%
        }
   %>
</body>
</html>
cs


속성의 값 타입

속성의 이름은 문자열을 나타내는 String 타입이지만, 값은 모든 클래스 타입이 올 수 있다.

1
2
3
4
<%
    public void setAttribute(String name, Object value)
    public Object getAttribute(String name)
%>
cs

setAttribute() 메서드의 value 파라미터 타입이 Object이고 getAttribute() 메서드의 리턴 타입이 Object이다.이것은 모든 클래스 타입을 속성의 값으로 사용할 수 있다는 것을 뜻한다. 

예를 들어, 다음과 같이 다양한 타입의 객체를 속성값으로 설정할 수 있다.

1
2
3
4
5
<%
    session.setAttribute("session_start", new java.util.Date());
    session.setAttibute("memberid", "madvirus");
    application.setAttribute("application_temp", new File("c://temp"));
%>
cs

위 코드는 각각 차례대로 Date, String, File 타입의 객체를 속성값으로 사용하고 있다. 이렇게 다양한 타입의 값을 속성값으로 지정할 수 있으므로, getAttribute() 메서드를 사용해서 속성의 값을 읽을 때에는 다음처럼 속성값을 지정할 때 사용한 타입으로 알맞게 변환해야 한다.

1
2
3
4
5
<%
    Date date = (Date)session.getAttribute("session_start");
    String memberID = (String)session.getAttibute("memberid");
    File tempDir = (File)application.getAttribute("application_temp");
%>
cs

기본 데이터 타입의 값은 래퍼 타입을 대신 사용해야 한다. 예를 들어, int 타입의 값을 속성에 설정하고 싶다면 래퍼 타입인 Integer를 사용해야 한다.

1
2
3
4
5
6
<%
    //int의 래퍼 타입인 Integer를 이용해서 값을 설정
    request.setAttribute("age", new Integer(20));
    Integer ageAttr = (Integer)request.getAttribute("age");
    int ageValue = ageAttr.intValue();
%>
cs

자바는 기본 데이터 타입과 래퍼 타입 간의 변환을 자동으로 처리해주는 오토 박싱/오토 언박싱(auto boxing/auto unboxing) 기능을 제공하므로, setAttribute() 메서드에 기본 데이터 타입의 값을 전달하거나 getAttribute()에서 래퍼 타입으로 읽어온 값을 기본 데이터 타입에 할당할 수 있다. 아래 코드는 오토 박싱과 언박싱을 사용한 코드의 예이다.

1
2
3
4
5
6
<%
    //int 값 20이 자동으로 Integer로 변환되어 속성값으로 저장
    request.setAttribute("age", 20);
    //Integer 타입의 값이 자동으로 int 타입으로 변환됨
    int age = (Integer)request.getAttribute("age");
%>
cs


속성의 활용

속성은 기본 객체에 따라서 쓰임새가 다르다.

속성의 쓰임새

기본 객체 

영역 

쓰임새 

pageContext 

PAGE 

(한 번의 요청을 처리하는) 하나의 JSP 페이지 내에서 공유할 값을 저장한다. 주로 커스텀 태그에서 새로운 변수를 추가할 때 사용한다. 

request 

REQUEST 

한 번의 요청을 처리하는 데 사용되는 모든 JSP 페이지에서 공유할 값을 저장한다. 주로 하나의 요청을 처리하는 데 사용하는 JSP 페이지 사이에서 정보를 전달하기 위해 사용된다.

session 

SESSION 

한 사용자와 관련된 정보를 JSP 사이에 공유하기 위해 사용한다. 사용자의 로그인 정보와 같은 것들을 저장한다. 

application 

APPLICATION 

모든 사용자를 위해 공유할 정보를 저장한다. 임시 폴더 경로와 같이 웹 어플리케이션의 설정 정보를 주로 저장한다. 

속성을 저장하기 위해 가장 많이 사용되는 기본 객체는 request 기본 객체와 session 기본 객체이다. MVC(Model-View-Controller) 패턴에 기반해서 웹 어플리케이션을 개발할 때 request 기본 객체의 속성을 주로 사용한다. session 기본 객체의 속성은 로그인, 로그아웃과 같이 사용자의 인증정보를 저장할 때 사용한다.


익셉션 직접 처리하기

1
2
3
4
5
6
7
8
9
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>파라미터 출력</title>
</head>
<body>
    name 파라미터 값: <%= request.getParameter("name").toUpperCase()%>
</body>
</html>
cs

위의 에러를 아래의 try catch문으로 잡아줄 수가 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title>파라미터 출력</title>
</head>
<body>
    name 파라미터 값:
    <% try {%>
    <%= request.getParameter("name").toUpperCase()%>
    <% } catch(Exception ex) {%>
    name 파라미터가 올바르지 않습니다.
    <% }%>
</body>
</html>
cs


에러 페이지 지정하기

JSP는 실행 도중 익셉션이 발생할 때 에러 화면 대신 지정한 JSP 페이지를 보여줄 수 있는 기능을 제공하고 있다. 익셉션이 발생하면 보여줄 JSP 페이지는 page 디렉티브의 errorPage 속성을 사용해서 지정한다.

1
2
3
4
5
6
7
8
9
10
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page errorPage = "/error/viewErrorMessage.jsp"%>
<html>
<head>
<title>파라미터 출력</title>
</head>
<body>
    name 파라미터 값: <%= request.getParameter("name").toUpperCase()%>
</body>
</html>
cs

위의 소스코드의 2행을 보면 page 디렉티브의 errorPage 속성을 지정했다. name 파라미터가 존재하지 않아 7행에서 NullPointerException이 발생하면, WAS는 자체적으로 에러 페이지를 생성하는 대신 errorPage 속성에 지정한 JSP를 실행해서 에러 화면을 생성한다.


에러 페이지 작성하기

page 디렉티브의 errorPage 속성을 사용해서 에러 페이지를 지정하면, 에러가 발생할 때 지정한 에러 페이지를 사용하게 된다. 에러 페이지에 해당하는 JSP 페이지는 page 디렉티브의 isErrorPage 속성의 값을 "true"로 지정해야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page isErrorPage = "true"%>
<html>
<head>
<title>에러 발생</title>
</head>
<body>
    요청 처리 과정에서 에러가 발생하였습니다.<br>
    빠른 시간 내에 문제를 해결하도록 하겠습니다.
    <p>
    에러 타입: <%= exception.getClass().getName()%><br>
    에러 메시지: <b><%= exception.getMessage()%></b>
</body>
</html>
cs

page 디렉티브의 isErrorPage 속성값을 "true"로 지정하면, JSP 페이지는 에러 페이지가 된다. 에러 페이지로 지정된 JSP는 exception 기본 객체를 사용할 수 있다. exception 기본 객체는 JSP 시행 과정에서 발생한 익셉션 객체에 해당한다. 

인터넷 익스플로러는 응답의 상태 코드가 400,404나 500등 에러 코드이고 전체 응답 결과 데이터의 길이가 512바이트 보다 작을 때 인터넷 익스플로러 자체적으로 제공하는 에러 메시지를 보여준다 그러므로 512바이트 보다 작은 에러 페이지의 경우 HTML 주석을 포함해서 512 바이트 보다 크게 만들어주면 된다.


응답 상태 코드별로 에러 페이지 지정하기

JSP/서블릿은 에러 코드별로 사용할 에러 페이지를 web.xml 파일에 지정할 수 있다. 에러 코드에 대해 보여줄 에러 페이지를 지정하려면 web.xml 파일에 다음과 같은 설정을 추가해주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
    xmlns:xsi="http://www.w3/org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1">
    <!-- 
        에러페이지를 설정할 경우 web.xml에 아래와 같은 코드를 작성해야 한다.
        <error-page>
            <error-code>에러코드</error-code>
            <location>에러페이지의 URL</location>
        </error-page>
     -->
    <error-page>
        <error-code>404</error-code>
        <location>/error/error404.jsp</location>
    </error-page>
    
    <error-page>
        <error-code>500</error-code>
        <location>/error/error500.jsp</location>
    </error-page>
    
</web-app>
cs


1
2
3
4
5
6
7
8
9
10
11
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>404에러 발생</title>
</head>
<body>
<strong>요청한 페이지는 존재하지 않습니다.</strong>
<br><br>
주소를 올바르게 입력했는지 확인해보시기 바랍니다.
</body>
</html>
cs


주요 응답 상태 코드

HTTP 프로토콜은 응답 상태 코드를 이용해서 서버의 처리 결과를 웹 브라우저에 알려준다. 주요 응답 상태 코드로는 다음과 같은 것들이 있다.

- 200 : 요청을 정상적으로 처리함

- 307 : 임시로 페이지를 리다이렉트함

- 400 : 클라이언트의 요청이 잘못된 구문으로 구성됨

- 401 : 접근을 허용하지 않음

- 404 : 요청한 URL을 처리하기 위한 자원이 존재하지 않음

- 405 : 요청한 메서드(GET, POST, HEAD 등의 전송 방식)를 허용하지 않음

- 500 : 서버 내부 에러가 발생함(예를 들어, JSP에서 익셉션이 발생함)

- 503 : 서버가 일시적으로 서비스를 제공할 수  없음(급격하게 부하가 몰리거나 서버가 임시 보수 중인 경우가 해당)

JSP가 정상적으로 실행되는 경우 응답 코드로 200이 전송되며, response.sendRedirect()를 이용할 경우 응답 코드로 307을 전송한다.

HTTP 응답 코드는 http://goo.gl/D9th8N에서 확인할 수 있다.


익셉션 타입별로 에러 페이지 지정하기

JSP 페이지에서 발생하는 익셉션 종류별로 에러 페이지를 지정할 수도 있다.

1
2
3
4
    <error-page>
        <exception-type>java.lang.NullPointerException</exception-type>
        <location>/error/errorNullPointer.jsp</location>
    </error-page>
cs


1
2
3
4
5
6
7
8
9
<%@ page contentType="text/html; charset=EUC-KR"%>
<html>
<head>
<title>NULL 에러 발생</title>
</head>
<body>
<strong>서비스 처리 과정에서 널(NULL) 에러가 발생하였습니다.</strong>
</body>
</html>
cs


에러 페이지를 여러 방법으로 지정한 경우 다음의 우선순위에 따라 사용할 에러 페이지를 선택한다.

1. page 디렉티브의 errorPage 속성에 지정한 에러 페이지를 보여준다.

2. JSP 페이지에서 발생한 익셉션 타입이 web.xml 파일의 <exception-type>에 지정한 익셉션 타입과 동일한경우 지정한 에러 페이지를 보여준다.

3. 에러 코드가 web.xml 파일의 <error-code>에 지정한 에러 코드와 동일한 경우 지정한 에러 페이지를 보여준다.

4. 아무것도 해당하지 않는 경우 웹 컨테이너가 제공하는 기본 에러 페이지를 보여준다.











Posted by 전설의아이
|

Spring Framework

Legend 개발자/T아카데미 2017. 9. 7. 09:37

1강 Framework 개념


1. SW 재사용 방안들

복사(Copy) & 붙이기(Paste)

- 초보적인 재사용 방식으로 비슷한 예제를 다른 Source에서 복사해서 사용함.

GregorianCalendar date = (GregorianCalender)Calendar.getInstance();

SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");

String date = df format(date);

- 예를 들어, A라는 클래스에서 Date타입을 String 타입으로 변환하는 코딩을 하고, 클래스 B에서 동일한 로직이 필요하여 복사했다고 가정한 경우

- JDK 버전이 바뀌어 동일한 기능을 제공하는 향상된 인터페이스가 나오면 위의 코드를 사용한 A, B 클래스를 모두 변경해야 한다.


메서드 호출

- 자주 사용되고, 유사한 기능들을 모아 메서드로 정의하여 재사용함.

public class DateUtility{

public static String toStringToday(String format){

GregorianCalendar date = (GregorianCalender)Calendar.getInstance();

SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");

String date = df format(date);

}

}

String sdate = DateUtility.toStringToday("yyyyMMdd");

- JDK 버전이 바뀌거나 메서드의 내용이 수정되더라도 해당 클래스를 모두 수정할 필요 없이 toStringToday() 메서드의 내용만 수정하면 된다.

- toStringToday() 메서드의 Signature를 변경하면 이 메서드를 사용하는 모든 클래스에 영향을 준다.

- 메서드 재사용 방법은 '복사 & 붙이기'보다는 진보된 방식이지만, 작업 영역간의 결합도(Coupling) 문제는 여전히 존재한다.


클래스 재사용 (상속)

- 자주 사용되고, 유사한 기능들을 모아 메서드로 정의하여 재사용함.

public class Person{

public String printBirthDate(String format){

DateUtility.toStringToday(birthDate, format);

}

}

- Person을 상속받은 모든 클래스들은 자동적으로 변경된 printBirthDate() 메서드를 사용하게 된다.

- DateUtility 클래스의 메서드가 변경되더라도 printBirthDate()메서드의 인터페이스가 변하지 않으면 나머지 클래스들은 영향을 받지 않는다.


AOP(Aspect Oriented Programming)

- 관심의 분리(Seperatrion of Concerns)

- AOP가 핵심관심모듈의 코드를 직접 건드리지 않고 필요한 기능이 동작하도록 하는 데는 위빙(Weaving)이라고 하는 특수한 작업이 필요하다. 즉, AOP에서 위빙 작업을 통해 핵심모듈 사이사이에 필요한 횡단 관심 코드가 동작하도록 엮어지게 만든다.

- AOP는 OOP를 더욱 OOP 답게 만들어 줄 수 있다.

- AOP는 OOP 뿐만 아니라 기존의 절차적 프로그래밍에도 적용될 수 있다.


2. 디자인 패턴과 프레임워크의 관련성

디자인패턴의 정의

- 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 소프트웨어 개발과정에서 발견된 Know-How를 축적하여 이름을 붙여 이후에 재사용하기 좋은 형태로 특정 규약을 묶어서 정리한 것

- 이 용어를 소프트웨어 개발 영역에서 구체적으로 처음 제시한 곳은, GoF(Gang of Four)라 불리는 네 명의 컴퓨터 과학 연구자들이 쓴 서적 'Design Patterns: Elements of Reusable Object-Oriented Software'(재사용 가능한 객체지향 소프트웨어의 요소 - 디자인 패턴)이다.

- 디자인 패턴을 사용하는 이유

요구사항은 수시로 변경 → 요구사항 변경에 대한 Source Code 변경을 최소화

여러 사람이 같이하는 팀 프로젝트 진행 → 범용적인 코딩 스타일을 적용

상황에 따라 인수 인계하는 경우도 발생 → 직관적인 코드를 사용


프레임워크의 정의

- 비기능적(Non-Funtional) 요구사항(성능, 보안, 확장성, 안정성 등)을 만족하는 구조와 구현된 기능을 안정적으로 실행하도록 제어해주는 잘 만들어진 구조의 라이브러리의 덩어리

- 프레임워크는 애플리케이션들의 최소한의 공통점을 찾아 하부 구조를 제공함으로써 개발자들로 하여금 시스템의 하부 구조를 구현하는데 들어가는 노력을 절감하게 해줌

- 프레임워크를 사용하는 이유

비기능적인 요소들을 초기 개발 단계마다 구현해야 하는 불합리함을 극복해준다.

기능적인(Functional) 요구사항에 집중할 수 있도록 해준다.

디자인 패턴과 마찬가지로 반복적으로 발견되는 문제를 해결하기 위한 특화된 Solution을 제공한다.


디자인패턴과 프레임워크의 관련성

- 디자인 패턴은 프레임워크의 핵심적인 특징이고, 프레임워크를 사용하는 애플리케이션에 그 패턴이 적용된다는 특징을 가지고 있다. 하지만 프레임워크는 디자인 패턴이 아니다.

- 디자인 패턴은 애플리케이션을 설계할 때 필요한 구조적인 가이드라인이 되어 줄 수는 있지만 구체적으로 구현된 기반코드를 제공하지 않는다.

- 프레임워크는 디자인 패턴과 함께 패턴이 적용 된 기반 클래스 라이브러리를 제공해서 프레임워크를 사용하는 구조적인 틀과 구현코드를 함께 제공한다.

- 개발자는 프레임워크의 기반코드를 확장하여 사용하면서 자연스럽게 그 프레임워크에서 사용된 패턴을 적용할 수 있게 된다.


3. 프레임워크의 구성요소와 종류

IoC(Inversion of Control)

- IoC란 "제어의 역전" 즉, 인스턴스 생성부터 소멸까지의 인스턴스 생명주기 관리를 개발자가 아닌 컨테이너가 대신 해준다는 뜻임. 즉, 컨테이너 역할을 해주는 프레임워크에게 제어하는 권한을 넘겨서 개발자의 코드가 신경 써야 할 것을 줄이는 전략이다.

- 프레임워크의 동작원리를 제어흐름이 일반적인 프로그램 흐름과 반대로 동작하므로 IoC라고 설명함.

- Spring 컨테이너는 IoC를 지원하며, 메타데이터(XML 설정)를 통해 beans를 관리하고 어플리케이션의 중요부분을 형성함.

- Spring 컨테이너는 관리되는 bean들을 의존성주입(Dependency Injection)을 통해 IoC를 지원함.


클래스 라이브러리(Class Library)

- 프레임워크는 특정 부분의 기술적인 구현을 라이브러리 형태로 제공한다.

- Class Library라는 구성요소는 프레임워크의 정의 중 하나인 "Semi Complete(반제품)" 이다. 라고 해석하게 만들었다.

특징

프레임워크 

라이브러리 

유저코드의 작성 

프레임워크 클래스를 서브클래싱 해서 작성 

독립적으로 작성 

호출흐름 

프레임워크코드가 유저코드를 호출 

유저코드가 라이브러리를 호출 

실행흐름 

프레임워크가 제어 

유저코드가 제어 

객체의 연동 

구조프레임워크가 정의 

독자적으로 정의 

- 라이브러리와 프레임워크의 차이점

프레임워크와 라이브러리를 구분하는 방법은 실행제어가 어디서 일어나는 가에 달려있다.

라이브러리는 개발자가 만든 클래스에서 직접 호출하여 사용하므로 실행의 흐름에 대한 제어를 개발자의 코드가 관장하고 있다.

프레임워크는 반대로 프레임워크에서 개발자가 만든 클래스를 호출하여 실행의 흐름에 대한 제어를 담당한다.


디자인 패턴

- 디자인 패턴 + 라이브러리 = 프레임워크

- 프레임워크는 디자인 패턴과 그것이 적용된 기반 라이브러리의 결합으로 이해할 수 있다.

- 프레임워크의 라이브러리를 살펴볼 때도 적용된 패턴을 주목해서 살펴 본다면 그 구성을 이해하기 쉽다.

- 특히 프레임워크를 확장하거나 커스터마이징 할 때는 프레임워크에 적용된 패턴에 대한 이해가 꼭 필요하다.


프레임워크 종류

- 아키텍쳐 결정 = 사용하는 프레임워크의 종류 + 사용전략

기능

프레임워크 종류 

웹(MVC) 

Spring MVC, Struts2, Webwork, PlayFramework

OR(Object-Relational) 매핑 

MyBatis, Hibernate, JPA, Spring JDBC

AOP(Aspect Oriented Programming) 

Spring AOP, AspectJ, JBoss AOP 

DI(Dependency Injection) 

Spring DI, Google Guicd

Build와 Library관리 

Ant+lvy, Maven, Gradle

단위 테스트 

jUnit, TestNG, Cactus 

JavaScript 

jQuery, AngularJS, Node.js 


학습정리

SW 재사용 방안들 : Copy&Paste, Method, Inheritance, AOP

디자인 패턴과 프레임워크 관련성 : 개발자는 프레임워크의 기반코드를 확장하여 사용하면서 자연스럽게 프레임워크에서 사용된 패턴들을 적용할 수 있게 된다.

프레임워크의 구성요소와 종류 : IoC(Inversion of Control), Design Pattern, Class Library 


2강 환경설정

1. JDK(Java Development Kit) 8 설치 및 API 문서

Java SE Development Kit 8 downloads

- URL http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


Java SE Development Kit 8 API

- URL https://docs.oracle.com/javase/8/docs/api/


2. STS(Spring Tool Suite) 3.7.3 설치 및 Spring API 문서

STS downloads

- URL https://spring.io/tools/sts


SpringSource Site

- URL http://spring.io/


SpringFramwork 3.2.17 release API 문서

- URL https://docs.spring.io/spring/docs/3.2.17.RELEASE/javadoc-api/


3. Tomcat 8 설치

Tomcat8.0 downloads

- URL https://tomcat.apache.org/download-80.cgi


4. Oracle 11g XE(eXpress Edition) 설치

- URL http://www.oracle.com/technetwork/database/database-technologies/express-edition/downloads/index.html


학습정리

JDK 8 설치 및 API문서

 - JDK(Java Development Kit) 1.8 다운로드 및 설치

 - Java SE API 문서 찾기

STS 3.7.3 설치 및 Spring API 문서

 - STS(Spring Tool Suit) 3.7.3 다운로드 및 설치

 - SpringFramework 3.2.17 Release API 문서 찾기

Tomcat 8 설치

 - Tomcat 8.0 다운로드 및 설치

Oracle 11g XE 설치

 - Oracle 11g XE 버전 다운로드 및 설치 


3강 Spring Framework 개요


1. Spring Framework 개요

Spring Framework란?

- Java 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크이다.

- 애플리케이션 프레임워크

특정 계층이나 기술, 업무 분야에 국한되지 않고 애플리케이션의 전 영역을 포괄하는 범용적인 프레임워크를 말한다.

- 경략급 프레임워크

단순한 웹컨테이너에서도 엔터프라이즈 개발의 고급기술을 대부분 사용할 수 있다.

- 엔터프라이즈 개발 용이

개발자가 복잡하고 실수하기 쉬운 Low Level에 많이 신경쓰지 않으면서 Business Logic 개발에 전념할 수 있도록 해준다. 여기서 Low Level이란 보안, 인증 Transaction처리이다. 이 Low Level를 프레임워크가 해결해준다.

- 오픈소스

Spring은 OpenSource의 장점을 충분히 취하면서 동시에 OpenSource 제품의 단점과 한계를 잘 극복한다.


Spring Framework 전략

- Spring 삼각형

엔터프라이즈 개발의 복잡함을 상대하는 Spring 의 전략

→ Portable Service Abstraction, Dependency Injection, AOP, POJO + BLUEPRINTS

Portable Service Abstraction(서비스 추상화)

- 트랜잭션 추상화, OXM 추상화, 데이터 액세스의 Exception 변환기능 등 기술적인 복잡함은 추상화를 통해 Low Level의 기술구현 부분과 기술을 사용하는 인터페이스로 분리한다. 

(OXM : Object XML Mapping)

객체지향과 DI (Dependency Injection, DI는 의존관계주입의 약자)

- Spring은 객체지향에 충실한 설계가 가능하도록 단순한 객체 형태로 개발할 수 있고, DI는 유연하게 확장 가능한 객체를 만들어 두고 그 관계는 외부에서 다이나믹하게 설정해준다.

AOP(Aspect Oriented Programming 관점지향프로그래밍)

- AOP는 애플리케이션 로직을 담당하는 코드에 남아 있는 기술관련 코드를 분리해서 별도의 모듈로 관리하게 해주는 강력한 기술이다.

POJO(Plain Old Java Object 일반적인 JAVA Object 프로그램)

- POJO는 객체지향 원리에 충실하면서, 특정 환경이나 규약에 종속되지 않고 필요에 따라 재활용될 수 있는 방식으로 설계된 객체이다. JVM만 있으면 돌아가는 프로그램


2. Spring Framework 특징

- 컨테이너 역할

Spring 컨테이너는 Java 객체의 LifeCycle을 관리하며, Spring 컨테이너로 부터 필요한 객체를 가져와 사용할 수 있다.

- DI(Dependency Injection) 지원

Spring은 설정 파일이나(XML)이나 어노테이션(@comment)을 통해서 객체 간의 의존관계를 설정할 수 있도록 하고 있다.

- AOP(Aspect Oriented Programming) 지원 [관점지향프로그래밍]

Spring은 트랜잭션이나 로깅, 보안과 같이 공통적으로 필요로 하는 모듈들을 실제 핵심 모듈에서 분리해서 적용할 수 있다.

- POJO(Plain Old Java Object) 지원

Spring 컨테이너에 저장되는 Java객체는 특정한 인터페이스를 구현하거나, 특정 클래스를 상속받지 않아도 된다.

- 트랜잭션 처리를 위한 일관된 방법을 지원

JDBC, JTA 등 어떤 트랜잭션을 사용하던 설정을 통해 정보를 관리하므로 트랜잭션 구현에 상관없이 동일한 코드 사용가능

- 영속성(Persistence)과 관련된 다양한 API 지원

Spring은 MyBatis, Hibernate 등 데이터베이스 처리를 위한 ORM(Object Relational Mapping) 프레임워크들과의 연동 지원


3. Spring Framework 기능요소

- Spring 프레임워크를 구성하는 기능 요소

Spring AOP

Spring ORM 

Spring Web 

Spring Web MVC 

Spring DAO 

Spring Context 

Spring Core

Spring Core (Core 컨테이너)

- Spring 프레임워크의 기본기능을 제공한다.

- 이 모듈에 있는 BeanFactory는 Spring의 기본 컨테이너이면서 스프링 DI의 기반이다.

Spring AOP (AOP)

- AOP 모듈을 통해 Aspect 지향 프로그래밍을 지원한다.

- AOP 모듈은 스프링 애플리케이션에서 Aspect를 개발할 수 있는 기반을 지원한다.

Spring ORM (ORM)

- MyBatis, Hibernate, JPA 등 널리 사용되는 ORM 프레임워크와의 연결고리를 제공한다.

- ORM 제품들을 Spring의 기능과 조합해서 사용할 수 있도록 해준다.

Spring DAO (DAO)

- JDBC에 대한 추상화 계층으로 JDBC 코딩이나 예외처리 하는 부분을 간편화 시켰으며, AOP 모듈을 이용해 트랜잭션 관리 서비스도 제공한다.

Spring Web (Web)

- 일반적인 웹애플리케이션 개발에 필요한 기본기능을 제공한다.

- Webwork나 Struts와 같은 다른 웹애플리케이션 프레임워크와의 통합을 지원한다.

Spring Context (Context)

- Context 모듈은 BeanFactory의 개념을 확장한 것으로 국제화(|18N) 메시지, 애플리케이션 생명주기 이벤트, 유효성 검증 등을 지원한다.

Spring Web MVC (WebMVC(Model/View/Controller)

- 사용자 인터페이스가 애플리케이션 로직과 분리되는 웹 어플리케이션을 만드는 경우에 일반적으로 사용되는 패러다임이다.


학습정리

Spring Framework 정의 : Java 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크이다.

Spring Framework 전략 : Portable Service Abstraction, DI, AOP, POJO

Spring Framework 특징 : 컨테이너, DI와 AOP, POJO 지원, 일관된 트랜잭션 처리방법 다양한 ORM과의 연동

Spring Framework 기능요소 : Core 컨테이너, Context, DAO, ORM, AOP, Web, WebMVC


4강 Spring Project 시작하기


1. STS 소개 및 제공하는 기능

STS(SpringSource Tool Suite) 소개

- Spring 개발업체인 SpringSource가 직접 만들어 제공하는 이클립스의 확장판으로 최신 이클립스를 기반으로 주요한 Spring 지원 플러그인과 관련된 도구를 모아서 Spring 개발에 최적화되도록 만들어진 IDE이다.

STS가 제공하는 기능

- Bean 클래스 이름 자동완성 : 현재 프로젝트의 모든 Source와 라이브러리, JDK안의 모든 클래스 중에서 첫 글자가 SDD로 시작하는 클래스를 자동으로 보여줌

- 설정파일 생성 위저드 : Bean 설정파일 생성 위저드 중 사용할 Namespace와 Schema 버전을 선택하는 화면 (설정파일은 XML에서 하는 작업이다.)

- Bean 의존관계 그래프 : Spring IDE는 XML 설정파일을 읽어서 자동으로 그래프 그려줌, 각 Bean이 어떻게 참조되고, 어떤 Property를 갖는지 알 수 있음

- AOP 적용 대상 표시 : Spring IDE의 XML 설정파일 편집기를 이용하면 AOP의 적용 대상을 손쉽게 확인할 수 있다.


2. Maven과 Library 관리

Maven이란?

- URL http://maven.apache.org 

- 라이브러리 관리 + 빌드 툴

Maven을 사용하는 이유

- 편리한 Dependent Library 관리 - Dependency Management

- 여러 프로젝트에서 프로젝트 정보나 jar 파일들을 공유하기 쉬움

- 모든 프로젝트의 빌드 프로세스를 일관되게 가져갈 수 있음.

Maven이전의 Library 관리 방법

- 과거의 의존성 라이브러리 관리 

라이브러리 사이트 접속 → 라이브러리 다운로드 → 압축 해제 → 프로젝트에 라이브러리 복사 → 플래스 패스에 추가 → 라이브러리 사이트 접속 ...

- Maven에서 의존성 라이브러리 관리

Pom.xml 파일 수정 → 빌드 → Pom.xml 파일 수정 ...


pom.xml

- Maven 프로젝트를 생성하면 pom.xml 파일이 생성된다.

- pom.xml 파일은 Project Object Model 정보를 담고 있다.

pom.xml 의존관계(dependency) 추가

- Spring 프레임워크 설치

http://mvnrepository.com 접근한다.

org.springframework로 검색한다.

spring-jdbc 모듈과 spring-web 모듈을 추가한다.

- Eclipse 제공 : Maven Repositories View

Window → Show View → Other → Maven → Maven Repositories


3. Spring Project 작성하기

STS시작하기

다운받은 Spring-toll-suite-3.7.3.RELEASE의 압축을 풀어서 STS.exe를 실행한다.

Spring Project 생성 및 Spring Module 설치

Java Project → Convert to Maven Project → Add Spring Project Nature

pom.xml 파일에 dependency 추가 : https://mvnrepository.com에서 spring context module 검색


학습정리

STS 소개 및 제공하는 기능 : Spring 개발에 최적화된 IDE, 클래스 자동완성기능, 설정파일 생성 위저드

Maven과 Library 관리 : 라이브러리 관리 + 빌드 툴, pom.xml, 편리한 Dependent Library 관리 기능

Spring Project 시작하기 : Java Project → Convert to Maven Project → Add Spring Project Nature


5강 IoC와 DI


1. IoC(Inversion of Control)

IoC의 개념

- IoC(제어권의 역전)이란, 객체의 생성, 생명주기의 관리까지 모든 객체에 대한 제어권이 바뀌었다는 것을 의미한다.

- 컴포넌트 의존관계 결정(component dependency resolution), 설정(configuration) 및 생명주기(lifecycle)를 해결하기 위한 디자인 패턴(Design Pattern)


IoC 컨테이너

- 스프링 프레임워크도 객체에 대한 생성 및 생명주기를 관리할 수 있는 기능을 제공하고 있음. 즉, IoC 컨테이너 기능을 제공한다.

- IoC 컨테이너는 객체의 생성을 책임지고, 의존성을 관리한다.

- POJO의 생성, 초기화, 서비스, 소멸에 대한 권한을 가진다.

- 개발자들이 직접 POJO를 생성할 수 있지만 컨테이너에게 맡긴다.


IoC의 분류

- IoC (Inversion of Control) 안에 DL과 DI가 있음

- DL (Dependency Lookup) : EJB, SPring

- DI (Dependency Injection) : Spring PicoContainer

- Setter Injetion

- Constructor Injection

- Method Injection


DL(Dependency Lookup) 과 DI(Dependency Injection)

DL(Dependency Lookup) 의존성 검색 : 저장소에 저장되어 있는 Bean에 접근하기 위해 컨테이너가 제공하는 API를 이용하여 Bean을 Lookup 하는 것

DI(Dependency Injection) 의존성 주입 : 각 클래스간의 의존관계를 빈 설정(Bean Definition) 정보를 바탕으로 컨테이너가 자동으로 연결해주는 것

DL 사용시 컨테이너 종속성이 증가하여, 주로 DI를 사용함 

Setter Injetion

Constructor Injection

Method Injection


2. DI(Dependency Injection)

DI의 개념

각 클래스간의 의존관계를 빈 설정 (Bean Definition) 정보를 바탕으로 컨테이너가 자동으로 연결해주는 것을 말함

- 개발자들은 단지 빈 설정파일에서 의존관계가 필요하다는 정보를 추가하면 된다.

- 객체 레퍼런스를 컨테이너로부터 주입 받아서, 실행 시에 동적으로 의존관계가 생성된다.

- 컨테이너가 흐름의 주체가 되어 애플리케이션 코드에 의존관계를 주입해 주는 것이다.

- DI의 장점

코드가 단순해진다.

컴포넌트 간의 결합도가 제거된다.

DI의 유형

- Setter Injetion : Setter 메서드를 이용한 의존성 삽입

의존성을 입력 받는 setter 메서드를 만들고 이를 통해 의존성을 주입한다.

- Constructor Injection : 생성자를 이용한 의존성 삽입

필요한 의존성을 포함하는 클래스의 생성자를 만들고 이를 통해 의존성을 주입힌다.

- Method Injection : 일반 메서드를 이용한 의존성 삽입

의존성을 입력 받는 일반 메서드를 만들고 이를 통해 의존성을 주입한다.

DI를 이용한 클래스 호출방식

클래스 

→

사용 

→

인터페이스 

↑

 

↑

의존성삽입 

구현 

↑

↑

조립기 

→

생성 

→

구현클래스 

클래스가 구현클래스를 사용한다고 했을 때, DI를 이용하면 반드시 구현클래스를 상위 인터페이스를 하나 만들고 클래스가 구현클래스를 바로 의존하는 것이 아니라, 클래스는 인터페이스만 사용하게 된다. 그리고 구현클래스에 대한 정보는 XML(설정파일)에 개발자가 기술을 해놓는다. 그러면 프레임워크 측 컨테이너가 설정파일 정보를 읽어서 구현객체(클래스)를 생성해주고, 클래스와 구현클래스 사이에 의존성 관계가 있다고, 의존성 삽입은 컨테이너가 해주는 방식이 DI를 이용한 클래스 호출방식이다.

- Setter Injection

Hello 

 → 

<interface>

printer

 

 

↗

↖

beans.xml

String

Printer

 

Console

Printer


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package bean;
import java. util.List;
public class Hello {
    String name;
    Printer printer;
    
    public Hello( ){ 
    }
    
    public void setName(String name) {
        this.name = name;
    }    
 
    public void setPrinter(Printer printer) {
        this.printer = printer;
    }
}
 cs


1
2
3
4
5
6
<bean id="hello" class="bean.Hello">
    <property name="name" value="Spring" />
    <property name="name" value="Spring" />
</bean>
<bean id="printer" class="bean.StringPrinter" />
<bean id="consolePrinter" class="bean.ConsolePrinter" />
 cs


Setter Injection방법을 사용하면

Hello가 String Printer를 의존하게 된다.

그리고 소스코드에는 new String Printer라는 객체생성코드는 없이 상위 인터페이스의 멤버변수를 하나 호출을 한 후, setter 메소드를 선언을 한다. 

Hello와 String Printer가 의존관계가 있다는 것을 설정파일에 작성하면 된다.

여기서 bean이라는 것은 spring이 관리해주는 관리 객체라는 의미로, container에게 관리를 부탁하는 객체는 bean이 된다.

bean 안에 있는 프로퍼티와 Java에 맵핑되는 setter의 이름이 같게 정의를 해주면 spring이 의존관계가 있다는 것을 알 수 있다.

Setter Injection은 한 번에 한 개씩만 의존관계를 주입받을 수 있다.

한 번에 한개씩 의존관계 주입방법을 개선한것이 Constructor Injection이다.

- Constructor Injection

Hello 

 → 

<interface>

printer

 

 

↗

↖

beans.xml

String

Printer

 

Console

Printer


1
2
3
4
5
6
7
8
9
10
11
12
13
14
package bean;
import java. util.List;
public class Hello {
    String name;
    Printer printer;
    
    public Hello( ){ 
    }
    
    public Hello(String name, Printer printer){
        this.name = name;
        this.printer = printer;
    }
}
 cs


1
2
3
4
5
6
<bean id="hello" class="bean.Hello">
    <constructor-arg index="0" value="Spring" />
    <constructor-arg index="1" ref="printer" />
</bean>
<bean id="printer" class="bean.StringPrinter" />
<bean id="consolePrinter" class="bean.ConsolePrinter" />
 cs


Constructor Injection방법을 사용하면 인자를 두개를 받는 생성자를 만든 후

설정파일에 construntor-arg라는 태그에 index, value로 작성하여 의존관계가 있다고 설정한다.


3. Spring DI 컨테이너

Spring DI 컨테이너의 개념

- Spring DI 컨테이너가 관리하는 객체를 빈(bean)이라고 하고, 이 빈(bean)들을 관리한다는 의미로 컨테이너를 빈 팩토리(BeanFactory)라고 부른다.

- 객체의 생성과 객체 사이의 런타임(run-time) 관계를 DI 관점에서 볼 때는 컨테이너를 BeanFactory라고 한다.

- Bean Factory에 여러 가지 컨테이너 기능을 추가하여 애플리케이션 컨텍스(Application Context)라고 부른다.

<interface>

BeanFactory 

 ←

<interface>

ApplicationContext 

BeanFactory와 Application Context

- BeanFactory

Bean을 등록, 생성, 조회, 반환 관리함

보통은 BeanFactory를 바로 사용하지 않고, 이를 확장한 ApplicationContext를 사용함

getBean() 메서드가 정의되어 있음

- Application Context

Bean을 등록, 생성, 조회, 반환 관리하는 기능은 BeanFactory와 같음

Spring의 각종 부가 서비스를 추가로 제공함

Spring이 제공하는 ApplicationContext 구현 클래스가 여러 가지 종류가 있음



학습정리

IoC(Inversion of Control) : 제어의 역전, IoC 컨테이너, DL, DI

DI(Dependency Injection) : 클래스 간의 의존관계를 컨테이너가 주입, Setter Injection, Constructor Injection

Spring DI 컨테이너 : BeanFactory, ApplicationContext


6강 DI 애플리케이션 작성(1)


1. POJO 클래스 작성

POJO 클래스 다이어그램

Hello 

 → 

<interface>

printer

 

 

↗

↖

beans.xml

String

Printer

 

Console

Printer


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>spring</groupId>
    <artifactId>spring</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <build>
        <sourceDirectory>src</sourceDirectory>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.3</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>3.2.17.RELEASE</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>3.2.17.RELEASE</version>
        </dependency>
    </dependencies>
</project>
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package myspring.di.xml;
 
public class Hello {
    private String name;
    private Printer printer;
    
    public Hello() {}
    public void setName(String name) {
        this.name = name;
    }
    
    public void setPrinter(Printer printer) {
        this.printer = printer;
    }
    
    public String sayHello() {
        return "Hello " + name;
    }
    
    public void print() {
        this.printer.print(sayHello());
    }
    
}
 
cs


1
2
3
4
5
6
package myspring.di.xml;
 
public interface Printer {
    public void print(String message);
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package myspring.di.xml;
 
public class StringPrinter implements Printer {
    private StringBuffer buffer = new StringBuffer();
 
    @Override
    public void print(String message) {
        // TODO Auto-generated method stub
        buffer.append(message);
    }
 
    public String toString() {
        return buffer.toString();
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
package myspring.di.xml;
 
public class ConsolePrinter implements Printer{
 
    @Override
    public void print(String message) {
        System.out.println(message);
    }
    
}
 
cs


2. 설정 메타정보 XML 작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spirng"/>
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer"/>
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


3. DI 테스트 클래스 작성


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package myspring.di.xml.test;
 
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
 
import myspring.di.xml.Hello;
import myspring.di.xml.Printer;
 
public class HelloBeanTest {
 
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        // 1.IoC 컨테이너 생성
        ApplicationContext context = new GenericXmlApplicationContext("config/beans.xml");
        // 2.Hello Bean 가져오기
        Hello hello = (Hello) context.getBean("hello");
        System.out.println(hello.sayHello());
        hello.print();
        // 3.StringPrinter Bean 가져오기
        Printer printer = context.getBean("printer", Printer.class);
        System.out.println(printer.toString());
 
        Hello hello2 = context.getBean("hello", Hello.class);
        System.out.println(hello == hello2);
    }
 
}
 
cs


학습정리

Spinrg DI 용어 : 빈(Bean), 빈 팩토리(BeanFactory), 어플리케이션 컨텍스트(ApplicationContext), 설정 메타정보(Configuration Metadata)

POJO 클래스 작성 : 의존관계가 있는 Java 클래스 작성 : Hello.java, Printer.java, StringPrinter.java, ConsolePrinter.java

설정 메타정보 XML 작성 : 빈 설정(Bean Configuration) XML 파일작성 - beans.xml

DI테스트 클래스 작성 : DI컨테이너(ApplicationContext)를 사용한 테스트 클래스 작성 


7강 DI 애플리케이션 작성(2)


1. jUnit의 개요와 특징

jUnit의 특징

- TDD의 창시자인 Kent Beck과 디자인 패턴 책의 저자인 Erich Gamma가 작성했다.

- 단정(assert) 메서드로 테스트 케이스의 수행 결과를 판별한다. 예) assertEquals(예상 값, 실제 값)

- jUnit4부터는 테스트를 지원하는 어노테이션을 제공한다. @Test @Before @After

- 각 @Test 메서드가 호출할 때 마다 새로운 인스턴스를 생성하여 독립적인 테스트가 이루어지도록 한다.


2. jUnit을 사용한 DI 테스트 클래스

jUnit 라이브러리 설치

- http://mvnrepository.com에 접근한다.

- jUnit으로 검색한다.

- jUnit 4.12버전을 pom.xml에 추가한다.


jUnit에서 테스트를 지원하는 어노테이션(Annotation)

- @Test

@Test가 선언된 메서드는 테스트를 수행하는 메소드가 된다.

jUnit은 각각의 테스트가 서로 영향을 주지 않고 독립적으로 실행됨을 원칙으로 하므로 @Test마다 객체를 생성한다.

- @Ignore

@Ignore가 선언된 메서드는 테스트를 실행하지 않게 한다.

- @Before

@Before가 선언된 메서드는 @Test 메소드가 실행되기 전에 반드시 실행되어 진다.

@Test 메소드에서 공통으로 사용하는 코드를 @Before 메소드에 선언하여 사용하면 된다.

- @After

@After가 선언된 메서드는 @Test 메소드가 실행된 후 실행된다.

- @BeforeClass

@BeforeClass 어노테이션은 @Test 메소드 보다 먼저 한번만 수행되어야 할 경우에 사용하면 된다.

- @AfterClass

@AfterClass 어노테이션은 @Test 메소드 보다 나중에 한번만 수행되어야 할 경우에 사용하면 된다.


테스트 결과를 확인하는 단정(assert) 메서드

- org.junit.Assert

+assertEquals(expected[A], actual[B])

객체 A와 B가 일치함을 확인한다.

+assertArrayEquals(expected[A], actual[B])

배열 A와 B가 일치함을 확인한다.

+asserSame(expected[A], actual[B])

객체 A와 B가 같은 객체임을 확인한다.

assertEquals 메서드는 두 객체의 값이 같은지 확인하고, assertSame 메서드는 두 객체의 레퍼런스가 동일한가를 확인한다.(==연산자)

+assertTrue(object[A])

조건 A가 참인가를 확인한다.

+assertNotNull(object[A])

객체 A가 null이 아님을 확인한다.

- 이외에도 다양한 assert 메서드가 존재함.

http://junit.sourceforge.net/javadoc/org/junit/Assert.html


jUnit을 사용한 DI 테스트 클래스(HelloBeanJunitTest.java) 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package myspring.di.xml.test;
 
import static org.junit.Assert.assertEquals;
import static org.junit.Assert.assertSame;
 
import org.junit.Before;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
 
import myspring.di.xml.Hello;
import myspring.di.xml.Printer;
 
public class HelloBeanJUnitTest {
    private ApplicationContext context;
 
    @Before
    public void init() {
        context = new GenericXmlApplicationContext("config/beans.xml");
    }
 
    @Test
    public void bean1() {
        Hello hello = (Hello) context.getBean("hello");
        assertEquals("Hello Spring", hello.sayHello());
        hello.print();
 
        Printer printer = (Printer) context.getBean("printer");
        assertEquals("Hello Spring", printer.toString());
    }
 
    @Test
    public void bean2() {
        Printer printer = (Printer) context.getBean("printer");
        Printer printer2 = context.getBean("printer", Printer.class);
 
        assertSame(printer, printer2);
    }
}
 
cs


3. Sprint-Test를 사용한 DI테스트 클래스

Spring-Test 라이브러리 설치

- http://mvnrepository.com에 접근한다.

- spring-test로 검색한다.

- Spring-test 3.2.17 버전을 pom.xml에 추가한다.


Spring-Test에서 테스트를 지원하는 어노테이션

- @RunWith(SpringJUnit4CLassRunner.class)

@RunWith는 jUnit 프레임워크의 테스트 실행방법을 확장할 때 사용하는 어노테이션이다.

SpringjUnit4ClassRunner라는 클래스를 지정해주면 jUnit이 테스트를 진행하는 중에 ApplicationContext를 만들고 관리하는 작업을 진행해 준다.

@RunWith 어노테이션은 각각의 테스트 별로 객체가 생성되더라도 싱글톤(Singleton)의 ApplicationContext를 보장한다.

- @ContextConfiguration

스프링 빈(Bean) 설정 파일의 위치를 지정할 때 사용되는 어노테이션이다.

- @Autowired

스프링DI에서 사용되는 특별한 어노테이션이다.

해당 변수에 자동으로 빈(Bean)을 매핑 해준다.

스프링 빈(Bean) 설정 파일을 읽기 위해 굳이 GenericXmlApplicationContext를 사용할 필요가 없다.


Spring-Test를 사용한 DI 테스트 클래스(HelloBeanSpringTest.java) 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package myspring.di.xml.test;
 
import static org.junit.Assert.assertEquals;
import static org.junit.Assert.assertSame;
 
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 
import myspring.di.xml.Hello;
 
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:config/beans.xml")
public class HelloBeanSpringTest {
    @Autowired
    private ApplicationContext context;
 
    @Test
    public void bean1() {
        Hello hello = (Hello) context.getBean("hello");
        assertEquals("Hello Spring", hello.sayHello());
        hello.print();
        assertEquals(context.getBean("printer").toString(), "Hello Spring");
 
        Hello hello2 = context.getBean("hello", Hello.class);
        hello2.print();
        assertSame(hello, hello2);
    }
}
 
cs


학습정리

jUnit의 개요와 특징

- 단위테스트를 지원하는 프레임워크, assert 메서드를 사용하여 테스트 결과 확인

jUnit을 사용한 DI 테스트 클래스

- jUnit 설치, asset 메서드를 사용하여 테스트 결과 확인

- @Test, @Before 어노테이션 사용

Spring-Test를 사용한 DI 테스트 클래스

- Spring-Test 설치

- @RunWith(SpringJUnit4ClassRunner.class), @ContextConfiguration, @Autowired 어노테이션 사용 


8강 DI 애플리케이션 작성(3)


1. Bean 의존관계 설정 방법

Setter Injection : <property> 태그

- Setter 메서드를 통해 의존관계가 있는 Bean을 주입하려면 <property> 태그를 사용할 수 있다.

- ref 속성은 사용하면 Bean 이름을 이용해 주입할 Bean을 찾는다.

- value 속성은 단순 값 또는 Bean이 아닌 객체를 주입할 때 사용한다.


Constructor Injection : <constructor-arg> 태그

- Constructor를 통해 의존관계가 있는 Bean을 주입하려면 <constructor-arg> 태그를 사용할 수 있다.

- Constructor 주입방식은 생성자의 파라미터를 이용하기 때문에 한번에 여러 개의 객체를 주입할 수 있다.

- 생성자 주입을 위한 설정 : ①index 지정, ②파라미터 이름 지정


POJO 클래스 수정 및 Bean 설정 파일 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package myspring.di.xml;
 
public class Hello {
    private String name;
    private Printer printer;
 
    public Hello() {
    }
 
    public Hello(String name, Printer printer) {
        super();
        this.name = name;
        this.printer = printer;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public void setPrinter(Printer printer) {
        this.printer = printer;
    }
 
    public String sayHello() {
        return "Hello " + name;
    }
 
    public void print() {
        this.printer.print(sayHello());
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <bean id="hello2" class="myspring.di.xml.Hello">
        <constructor-arg index="0" value="Spring"/>
        <constructor-arg index="1" ref="printer"/>
    </bean>
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spring"/>
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer"/>
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


2. 프로퍼티(Property) 값 설정 방법

- 단순 값(문자열이나 숫자)의 주입(Injection)

- Setter 메서드를 통해 Bean의 레퍼런스가 아니라 단순 값을 주입하려고 할 때는 <property> 태그의 value 속성을 사용한다.

- Spring은 List, Set, Map, Properties 와 같은 컬렉션 타입을 XML로 작성해서 프로퍼티에 주입하는 방법을 제공한다.

- List와 Set 타입 : <list>와 <value> 태그를 이용

- 프로퍼티가 Set 타입이면 <list> 대신에 <set>을 사용하면된다.

- 프로퍼티가 Map 타입이면 <map>과 <entry>태그를 이용


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package myspring.di.xml;
 
import java.util.List;
 
public class Hello {
    private String name;
    private Printer printer;
    private List<String> names;
 
    public Hello() {
    }
 
    public Hello(String name, Printer printer) {
        super();
        this.name = name;
        this.printer = printer;
    }
 
    public List<String> getNames() {
        return names;
    }
 
    public void setNames(List<String> names) {
        this.names = names;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public void setPrinter(Printer printer) {
        this.printer = printer;
    }
 
    public String sayHello() {
        return "Hello " + name;
    }
 
    public void print() {
        this.printer.print(sayHello());
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <bean id="hello2" class="myspring.di.xml.Hello">
        <constructor-arg index="0" value="Spring"/>
        <constructor-arg index="1" ref="printer"/>
        <property name="names">
            <list>
                <value>AOP</value>
                <value>Spring</value>
                <value>DI</value>
            </list>
        </property>
    </bean>
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spring"/>
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer"/>
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
package myspring.di.xml.test;
 
import static org.junit.Assert.assertEquals;
import static org.junit.Assert.assertSame;
 
import java.util.List;
 
import org.junit.Before;
import org.junit.Ignore;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.GenericXmlApplicationContext;
 
import jdk.management.resource.internal.inst.SocketOutputStreamRMHooks;
import myspring.di.xml.Hello;
import myspring.di.xml.Printer;
 
public class HelloBeanJUnitTest {
    private ApplicationContext context;
 
    @Before
    public void init() {
        //IoC 컨테이너를 생성
        //1.ApplicationContext 객체 생성
        context = new GenericXmlApplicationContext("config/beans.xml");
    }
 
    @Test 
    public void bean1() {
        //2. getBean() 호출
        Hello hello = (Hello) context.getBean("hello2");
        //3.Hello의 sayHello() 호출
        assertEquals("Hello Spring", hello.sayHello());
        //3.Hello의 printer() 호출
        hello.print();
 
        assertEquals(3, hello.getNames().size());
        List<String> list = hello.getNames();
        for (String value : list) {
            System.out.println(value);
        }
        
        //StringPrinter getBean()
        Printer printer = (Printer) context.getBean("printer");
        assertEquals("Hello Spring", printer.toString());
    }
 
    @Test @Ignore
    public void bean2() {
        Printer printer = (Printer) context.getBean("printer");
        Printer printer2 = context.getBean("printer", Printer.class);
 
        assertSame(printer, printer2);
    }
}
 
cs


3. 프로퍼티(Property) 파일을 이용한 설정 방법

환경에 따라 자주 변경되는 내용의 분리

- XML의 Bean 설정 메타정보는 애플리케이션 구조가 바뀌지 않으면 자주 변경되지 않는다.

- 반면에 프로퍼티 값으로 제공되는 일부 설정정보 (예-DataSource Bean이 사용하는 DB 연결정보)는 애플리케이션이 동작하는 환경(개발, 테스트, 스테이징, 운영)에 따라서 자주 바뀔 수 있다.

- 변경되는 이유와 시점이 다르다면 분리하는 것이 객체지향 설계의 기본 원칙이다. 설정에도 동일한 원칙을 적용할 수 있다. 

- 환경에 따라 자주 변경될 수 있는 내용은 properties 파일로 분리하는 것이 가장 깔끔하다 XML 처럼 복잡한 구성이 필요 없고 키와 값의 쌍(key=value)으로 구성하면 된다.


환경에 따라 자주 변경되는 내용의 분리의 예시(1)

- value 속성에 설정된 값들은 환경에 따라 변경될 수 있는 내용이다.

- 자주 변경되는 값들은 properties 파일에 넣어 분리하는 것이 좋다.

1
2
3
4
5
6
<bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="com.sql.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost/testdb" />
        <property name="username" value="spring" />
        <property name="password" value="book" />        
    </bean>
cs

- 프로퍼티 파일ㄹ로 분리한 정보는 ${}(프로퍼티 치환자)을 이용하여 설정한다.

- ${} 값을 치환해주는 기능은 <context:property-placeholder> 태그에 의해 자동으로 등록되는 PropertyPlaceHolderConfigurer Bean이 담당한다.

1
2
3
4
5
6
7
    <context:property-placeholder location="classpath:config/database.properties" />
    <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="${db.driverCLass}" />
        <property name="url" value="${db.url}" />
        <property name="username" value="${db.username}" />
        <property name="password" value="${db.password}" />        
    </bean>
cs


Bean 설정 파일 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
 
    <context:property-placeholder location="classpath:config/value.properties" />
 
    <bean id="hello2" class="myspring.di.xml.Hello">
        <constructor-arg index="0" value="${myname}" />
        <constructor-arg index="1" ref="${myprinter}" />
        <property name="names">
            <list>
                <value>${value1}</value>
                <value>${value2}</value>
                <value>${value3}</value>
            </list>
        </property>
    </bean>
 
<!-- 
    <context:property-placeholder location="classpath:config/database.properties" />
    <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="${db.driverCLass}" />
        <property name="url" value="${db.url}" />
        <property name="username" value="${db.username}" />
        <property name="password" value="${db.password}" />        
    </bean>
    
    <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="com.sql.jdbc.Driver" />
        <property name="url" value="jdbc:mysql://localhost/testdb" />
        <property name="username" value="spring" />
        <property name="password" value="book" />        
    </bean>
 -->
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spring" />
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer" />
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


학습정리

Bean 의존관계 설정 방법

- <property>, <constructor-arg> 태그

프로퍼티(property) 값 설정 방법

- <property> 태그의 value 속성

- <list>, <set>, <map>

프로퍼티(property) 파일을 이용한 값 설정방법

- Properties 파일 작성, ${} 치환자 사용, <context:property-placeholder>


9강 DI 애플리케이션 작성(4)


1. Bean 등록 메타정보 구성 전략

전략(1) XML 단독 사용

- 모든 Bean을 명시적으로 XML에 등록하는 방법이다.

- 생성되는 모든 Bean을 XML에서 확인할 수 있다는 장점이 있으나 Bean의 개수가 많아지면 XML 파일을 관리하기 번거로울 수 있다.

- 여러 개발자가 같은 설정파일을 공유해서 개발하다 보면 설정파일을 동시에 수정하다가 충돌이 일어나는 경우도 적지 않다.

- DI에 필요한 적절한 setter 메서드 또는 constructor가 코드 내에 반드시 존재해야 한다.

- 개발 중에는 어노테이션 설정방법을 사용했지만, 운영 중에는 관리의 편의성을 위해 XML설정으로 변경하는 전략을 쓸 수도 있다.


전략(2) XML과 빈 스캐닝(Bean Scanning)의 혼용

- Bean으로 사용될 클래스에 특별한 어노테이션(Annotation)을 부여해주면 이런 클래스를 자동으로 찾아서 Bean으로 등록한다.

- 특정 어노테이션이 붙은 클래스를 자동으로 찾아서 Bean으로 등록해주는 방식을 빈 스캐닝(Bean Scanning)을 통한 자동인식 Bean 등록기능이라고 한다.

-  어노테이션을 부여하고 자동 스캔으로 빈을 등록하면 XML문서 생성과 관리에 따른 수고를 덜어주고 개발 속도를 향상시킬 수 있다.

-  애플리케이션에 등록될 Bean이 어떤 것들이 있고, Bean들 간의 의존관계가 어떻게 되는지를 한눈에 파악할 수 없다는 단점이 있다.


2. Bean 등록 및 의존관계 설정 Annotation

Bean 등록 Annotation

- @Component

컴포넌트를 나타내는 일반적인 스테레오 타입으로 <bean>태그와 동일한 역할을 함

- @Repository

퍼시스턴스(persistence) 레이어, 영속성을 가지는 속성(파일, 데이터베이스)을 가진 클래스

- @Service

서비스 레이어, 비즈니스 로직을 가진 클래스

- @Controller

프리젠테이션 레이어, 웹 어플리케이션에서 웹 요청과 응답을 처리하는 클래스

- @Repository, @Service, @Controller는 더 특정한 유즈케이스에 대한 @Component의 구체화된 형태이다.


Bean 의존관계 주입 Annotation

- @Autowired

정밀한 의존관계 주입(Dependency Injection)이 필요한 경우에 유용하다.

@Autowired는 프로퍼티, setter 메서드, 생성자, 일반메서드에 적용 가능하다.

의존하는 객체를 주입할 때 주로 Type을 이용하게 된다.

@Autowired는 <property>,<constructor-arg> 태그와 동일한 역할을 한다.

- @Resource

어플리케이션에서 필요로 하는 자원을 자동 연결할 때 사용된다.

@Resource는 프로퍼티, setter 메서드에 적용 가능하다.

의존하는 객체를 주입할 때 주로 Name을 이용하게 된다.

- @Autowired는 타입으로, @Resource는 이름으로 연결한다는 점이 다르다.

- @Value

단순한 값을 주입할 때 사용되는 어노테이션이다.

@Value("Spring")은 <property ... value="Spring" /> 와 동일한 역할을 한다.

- @Qualifier

@Qualifier는 @Autowired 어노테이션과 같이 사용되어 진다.

@Autowired는 타입으로 찾아서 주입하므로, 동일한 타입의 Bean 객체가 여러 개 존재할 때 특정 Bean을 찾기 위해서는 @Qualifier를 같이 사용해야 한다.


Component Scan을 지원하는 태그

- <context:component-scan> 태그

@Component를 통해 자동으로 Bean을 등록하고, @Autowired로 의존관계를 주입받는 어노테이션을 클래스에서 선언하여 사용했을 경우에는 해당 클래스가 위치한 특정 패키지를 Scan하기 위한 설정을 XML에 해주어야 한다.

<context:component-scan base-package="myspring.di.annot" />

<context:include-filter> 태그와 <context:exclude-filter> 태그를 같이 사용하면 자동 스캔 대상에 포함시킬 클래스와 포함시키지 않을 클래스를 구체적으로 명시할 수 있다.


어노테이션을 사용한 POJO 클래스 작성

Hello 

 → 

<interface>

printer

 

 

↗

↖

annot.xml

String

Printer

 

Console

Printer



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package myspring.di.annot;
 
import org.springframework.stereotype.Component;
 
@Component("stringPrinter")
public class StringPrinter implements Printer {
    private StringBuffer buffer = new StringBuffer();
 
    @Override
    public void print(String message) {
        // TODO Auto-generated method stub
        buffer.append(message);
    }
 
    public String toString() {
        return buffer.toString();
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
package myspring.di.annot;
 
import org.springframework.stereotype.Component;
 
@Component("consolePrinter")
public class ConsolePrinter implements Printer{
 
    @Override
    public void print(String message) {
        System.out.println(message);
    }
    
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
package myspring.di.annot;
 
import java.util.List;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
 
@Component
public class Hello {
    @Value("Spring")
    private String name;
    
    @Autowired
    @Qualifier("stringPrinter")
    private Printer printer;
    private List<String> names;
 
    public Hello() {
    }
 
    public Hello(String name, Printer printer) {
        super();
        this.name = name;
        this.printer = printer;
    }
 
    public List<String> getNames() {
        return names;
    }
 
    public void setNames(List<String> names) {
        this.names = names;
    }
 
//    public void setName(String name) {
//        this.name = name;
//    }
//
//    public void setPrinter(Printer printer) {
//        this.printer = printer;
//    }
 
    public String sayHello() {
        return "Hello " + name;
    }
 
    public void print() {
        this.printer.print(sayHello());
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
 
    <context:component-scan base-package="myspring.di.annot" />
</beans>
 
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package myspring.di.annot.test;
 
import static org.junit.Assert.assertEquals;
 
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 
import myspring.di.annot.Hello;
 
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations="classpath:config/annot.xml")
public class HelloBeanAnnotTest {
    @Autowired
    ApplicationContext context;
    
    @Test
    public void test() {
        Hello hello = context.getBean("hello",Hello.class);
        assertEquals("Hello Spring",hello.sayHello());
        
    }
}
 
cs


3. 프로퍼티(Property) 파일을 이용한 설정 방법

Properties 파일 및 Bean 설정파일 작성

1
2
3
4
5
6
7
myname=Spring
myprinter=printer
value1=AOP
value2=Spring
value3=DI
printer1=stringPrinter
printer2=consolePrinter
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package myspring.di.annot;
 
import java.util.List;
 
import javax.annotation.Resource;
 
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
 
@Component
public class Hello {
    @Value("${myname}")
    private String name;
 
    // @Autowired
    // @Qualifier("stringPrinter")
    @Resource(name = "${printer1}")
    private Printer printer;
    private List<String> names;
 
    public Hello() {
    }
 
    public Hello(String name, Printer printer) {
        super();
        this.name = name;
        this.printer = printer;
    }
 
    public List<String> getNames() {
        return names;
    }
 
    public void setNames(List<String> names) {
        this.names = names;
    }
 
    // public void setName(String name) {
    // this.name = name;
    // }
    //
    // public void setPrinter(Printer printer) {
    // this.printer = printer;
    // }
 
    public String sayHello() {
        return "Hello " + name;
    }
 
    public void print() {
        this.printer.print(sayHello());
    }
 
}
 
cs


1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
 
    <context:component-scan base-package="myspring.di.annot" />
    
    <context:property-placeholder location="classpath:config/value.properties"/>
</beans>
 
cs


학습정리

Bean 등록 메타정보 구성 전략

- XML 단독사용, XMl과 빈 스캐닝의 혼용

Bean 등록 및 의존관계 설정 Annotation

- @Component, @Repository, @Service, @Controller

- @Autowired, @Qualifier, @Value, @Resource

프로퍼티(property) 파일을 이용한 값 설정방법

- Properties 파일 작성, ${} 치환자 사용, <context:property-placeholder>


10강 사용자 관리 프로젝트


1. 사용자 관리 프로젝트 아키텍처

아키텍처 개요

- 대부분의 중, 대규모 웹 애플리케이션은 효율적인 개발 및 유지보수를 위하여 계층화(Layering)하여 개발하는 것이 일반적이다.

- 사용자관리 프로젝트 아키텍쳐에서 기본적으로 가지는 계층은 프리젠테이션 계층(Presentation Layer), 서비스 계층(Service Layer), 데이터액세스 계층(Data Access Layer) 3계층과 모든 계층에서 사용되는 도메인 모델 클래스로 구성되어 있다.

- 각각의 계층은 계층마다 독립적으로 분리하여 구현하는 것이 가능해야 하며, 각 계층에서 담당해야 할 기능들이 있다.

프리젠테이션 계층

↔

서비스 계층

↔

데이터액세스 계층

← 도메인 모델 클래스 →

- 위의 세 가지 계층은 독립적으로 분리할 수 있도록 구현해야 하며, 일반적으로 각 계층 사이에서는 인터페이스(Interface)를 이용하여 통신하는 것이 일반적이다.

- 프리젠테이션 계층

브라우저상의 웹크라이언트의 요청 및 응답을 처리

상위계층(서비스계층, 데이터 액세스계층)에서 발생하는 Exception에 대한 처리

최종 UI에서 표현해야 할 도메인 모델을 사용

최종 UI에서 입력한 데이터에 대한 유효성 검증(Validation) 기능을 제공

비즈니스 로직과 최종 UI를 분리하기 위한 컨트롤러 기능을 제공

@Controller 어노테이션을 사용하여 작성된 Controller 클래스가 이 계층에 속함

- 서비스 계층

애플리케이션 비즈니스 로직 처리와 비즈니스와 관련된 도메인 모델의 적합성 검증

트랜잭션(Transaction) 처리

프리젠테이션 계층과 데이터 액세스 계층 사이를 연결하는 역할로서 두 계층이 직접적으로 통신하지 않게 하여 애플리케이션의 유연성을 증가

다른 계층들과 통신하기 위한 인터페이스를 제공

Service 인터페이스와 @Service 어노테이션을 사용하여 작성된 Service구현 클래스가 이 계층에 속함

- 데이터 액세스 계층

영구 저장소(관계형 데이터베이스)의 데이터를 조작하는 데이터 액세스 로직을 객체화

영구 저장소의 데이터를 조회, 등록, 수정, 삭제 함

ORM(Object Relational Mapping) 프레임워크(MyBatis, Hibernate) 를 주로 사용하는 계층

DAO 인터페이스와 @Repository 어노테이션을 사용하여 작성된 DAO 구현 클래스가 이 계층에 속함

- 도메인 모델 클래스

관계형 데이터 베이스의 엔티티와 비슷한 개념을 가지는 것으로 실제 VO(Value Object) 혹은 DTO(Data Transfer Object) 객체에 해당

도메인 모델 클래스는 3개의 계층 전체에 걸쳐 사용

private으로 선언된 멤버변수가 있고, 그 변수에 대한 getter와 setter 메서드를 가진 클래스를 말함


2. 사용자 관리 프로젝트 클래스 설계

클래스의 역할

- 프리젠테이션 계층

UserController 클래스

UI계층과 서비스 게층을 연결하는 역할을 하는 클래스

JSP에서 UserController를 통해서 서비스 계층의 UserService를 사용하게 된다.

서비스 계층의 UserService 인터페이스를 구현하나 객체를 IoC 컨테이너가 주입해준다.

- 서비스 계층

UserService 인터페이스

서비스 계층에 속한 상위 인터페이스

UserServiceImpl 클래스

UserService 인터페이스를 구현한 클래스

복잡한 업무 로직이 있을 경우에는 이 클래스에서 업무 로직을 구현하면 된다.

데이터 액세스 계층의 UserDao 인터페이스를 구현한 객체를 IoC 컨테이너가 주입해준다.

- 데이터 액세스 계층

UserDao 인터페이스

데이터 액세스 계층에 속한 상위 인터페이스

UserDaoImplJDBC클래스

UserDao 인터페이스를 구현한 클래스로 이 클래스에서는 데이터 액세스 로직을 구현하면 된다.

SpringJDBC를 사용하는 경우에는 DataSource를 IoC 컨테이너가 주입해준다.

MyBatis를 사용하는 경우에는 SqlSession을 IoC 컨테이너가 주입해준다.


3. 사용자 관리 프로젝트 클래스 Code


학습정리

사용자 관리 프로젝트 아키텍쳐

- 프리젠테이션 계층, 서비스 계층, 데이터액세스 계층, 도메인 클래스

사용자 관리 프로젝트 클래스 설계

- 클래스 다이어그램, 각 클래스들의 역할

사용자 관리 프로젝트 클래스 Code

- 각 클래스들의 Code 살펴보기


11강 Spring JDBC 개요


1. 데이터 액세스 공통 개념

DAO(Data Access Object) 패턴

- 데이터 액세스 계층은 DAO 패턴을 적용하여 비즈니스 로직과 데이터 액세스 로직을 분리하는 것이 원칙이다.

- 비즈니스 로직이 없거나 단순하면 DAO와 서비스 계층을 통합 할 수도 있지만 의미 있는 비즈니스 로직을 가진 엔터프라이즈 애플리케이션이라면 데이터 액세스 계층을 DAO 패턴으로 분리해야 한다.

- DAO 패턴은 서비스계층에 영향을 주지 않고 데이터 액세스 기술을 변경할 수 있는 장점을 가지고 있다.


컨넥션 풀링을 지원하는 DataSource

- 컨넥션 풀링은 미리 정해진 개수만큼의 DB 컨넥션을 풀(Pool)에 준비해두고, 애플리케이션이 요청할 때마다 Pool에서 꺼내서 하나씩 할당해주고 다시 돌려받아서 Pool에 넣는 식의 기법이다.

- 다중 사용자를 갖는 엔터프라이즈 시스템에서라면 반드시 DB컨넥션 풀링 기능을 지원하는 DataSource를 사용해야 한다.

- Spring에서는 DataSource를 공유 가능한 Spring Bean으로 등록해 주어 사용할 수 있도록 해준다.


DataSource 구현 클래스 종류

- 테스트 환경을 위한 DataSource

SimpleDriverDataSource

- Spring이 제공하는 가장 단순한 DataSource 구현 클래스이다.

- getConnection()을 호출할 때마다 매번 DB 컨넥션을 새로 만들고 따로 풀(pool)을 관리하지 않으므로 단순한 테스트용으로만 사용해야 한다.

SingleConnectionDriverDataSource

- 순차적으로 진행되는 통합 테스트에서는 사용 가능하다.

- 매번 DB 커넥션을 생성하지 않기 때문에 SimpleDriverDataSource 보다 빠르게 동작한다.


DataSOurce 종류

- 오픈소스 DataSource

Apache Commons DBCP

- 가장 유명한 오픈소스 DB커넥션 풀(pool) 라이브러리이다.

- Apache의 Commons 프로젝트(http://commons.apache.org/dbcp/

c3p0 JDBC/DataSource Resource Pool

- c3p0는 JDBC 3.0스펙을 준수하는 Connection과 Statement 풀(pool)을 제공하는 라이브러리이다.

- c3p0 웹 사이트 (http://www.mchange.com/projects/c3p0/)

두 가지 모두 수정자(setter) 메서드를 제공하므로 Spring Bean으로 등록해서 사용하기 편리하다.


2. Spring JDBC 설치 및 DataSource 설정

- JDBC란?

JDBC는 모든 자바의 데이터 액세스 기술의 근간이 된다.

엔티티 클래스와 애노테이션을 이용하는 최신 ORM 기술도 내부적으로는 DB와의 연동을 위해 JDBC를 이용한다.

안정적이고 유연한 기술이지만, 로우 레벨 기술로 인식되고 있다.

간단한 SQL을 실행하는 데도 중복된 코드가 반복적으로 사용되며, DB에 따라 일관성 없는 정보를 가진 채로 Checked Exception으로 처리한다.

장점 : 대부분의 개발자가 잘 알고 있는 친숙한 데이터 액세스 기술로 별도의 학습 없이 개발이 가능하다

단점 : Connection과 같은 공유 리소스를 제대로 릴리즈 해주지 않으면 시스템의 자원이 바닥나는 버그를 발생시킨다.

- Spring JDBC란?

JDBC의 장점과 단순성을 그대로 유지하면서도 기존 JDBC의 단점을 극복할 수 있게 해주고, 간결한 형태의 API 사용법을 제공하며, JDBC API에서 지원되지 않는 편리한 기능을 제공한다.

Spring JDBC는 반복적으로 해야 하는 많은 작업들을 대신 해준다.

Spring JDBC를 사용할 때는 실행할 SQL과 바인딩 할 파라미터를 넘겨 주거나, 쿼리의 실행 결과를 어떤 객체에 넘겨 받을지를 지정하는 것만 하면 된다.

Spring JDBC를 사용하려면 먼저, DB 컨넥션을 가져오는 DataSource를 Bean으로 등록해야 한다.

- Spring JDBC가 해주는 작업

Connection 열기와 닫기

- Connection과 관련된 모든 작업을 Spring JDBC가 필요한 시점에서 알아서 진행한다.

- 진행 중에 예외가 발생했을 때도 열린 모든 Connection 객체를 닫아준다.

Statement 준비와 닫기

- SQL 정보가 담긴 Statement 또는 PreparedStatement를 생성하고 필요한 준비 작업을 해주는 것도 Spring JDBC가 한다.

- Statement도 Connection과 마찬가지로 사용이 끝나고 나면 Spring JDBC가 알아서 객체를 닫아준다.

Statement 실행

- SQL 담긴 Statement를 실행하는 것도 Spring JDBC가 해준다.

- Statement의 실행결과는 다양한 형태로 가져올 수 있다.

ResultSet Loop 처리

- ResultSet에 담긴 쿼리 실행 결과가 한 건 이상이면 ResultSet 루프를 만들어서 반복해주는 것도 Spring JDBC가 해주는 작업이다.

Exception 처리와 반환

- JDBC 작업 중 발생하는 모든 예외는 Spring JDBC 예외 변환기가 처리한다.

- 체크 예외(Checked Exception)인 SQLException을 런타임 예외(Runtime Exception)인 DataAccessException 타입으로 변환한다.

Transaction 처리

- Spring JDBC를 사용하면 transaction과 관련된 모든 작업에 대해서는 신경 쓰지 않아도 된다.


3. Spring JDBC의 JdbcTemplate 클래스

- JdbcTemplate 클래스

Spring JDBC가 제공하는 클래스 중 JdbcTemplate은 JDBC의 모든 기능을 최대한 활용할 수 있는 유연성을 제공하는 클래스이다.

JdbcTemplate이 제공하는 기능은 실행, 조회, 배치의 세 가지 작업이다.

- 실행 : Insert나 Update같이 DB의 데이터에 변경이 일어나는 쿼리를 수행하는 작업

- 조회 : Select를 이용해 데이터를 조회하는 작업

- 배치 : 여러 개의 쿼리를 한 번에 수행해야 하는 작업

- JdbcTemplate 클래스 생성

JdbcTemplate은 DataSource를 파라미터로 받아서 아래와 같이 생성할 수 있다.

JdbcTemplate template =new JdbcTemplate(dataSource);

DataSource는 보통 Bean으로 등록해서 사용하므로 JdbcTemplate이 필요한 DAO 클래스에서 DataSource Bean을 DI(의존관계 주입) 받아서 JdbcTemplate을 생성할 때 인자로 넘겨주면 된다.

JdbcTemplate은 멀티스레드 환경에서도 안전하게 공유해서 쓸 수 있기 때문에 DAO 클래스의 인스턴스 변수에 저장해 두고 사용할 수 있다.

- JdbcTemplate 클래스 생성 Code

아래의 코드는 일반적으로 사용되는 DAO 클래스의 기본구조이다.

DataSource에 대한 수정자 메서드에서 직접 JdbcTemplate객체를 생성해준다.

1
2
3
4
5
6
7
8
9
public class UserDAOJdbc {
    JdbcTemplate jdbcTemplate;
    
    @Autowired
    public void setDataSource(DataSource dataSource) {
        jdbTemplate = new JdbcTemplate(dataSource);
    }
...
}
cs

- JdbcTemplate 클래스의 update() 메서드

INSERT, UPDATE, DELETE와 같은 SQL을 실행할 때는 JdbcTemplate의 update() 메서드를 사용한다.

int update(String sql, [SQL 파라미터])

update() 메서드를 호출할 때는 SQL과 함께 바인딩 할 파라미터는 Object 타입 가변인자 (Object ... args)를 사용할 수 있다.

update() 메소드의 리턴되는 값은 SQL 실행으로 영향을 받은 레코드의 개수를 리턴한다.

- JdbcTemplate 클래스의 update() 메서드 Code

1
2
3
4
5
6
7
8
9
10
public int update(User user) {
    StringBuffer updateQuery = new StringBuffer();
    updateQuery.append("UPDATE USERS SET ");
    updateQuery.append("password=?, name=? ");
    updateQuery.append("WHERE id=?");
    
    int result = this.jdbcTemplate.update(updateQuery.toString(), user.getName(), user.getPassword(), user.getId() );
 
    return result;
}
cs

- JdbcTemplate 클래스의 queryForObject() 메서드

SELECT SQL을 실행하여 하나의 Row를 가져올 때는 JdbcTemplate의 queryForObject() 메서드를 사용ㅎ나다.

<T> T queryForObject(String sql, pSQL 파라미터], RowMapper<T> rm)

SQL 실행 결과는 여러 개의 칼럼(Column)을 가진 하나의 로우(Row)

T는 VO 객체의 타입에 해당된다.

SQL 실행 결과로 돌아온 여러 개의 column을 가진 한 개의 Row를 RowMapper 콜백을 이용해 VO객체로 매핑 해준다.

- JdbcTemplate 클래스의 queryForObject() 메서드 Code

1
2
3
4
5
6
7
8
9
10
11
12
13
public User findUser (String id) {
    return this.jdbcTemplate.queryForObject(
        "select * from users where id=?", new Object[] {id}, new RowMapper<User>() {
            public User mapRow(ResultSet rs, int rowNum) throws SQLException{
                User user = new User();
                user.setId(rs.getString("id"));
                user.setName(rs.getString("name"));
                user.setPassword(rs.getString("password"));
                return user;
            }
        }//RowMapper    
    );//queryForObject
}//findUser
cs

- JdbcTemplate 클래스의 query() 메서드

SELECT SQL을 실행하여 여러 개의 Row를 가져올 떄는 JdbcTemplate의 query() 메서드를 사용한다.

<T> List<T> query(String sql, [SQL 파라미터], RowMapper<T> rm)

SQL 실행 결과로 돌아온 여러 개의 column을 가진 여러 개의 Row를 RowMapper 콜백을 이용해 VO 객체로 매핑 해준다.

결과 값은 매핑 한 VO 객체를 포함하고 있는 List 형태로 받는다. List의 각 요소가 하나의 Row에 해당된다.


학습정리

데이터 액세스 공통개념

- DAO 패턴, 컨넥션 풀링, DataSource

Spring JDBC 개요

- JDBC 개요 및 장단점

- Spring JDBC 개요 및 역할

Spring JDBC의 JdbcTemplate 클래스

- JdbcTemplate 클래스의 update(), queryForObject(), query() 메서드


12강 Spring JDBC 


1. DB 설정 및 JDBC Driver 설치

DBA 권한으로 접속

- SQL Command 실행

- DBA권한으로 접속

conn sys as sysdba;   입력

password는 설치할 때 지정한 oracle11

- scott 계정 생성

create user scott identified by tiger default tablespace users temporary tablespace temp;

- scott 계정에 권한 주기

grant connect, resource to scott;

DB users 테이블 생성

- scott 계정으로 접속 후 users 테이블 생성

conn scott/tiger

start c:\springframework\user.sql;

Oracle Jdbc Driver 라이브러리 검색 및 설치

- http://mvnrepository.com에 접근한다.

- oracle ojdbc6로 검색한다.

- oracle jdbc 12.1.0.1 버전을 pom.xml에 추가한다.


2. Spring JDBC 설치 및 DataSource 설정

Spring JDBC 설치

- http://mvnrepository.com에 접근한다.

- spring jdbc로 검색한다.

- oracle jdbc 3.2.17 버전을 pom.xml에 추가한다.


DataSource를 Spring Bean으로 등록하여 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
myname=Spring
myprinter=printer
value1=AOP
value2=Spring
value3=DI
printer1=stringPrinter
printer2=consolePrinter
db.driverClass=oracle.jdbc.OracleDriver
db.url=jdbc:oracle:thin:@127.0.0.1:1521:xe
db.username=scott
db.password=tiger
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
 
    <context:property-placeholder location="classpath:config/value.properties" />
 
    <!-- DataSource 설정 -->
    <bean id="dataSource"
        class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="${db.driverClass}" />
        <property name="url" value="${db.url}" />
        <property name="username" value="${db.username}" />
        <property name="password" value="${db.password}" />
    </bean>
 
    <bean id="hello2" class="myspring.di.xml.Hello">
        <constructor-arg index="0" value="${myname}" />
        <constructor-arg index="1" ref="${myprinter}" />
        <property name="names">
            <list>
                <value>${value1}</value>
                <value>${value2}</value>
                <value>${value3}</value>
            </list>
        </property>
    </bean>
 
    <!-- <context:property-placeholder location="classpath:config/database.properties" 
        /> <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource"> 
        <property name="driverClass" value="${db.driverCLass}" /> <property name="url" 
        value="${db.url}" /> <property name="username" value="${db.username}" /> 
        <property name="password" value="${db.password}" /> </bean> <bean id="dataSource" 
        class="org.springframework.jdbc.datasource.SimpleDriverDataSource"> <property 
        name="driverClass" value="com.sql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost/testdb" 
        /> <property name="username" value="spring" /> <property name="password" 
        value="book" /> </bean> -->
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spring" />
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer" />
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


3. 사용자관리 프로젝트 실행

사용자관리 프로젝트의 Bean 등록 및 의존관계 설정

- <context:component-scan> 태그 사용

- @Service, @Repository 어노테이션을 선언한 클래스들과 @Autowired 어노테이션을 선언하여 의존관계를 설정한 클래스들이 위치한 패키지를 Scan 하기 위한 설정을 XML에 해주어야 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd">
 
    <context:property-placeholder location="classpath:config/value.properties" />
    <!-- component scan 설정 -->
    <context:component-scan base-package="myspring.user" />
 
    <!-- DataSource 설정 -->
    <bean id="dataSource"
        class="org.springframework.jdbc.datasource.SimpleDriverDataSource">
        <property name="driverClass" value="${db.driverClass}" />
        <property name="url" value="${db.url}" />
        <property name="username" value="${db.username}" />
        <property name="password" value="${db.password}" />
    </bean>
 
    <bean id="hello2" class="myspring.di.xml.Hello">
        <constructor-arg index="0" value="${myname}" />
        <constructor-arg index="1" ref="${myprinter}" />
        <property name="names">
            <list>
                <value>${value1}</value>
                <value>${value2}</value>
                <value>${value3}</value>
            </list>
        </property>
    </bean>
 
    <!-- <context:property-placeholder location="classpath:config/database.properties" 
        /> <bean id="dataSource" class="org.springframework.jdbc.datasource.SimpleDriverDataSource"> 
        <property name="driverClass" value="${db.driverCLass}" /> <property name="url" 
        value="${db.url}" /> <property name="username" value="${db.username}" /> 
        <property name="password" value="${db.password}" /> </bean> <bean id="dataSource" 
        class="org.springframework.jdbc.datasource.SimpleDriverDataSource"> <property 
        name="driverClass" value="com.sql.jdbc.Driver" /> <property name="url" value="jdbc:mysql://localhost/testdb" 
        /> <property name="username" value="spring" /> <property name="password" 
        value="book" /> </bean> -->
 
    <bean id="hello" class="myspring.di.xml.Hello">
        <!-- setName(name) -->
        <property name="name" value="Spring" />
        <!-- setPrinter(Printer) -->
        <property name="printer" ref="printer" />
    </bean>
 
    <bean id="printer" class="myspring.di.xml.StringPrinter" />
    <bean id="consolePrinter" class="myspring.di.xml.ConsolePrinter" />
</beans>
 
cs


DataSource 설정 테스트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
package myspring.user.test;
 
import static org.junit.Assert.assertEquals;
 
import java.sql.SQLException;
 
import javax.sql.DataSource;
 
import org.junit.Ignore;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
 
import myspring.user.service.UserService;
import myspring.user.vo.UserVO;
 
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = "classpath:config/beans.xml")
public class UserClient {
    @Autowired
    ApplicationContext context;
    @Autowired
    UserService service;
 
    @Test
    @Ignore
    public void updateUserTest() {
        service.updateUser(new UserVO("gildong", "홍길동2", "남2", "서울2"));
 
        UserVO user = service.getUser("gildong");
        System.out.println(user);
    }
 
    @Test
    @Ignore
    public void insertUserTest() {
        service.insertUser(new UserVO("dooly", "둘리", "남", "경기"));
 
        for (UserVO user : service.getUserList()) {
            System.out.println(user);
        }
    }
 
    @Test
    @Ignore
    public void getUserTest() {
        UserVO user = service.getUser("gildong");
        System.out.println(user);
        assertEquals("홍길동", user.getName());
    }
 
    @Test
    @Ignore
    public void dataSourceTest() {
        DataSource ds = (DataSource) context.getBean("dataSource");
        try {
            System.out.println(ds.getConnection());
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
 
    @Test
    @Ignore
    public void deleteUserTest() {
        service.deleteUser("dooly");
 
        for (UserVO user : service.getUserList()) {
            System.out.println(user);
        }
    }
 
}
 
cs


학습정리

DB 설정 및 JDBC Driver 설치

- DB 접속 계정 생성 및 테이블 생성

- Oracle JDBC Driver 설치

Spring JDBC 설치 및 DataSource 설정

- Spring JDBC 라이브러리 설치

- DataSource 설정

사용자관리 프로젝트 테스트

- 사용자 관리 프로젝트 실행

- 사용자 조회, 등록, 목록조회, 수정, 삭제 테스트



'Legend 개발자 > T아카데미' 카테고리의 다른 글

모바일 GUI 디자인  (0) 2017.09.05
UX/UI 기획  (0) 2017.09.04
jQuery (JavaScript)  (0) 2017.09.02
컴퓨터 알고리즘 중급  (0) 2017.08.31
JavaScript  (0) 2017.08.30
Posted by 전설의아이
|

모바일 GUI 디자인

Legend 개발자/T아카데미 2017. 9. 5. 11:54

1강 모바일과 UX/UI/GUI의 이해(1)


1. 모바일 서비스의 이해

- 모바일 서비스의 의미와 특성

스마트폰에서 매일 사용하는 서비스의 종류는 몇 가지일까요?

스마트폰에서 매일 사용하는 서비스의 구분

- 어플리케이션 = '프로그램'을 의미하며, 줄여서 '앱'이라고도 함

- 웹 브라우저 = 인터넷 서핑 전용 앱

기술 구현 방식에 차이가 있지만, 사용자에게 어떤 접근 경로로 다가갈 것인지를 우선으로 판단하여 형태를 결정하는 것을 권장한다. 이에 따라 실제 디자인 방법은 확연하게 달라지게 된다.

모바일 앱과 모바일 웹의 장단점 비교

모바일 앱과 모바일 웹은 장단점이 있으므로 장단점을 이해할 수 있어야 한다.

모바일 앱(네이티브 앱)의 특성

- 사용자 스마트폰 스크린에 노출되며, 앱 아이콘을 누르면 바로 연결되는 장점이 있다.

- 모바일 운영체제별 별도 제작 : 타 운영체제에 사용 불가

애플iOS : 오블젝티브-C / 스위프트, Xcode, 애플 앱스토어

구글 안드로이드 OS : 자바, 안드로이드 스튜디오, 구글 플레이 및 안드로이드 마켓

- 디바이스의 다양한 센서, 기능, 프레임워크를 사용 가능

- 앱 마켓을 통한 구매 필수

모바일 웹의 특성

- 사용자가 사용하는 웹 브라우저 앱을 통해 접속하며 별도의 주소를 입력해야 실행된다.

- 다양한 해상도 대응 방식으로 제작 : 원소스 멀티 유즈 가능

- HTML, CSS, JavaScript 등의 언어로 제작

- 디바이스의 다양한 센서, 기능들 사용 불가(일부 기능은 가능)

보안상의 이유로 하드웨어 및 시스템 접근 제한됨

- 앱 마켓에 노출되지 않음

하이브리드 모바일 앱

- 앱의 장점과 웹의 장점을 합친 방식으로써, 폰갭, 센차터치 등의 별도 기술을 활용하여 웹 결과물을 앱으로 패키징한다.

- 매번 웹에서 콘텐츠 등을 불러오므로 퍼포먼스는 떨어지는 편

- 앱 마켓 등록 가능

- 주로 콘텐츠가 인터넷 중심일 경우 주로 사용하며, 최근엔 완성도가 높아져 네이티브 앱과 거의 구분이 안되는 편

모바일 앱, 모바일 웹, 하이브리드 모바일 앱 비교

- 장단점이 있으므로 구체적인 차이점을 이해하기 위해서는 추후 개발자와 협의를 권장한다.

실제 프로젝트 진행시, 네이티브 앱, 모바일 웹, 하이브리드 모바일 앱의 선택(기술 구현 방식)에 따라, 디자인 및 이미지 작업이 달라지므로, 프로젝트 시작 전에 구체적으로 파악해야 할 필요가 있다.

게임 엔진을 활용한 앱 개발

- 유니티, 언리얼 등의 게임 개발 앱은, 개발 후 다양한 플랫폼으로 변환해주는 기능을 제공해주고 있다.

- 게임 장르에 주로 한정(주로 이미지, 사운드 등을 집중적으로 다루는 데 능함)

- 텍스트 및 많은 양의 정보를 다루는 경우의 앱일 경우 권장하지 않음

- 개발 후, 다양한 플랫폼에 맞추어 export 가능

- http://unity3d.com

- http://unrealengine.com

- 게임 엔진을 활용한 앱 개발로 크로스플랫폼 네이티브 앱을 개발하는 내용도 있다.


2. 모바일 운영체제의 이해와 관련 사이트

- 한국의 모바일 운영체제 점윤율

구글 안드로이드 OS 약 75%, 애플 iOS 약 23% 점유율을 보이고 있다.(2016년 1월 기준)

- 모바일 운영체제별 특징

구글 안드로이드 OS, 애플 iOS는 각 회사의 관점에 따라 스마트폰의 UX/UI/GUI 및 기능 등을 다르게 구성하고 있으므로, 디자인 및 기획을 위해서는 공통점 및 차이점을 정확히 이해하는 것이 중요하다.

공통점 

- 손으로 쥐고 사용하는 디바이스, 터치 및 제스처에 최적화

- 콘텐츠, 콤포넌트가 터치 및 핸드 헬드 디바이스에맞게 구성

- 상/하단에 운영체제 특유의 바 및 주요 요소 배치

- 각 운영체제별 마켓 존재

- 마켓 앱 구매 → 아이콘 터치 → 실행 과정

차이점 

- 디자인 스타일

- 인터랙션

- 타이포그래피

애플 iOS 디폴트 영문 폰트 San Francisco

구글 머티리얼 디자인 디폴트 영문 폰트 Roboto

- 하드웨어

애플 아이폰 6S

구글 넥서스 5X 안드로이드 폰

- 기능, 이미지 구현 방법 등

- 구글 안드로이드 OS 공식 사이트

http://design.google.com/resources  →  Naterial Design Gudelines

디자인, 기획을 위해서는 구글 디자인 가이드 사이트를 참조해야 한다.

- 애플 iOS 공식 사이트

http://developer.apple.com/ios

애플의 개발자 사이트 내의 iOS → 라이브러리를 통해서 관련 정보를 습득할 수 있다.


학습정리

모바일 서비스의 이해

 - 모바일 서비스의 구분 : 모바일 디바이스에 있는 서비스는 크게 모바일 운영체제에 특화된 네이티브 앱과 웹 브라우저를 통한 콘텐츠로 나눌 수 있다.

 - 모바일 앱 (네이티브 앱), 모바일 웹, 하이브리드 모바일 앱, 게임 엔진 : 각 방식 별로 장단점이 존재하며, 그에 따라 디자인 방식이 바뀌므로 프로젝트 진행시에는 항상 개발팀과 상의하며 진행한다.

 - 구현 방식에 따른 디자인 및 후작업의 차이점 : 어떠한 형태, 기능, 기술 등을 사용하느냐에 따라 구현, 기획, 디자인 방식들도 달라지게 되므로, 실제 디자인시에 어떠한 기술로 개발 구현되는지도 항상 체크해야 한다.

모바일 운영체제의 이해와 관련 사이트

 - 한국 모바일 운영체제 점유율 : 모바일 서비스를 기획하고 디자인하게 될 경우, 실질적인 모바일 운영체제 점유율을 근거로 하여 높은 점유율을 보이고 있는 운영체제를 우선 대상으로 하는 것을 추천한다.

 - 운영체제의 공통점, 차이점 : 모바일 운영체제의 공통점과 차이점을 구체적으로 학습하여, 이를 기반으로 기획/디자인을 효과적으로 할 수 있도록 한다.

 - 구글 안드로이드 머티리얼 디자인, 애플 iOS 디자인 : 각 운영체제별로 사이트를 운영하고 있다. 이를 통해 디자인을 위한 필요 정보들을 얻을 수 있다.


2강 모바일과 UX/UI/GUI의 이해(2)


1. 모바일 구성 요소와 디자인 프로세스

- 모바일 구성 요소의 이해

모바일 디자인 및 기획시 고려해야 하는 사항

- 프로젝트의 목표 : 매출 목표 외에도 달성하고자 하는 목표 (다운로드 수, 긍정적 리뷰 수 등), KPI(Key Performance Indicator) 등

- UX/UI/GUI : 구체적인 사용자에게 어떠한 경험, 콘텐츠, 기능, 디자인을 제공할 것인지 고민하고 적용하는 영역

- 운영체제 지원 : 1개 운영체제를 지원할 것인지, 다수 지원할 것인지

- 디바이스(해상도) 대응 : 디바이스 종류에 따른 해상도 대응의 범위

- 마켓(경쟁 관계) 리서치 : 마켓의 동향 및 경쟁 관계 분석 등

디자인 프로세스의 이해

- 일반적으로 기획 → 개발 → GUI 디자인 → 마케팅 순으로 진행한다. UX, UI를 특히 고려한다면 어느 위치에 들어가는지 고민해볼 필요가 있다.

- 에자일 개발, 린 UX, 디자인 씽킹 등은 디자인 프로세스의 하나로써 개발/디자인/기획 등에 필요한 구체적인 진행 단계 및 업무를 의미한다.

- 개발자, 디자이너, 기획자, 마케터 등 다양한 영역의 사람들이 모여서 진행

개발자 : 서비스의 기능 구현을 책임진다.

디자이너 : 일반적으로 GUI 디자이너만을 칭하는 경우가 잦다. 경우에 따라 UX/UI 디자이너가 별도로 존재하기도 한다.

기획자 : 일반적으로 콘텐츠, 기능을 통합하는 역할을 맡으며, UI 시나리오 작성 및 프로젝트 기획을 진행하는 경우가 잦다.

마케터 : 수익과 관련된 부분을 책임진다. 마켓 분석, 홍보, 트렌드 분석 등을 주로 한다.


2. 모바일 UX/UI/GUI의 이해

- UX/UI/GUI 이해의 필요성

- 디지털 제품을 디자인할 때는 누가 쓰는지를 잊고 만들게 된다. 

- 만드는 사람들은 다 각자 생각하는 제품의 완성형 모델이 다르다.

- 모바일은 보이지 않는 디지털 제품/서비스를 만드는 것이므로 작업 과정을 구체화하는 필요성이 대두되었고, 그에 따라 더욱 UX/UI/GUI가 구체화 되었다.

- UX, 사용자 경험의 이해 

- 사용자 경험은 사용자가 제품을 사용하는 모든 상황에 있어 만족하는 가치를 전달하는 것이 주 목표이나, 단순하게 사용자의 니즈/가치만을 도출하는 것이 목표가 아니라, 이를 내부의 목표와 기술적 가능성과도 균형을 맞추는 것이 주된 목표라 할 수 있다.

- UX = Union( Technology, User Needs, Business Goals ) 

- 따라서 UX 디자인에서는 사용자 및 관련 분야의 리서치를 주업무로 진행한다. 인터뷰, 설문, 관찰 등의 질적/양적 리서치를 진행하며, 이를 통해 페르소나, 요구 사항 리스트 등을 도출한다. 이를 기반으로 UI/GUI 업무가 진행된다.

- 구체화 되지 않은 내용들을 구체화/가시화 하는 업무이므로 대부분은 스케치, 포스트잇 등을 통해 업무가 진행되게 된다.

- UI, 유저 인터페이스의 이해

- UI는 유저 인터페이스, 즉 사용자가 제품과 맞닿는 지점을 의미하며 다양한 UI가 존재한다. PUI, AUI, GUI등의 요소가 있으며, 이를 포괄하여 UI로 총칭한다.

- 조작 방식과 디바이스(시스템)의 피드백 반응에 대한 인터랙션 디자인을 포괄하는 것으로 설명하기도 한다. 모바일은 터치 및 제스처로 조작되며, 이에 따른 모바일 디바이스의 반응을 인터랙션이라 한다.

- 모바일의 PUI는 대부분 표준화되어 있으며, 조작 방식 또한 표준화 됨에 따라 실제 기획/디자인할 때에는 화면의 레이아웃과 네비게이션을 기획하는 UI 디자인 단계 → 시각으로 구체화 표현되는 GUI 디자인 순으로 진행한다.

- GUI, 그래픽 유저 인터페이스의 이해

- GUI는 그래픽 유저 인터페이스로써, UI 기획 문서를 기준 근거로 하여 구체적인 시각 디자인을 의미한다. 컬러 타이포그래피, 레이아웃, 아이콘 등이 주요 작업 요소이다.


학습정리

모바일 구성 요소와 디자인 프로세스

 - 모바일 구성 요소 : 모바일 디자인 및 기획을 하기 위해서는 다양한 구성 요소에 대해서 알아야 한다. 이러한 각 요소들을 빠짐 없이 체크하며 자신의 역할을 충분히 해낼 수 있어야 하겠다.

 - 디자인 프로세스 : 여러 파트의 사람들이 모여서 모바일 서비스를 개발 하는 것이 일반적이므로, 어떠한 프로세스로 개발을 진행하고 디자인을 진행하는지를 구체적으로 파악해야 한다.

모바일 UX/UI/GUI의 이해

 - UX/UI/GUI 이해의 필요성 : 모바일 서비스는 디지털 제품이며, 아날로그 제품과 달리 제품의 사용자, 조작 방식 등이 보이지 않는 제품 서비스이므로, 이를 구체화하기 위해 그 작업 영역인 UX/UI/GUI를 구체적으로 이해할 필요가 있다.

 - UX, 사용자 경험의 이해 : UX는 사용자가 제품/서비스를 사용하는 부분에 있어 만족할 수 있는 가치를 연구/기획/구성하는 단계이며, 사용자뿐만 아니라 비즈니스 및 기술적인 부분도 조화를 이룰 수 있도록 구성한다.

 - UI, 유저 인터페이스의 이해 : 사용자가 맞닿는 모든 부분을 유저 인터페이스라 할 수 있다. PUI, AUI, GUI, 영역이 포함되며, 인터랙션 디자인 영역도 포함하여 설명하는 경우가 잦다.

 - GUI, 그래픽 유저 인터페이스의 이해 : GUI는 그래픽 유저 인터페이스로써 UI 기획 문서를기준으로 하여 유저 인터페이스를 시각적으로 표현하는 작업 단계를 의미한다. 모바일 디바이스를 대상으로 한 컬러, 타이포그래피, 레이아웃, 아이콘 등을 구체적으로 작업한다.


3강 모바일과 GUI 디자인(1)


1. 서비스 목적과 사용자의 이해

- 모바일 서비스의 구체적인 목적과 사용자의 이해

모바일 서비스 목적의 이해

①서비스의 목적

- 브랜드 서비스, 유틸리티 앱, 콘텐츠 서비스, 게임 등의 속성을 명확히 정해야 한다.

- 서비스의 목적을 명확히 함으로써 기능, 구조 등을 명확히 할 수 있다.

- 구체적인 상황에 대한 효과적인 솔루션을 제공해줄 수 있다.

- 내부 팀원들의 커뮤니케이션에도 도움을 줄 수 있다.

②세부 사항 파악

- 카테고리적 특성 : 쇼핑, SNS, 교육, 아동, 유틸리티 등, 속한 카테고리에 따라 사람들이 일반적으로 생각할 수 있는 구조, 레이아웃, 컬러 등의 특성을 포함한다.

- 모바일 특성 반영 : 손으로 들고 다니는 폰, 커뮤니케이션 툴, 다양한 상황 속에서의 사용, 작은 화면, 카메라 촬영 가능 등 ( 예제 : 김기사 앱 vs 아이나비 빌트인 네비게이션 )

③경쟁 차별화 포인트

- 브랜드적인 측면으로써, 다른 서비스와 구별될 수 있는 구체적인 측면, 개발, 기획, 디자인 등 각 팀별로 차별화 포인트를 도출해야 한다.

④기능 & 콘텐츠 리스트 업

- 구체적으로 어떠한 기능과 콘텐츠를 제공할 것인지 리스트업 및 전략을 세우도록 한다. 경쟁 서비스도 반드시 비교하여 체크한다.

모바일 앱의 대상(사용자, 오디언스) 이해의 필요성

- 참조

- 먼저 개발에 따른 기획적 특성인 내부의 '목적'을 구체화하고 난후, 직접 서비스를 사용하는 사용자/오디언스에 '누구에게') 맞추어 디자인하는 것을 권장한다.

- 서비스를 기획한 사람이 절대적 사용자가 되는 경우가 많지 않기 때문에, 실제 그 서비스를 사용하는 사람을 대상으로 생각하는 것이 중요하다.

- 디자인 파트에서 또한 이러한 기획적 측면을 이해하고, 구체적 사용자/오디언스에 맞추어 UI/GUI 디자인을 진행하여야 한다.

사용자와 오디언스의 개념 이해

- 사용자 : 좁은 의미, 구체적 단일 특성을 가진 특수 대상 고객

- 오디언스 : 넓은 의미, 일반적이고 보편적 특성을 가진 일반 대상의 고개

- 앱 디자인시, 사용자가 선호하는 디자인적인 특성을 고려하여 기획, 디자인, 콘텐츠 등을 구성해야 한다.

- 사용자의 적용 : UX 디자인 등을 통해 구체적인 사용자가 지정될 경우 이러한 내용을 근거로 하여 구체적인 디자인 이슈를 도출할 수 있다.

- 오디언스의 적용 : UX 디자인 등의 업무를 통해 구체적인 사용자가 지정되지 않을 경우 (혹은 지시사항 등이 없을 경우), 개략적인 사용자 집단인 오디언스를 구성하여 그에 맞는 디자인을 진행하는 것을 권장한다.


2. 모바일 컬러, 타이포그래피, 레이아웃

- 컬러, 타이포그래피, 레이아웃의 중요성

컬러, 타이포그래피, 레이아웃 = 통합 디자인

모바일의 컬러, 타이포그래피, 레이아웃은 시각디자인의 요소로써 개별적으로 나누어 볼 수 있으나, 최종적으로는 모든 요소가 조화롭게 디자인 되는 것을 목표로 하고 있으므로 통합 디자인 관점의 이해를 할 필요가 있다.

컬러, 타이포그래피, 레이아웃의 세부 작업

다만 실제 디자인 작업 시에는, 각 요소들을 개별적으로 분석하고 이해하고 적용할 필요가 있으므로 유의한다. 아울러 이러한 요소들은 관계 앱들의 리서치를 통해 일반적인 의미의 사용 및 차별화 포인트를 도출할 수도 있다.

- 서비스의 목적과 오디언스에 따른 컬러, 타이포그래피, 레이아웃

사용자와 오디언스의 개념 이해

- 사용자, 오디언스에 따른 UI/GUI 디자인 적용

사용자, 오디언스에 따라 서비스의 구체적인 기능, 테스크, 콘텐츠, 인포메이션 디자인을 진행 → 본격적인 UI/GUI 디자인 작업 이전에 관련 내용으로 리서치할 필요가 있다. 이러한 리서치를 통해 객관성을 확보할 수 있으며, 디자이너 개인 취향에만 따르는 디자인을 방지할 수 있다.

- 대상, 목적, 디바이스 → UI/GUI 디자인

- 모바일 디자인시에는 반드시, 서비스의 목적과 오디언스(혹은 사용자)에 맞추어 디자인을 진행하여야 한다.

사용자, 오디언스에 따른 UI/GUI 디자인 사례

- Sago Mini Friends

- the Lonely Beast ABC (글자수 적음 단순)

- Clash of Clans (요소가 다양함)

- Galaxy on Fire

- amazon (컬러가 많이 사라지고 제품 위주)

- coupang (목적우선 앱)

대상, 목적, 디바이스의 특성에 맞는 UI/GUI 디자인

- 이처럼 대상과 목적 그리고 디바이스의 특성에 맞추어 UI/GUI 디자인을 전개하는 것을 권장한다.


학습정리

서비스의 목적과 사용자의 이해

 - 모바일 서비스의 목적 이해 : 서비스의 구체적인 목적을 명확히 하고 카테고리 범주, 구체적인 기능과 콘텐츠리스트 등을 작성하여 내부 프로젝트 팀의 진행 방향을 명확하게 하는데 도움을 줄 수 있다.

 - 사용자 : 오디언스보다 구체적으로 사용자에 대한 리서치 및 UX 디자인이 이루어질 경우에는 사용자에 대해 좀 더 명확한 정보와 방향성을 얻을 수 있다. 이 경우 사용자에게 구체적으로 필요한 항목들을 도출하여 디자인에 반영할 수 있도록 한다.

 - 오디언스 : 별도의 리서치 없이 내부적으로 추정에 의해 사용자 집단을 규정하는 것을 뜻한다. 대략적인 개념의 사용자 집단인 오디언스로 규정하여 필요 항목들을 도출하여 디자인에 반영하는 것을 권장한다. 

모바일 컬러, 타이포그래피, 레이아웃

 - 컬러 타이포그래피, 레이아웃 = 통합 디자인/세부 디자인 : 실제 디자인시에는 컬러, 타이포그래피, 레이아웃을 전체적으로도, 세부적으로도 조화롭게 될 수 있도록 노력해야 한다.

 - 서비스의 목적과 오디언스에 따른 컬러, 타이포그래피, 레이아웃 : 구체적인 UI/GUI 디자인을 위해서는 컬러, 타이포그래피, 레이아웃을 디자인할 시, 서비스의 목적과 대상, 그리고 디바이스의 특성에 맞추어 디자인을 진행해야 한다.


4강 모바일과 GUI 디자인(2)


1. 모바일 운영체제에 따른 GUI 디자인

- 운영체제와 GUI 디자인

 운영체제와 GUI 디자인 FAQ

Q - 모바일 서비스를 개발하기로 하였다면, 그 다음 단계는 무엇인가?

A - 일반적으로 구체적인 UI 기획안을 작업하게 되며, 그리고 안드로이드와 아이폰 중 일부만 개발할 것인지, 아니면 둘 다 개발할 것인지를 결정하게 된다.

Q - 아이폰과 안드로이드폰, 어느 쪽을 먼저 개발하는지에 대해 어떻게 결정하는가?

A - 한국에서는 안드로이드폰 점유율이 높은 관계로, 일반적으로는 안드로이드를 먼저 개발한다.

Q - 디자인 및 디자인 스타일은 어떻게 결정하는가?

A - 어느 쪽의 운영체제를 우선 개발하느냐로 보통 결정되며, 해당 운영체제의 디자인 스타일을 따라가게 되는 편이다.

Q - 안드로이드에 맞추어 디자인을 다하고 나서, 아이폰을 지원하는데 어려움을 겪지는 않는가?

A - 안드로이드일 경우, 머티리얼 디자인 스타일을 따라가게 되는데 실제 아이폰의 디자인 스타일과 차이가 많이 나며, 머티리얼 디자인을 아이폰에 그대로 적용할 경우네는 많은 부분에서 문제가 될 수 있다.

Q - GUI 디자인에 대한 부분은 어떻게 진행되는가?

A - GUI 디자이너를 제외한 다른 파트에 있는 사람들은 비 디자이너이므로, GUI 디자인에 대한 부분은 전적으로 GUI 디자이너가 진행해야 한다. 즉, 컬러, 타이포그래피, 레이아웃, 아이콘 등의 부분은 GUI 디자이너가 작업해야 하며, 모바일 운영체제에 대한 사전 지식과 경험이 필요하며 경우에 따라서는 추가적인 리서치를 진행해야 하는 경우도 잦다.

운영체제와 GUI 디자인 스타일 결정

- 각 운영체제별로 디자인 스타일의 특징과 차이점을 명확히 이해해야 한다.

진행시 2가지 방식으로 디자인 스타일을 결정할 수 있다.

- 운영체제 최적화 디자인 방식 : 각 운영체제별 디자인 스타일에 맞추는 방식

- 운영체제 중립화 디자인 방식 : 공통 요소는 같이 쓰고, 최소한의 요소만 대응하는 방식

- 운영체제 최적화/중립화 GUI디자인

운영체제 최적화 디자인 방식

운영체제 중립화 디자인 방식

- 운영체제 디자인 스타일 결정

최적화 선택시

장점 : 사용자가 자신의 스마트폰에 최적화된 경험을 할 수 있다.

단점 : 비용(시간, 인력 등)이 많이 든다

중립화 선택시

장점 : 디자인 작업이 최적화보다 덜 들어간다

단점 : 대응 운영체제에 대한 지식/경험이 필요하다.

운영체제별 디자인 스타일을 대응하기 위해서는

- 운영체제별 스마트폰을 다 사용해본다

- 경쟁 서비스의 운영체제별 대응을 확인한다.

- 아이폰, 안드로이드폰 서비스를 비교하여 사용해본다

- 운영체제별 디자인 사이트의 디자인 관련 내용을 숙지한다

- 인터넷 정보만으로는 세부적인 내용을 확인할 수 없으므로, 스마트폰을 구해서 앱을 다운 받아서 확인해보는 방법을 권장한다.


학습정리

모바일 운영체제에 따른 GUI 디자인

 - 운영체제와 GUI 디자인 : 운영체제별로 GUI 디자인 스타일이 다르므로, 실제 GUI 디자인 진행시에는 운영체제에 적합한 디자인 스타일로 디자인하는 것이 필요하다

 - 운영체제 최적화/중립화 GUI 디자인 : 운영체제에 디자인 스타일을 적용하는 방식은 크게 최적화/중립화 방식으로 나눌 수 있으며, 이를 위해서는 운영체제별 스마트폰을 통해 서비스를 사용해보고 운영체제별 디자인 스타일 가이드를 명확하게 이해하는 것이 필요하다


5강 모바일 UI/GUI 디자인 컴포넌트 (1)


1.구조 구성 컴포넌트

- 모바일 컴포넌트의 이해

아래와 같은 모바일 디바이스의 특성에 따라 컴포넌트들은 표준화 되었으며, 이러한 차이가 웹 디자인과 비교하였을 때 가장 큰 차이점이라 할 수 있다.

작은 디스플레이, 손으로 들고 사용하는 방식, 손가락으로 조작

모바일은 웹 디자인과 달리 다양한 컴포넌트들이 표준화 되어 있다. 크게 범위를 나눈다면, 아래의 4가지 범주로 나누어 볼 수 있다.

구조 구성 컴포넌트, 콘트롤 컴포넌트, 콘텐츠 디자인, 아이콘 디자인

- 아이폰 : 

스테이터스 바

- 아이폰의 스테이터스 바는 투명하게 적용되며, 네비게이션 바와 합쳐서 보여진다. 디폴트는 검정 글자이며 횐색으로 적용할 수도 있다. 

네비게이션 바

- 아이폰의 네비게이션 바 또한 투명하게 적용되며, 스테이터스 바와 합쳐서 보여진다. 네비게이션 바를 통해 중앙에 현재 위치, 좌측에 이전 위치, 우측에 추가 기능(툴바)을 배치한다.

- 텍스트만으로 표현이 되므로, 글자 간의 충분한 간경이 나오는지 항상 확인한다.

- 네비게이션 바의 디자인 스타일은 모든 페이지에서 동일하게 표현되도록 한다.

- 앱 구조상의 최상단에 위치할 경우, 혹은 적은 페이지의 경우는 현재 위치를 별도로 표현하지 않기도 한다.

- 필요에 따라서는, 프롬프트 창을 띄워서 기존의 페이지를 덮고 특정 행동을 취하게 할 수 있다. 그럴 경우 프롬프트 입력 창이 네비게이션 바에 나타난다.

- 사용자가 콘텐츠에 집중하고자 할 때에는 네비게이션 바를 사라지게 할 수도 있다. 지도 앱의 경우 전체 화면을 제공하기 위해, 화면을 탭하면 네비게이션 바와 툴바가 사라진다.

툴 바

- 네비게이션 바 우측, 혹은 화면 최하단에 액션을 수행하는 아이콘의 형태로 툴 바가 위치한다. 하단에 배치된 툴 바의 경우 키보드가 나타날 때 화면에서 키보드에 가려지는 형태가 되기도 한다.

- 아이패드의 경우 네비게이션 바가 길기 때문에 우측에 다양한 아이콘을 배치하기도 한다.

탭 바

- 하단의 탭 바를 통해서 다른 페이지 뷰로 이동하거나, 모드 혹은 별도의 액션을 실행하기도 한다.

- 5개 이상의 아이콘은 배치하면 안되고, 5개 이상일 경우는 More 아이콘에 관련 내용을 넣는다.

- 가로모드/세로모드 모두 동일한 갯수의 탭 바 아이콘을 제공해야 한다.

서치 바

- 서치 바를 통해서 사용자들은 서치와 관련된 텍스트를 입력할 수 있다.

- 필요에 따라 입력한 텍스트에 대한 Clear 버튼을 배치할 수도 있다.

- 별도의 텍스트 정보를 제공하고자 할 경우, 프롬프트(텍스트 정보 제공)를 제공한다.

스코프 바

- 스코프 바는 일반적으로 서치바와 함께 사용되며, 서치의 범주를 설정하는 데 사용된다.

- 안드로이드폰

툴 바

- 툴 바는 굉장히 다양하게 사용이 된다. 디폴트 사이즈 혹은 확장된 사이즈로 사용 가능하다.

- 컬럼 너비로 사용할 수도 있고, 카드 보드 형식으로 툴 바를 사용할 수도 있다.

- 콘텐츠 위에 플로팅 툴 바로 사용할 수도 있고, 분리형 툴 바로도 사용 가능하다

바텀 툴 바

- 바텀 툴 바는 화면의 하단에 배치되며, 키보드가 나타날 경우에는 키보드 위에 배치할 수 있다.

- 책장(쉘프)형 바텀 툴 바 형태도 가능하다. 이 경우 아래에서 위로 필요 정보가 올라온다.

앱 바

- 과거에 액션 바'로 불리우던 것이 이제는 '앱 바'로 명칭이 바뀌었다.

- 툴 바의 한 종류로 분류되며 브랜딩, 네비게이션, 서치 그리고 액션과 관련된 요소가 배치되는 곳이다.

- 다양한 테마를 적용할 수 있다 : 라이트 / 다크 / 컬러 / 투명

스테이터스 바

- 스테이터스 바는 최상단에 위치하며, 좌측에는 노티피케이션 아이콘이 보여지며, 우측에는 시스템 아이콘 및 시간이 보여지는 곳이다.

- 일반적인 경우(디폴트)에 스테이터스 바는 앱 바에 쓰인 컬러보다 어두운 톤으로 적용되나, 희망할 경우 다른 결러를 적용하거나 투명하게 할 수도 있다.

- 밝은 컬러의 스테이터스 바를 선택한 경우라면 아이콘은 어두운 색으로 적용한다.

사이드 네비

- 사이드 네비는 임시로 나타나거나, 화면 사이즈에 따라서 고정형으로 나타나기도 한다.

- 좌측에 나타나는 경우도 있지만, 우측에 나타나는 경우도 있다. 이 경우 좌측 사이드 네비에서는 네비게이션 / 아이덴티티 중심의 내용이 배치되어야 하며, 우측 사이드 네비에서는 해당 페이지에서 필요로 하는 부가적인 정보를 배치하여야 한다.

탭 바

- 콘텐츠의 카테고리에 따라 구분되어지는 고정 탭 바에는 간결한 명칭을 기입하여야 하며, 다양한 디자인 형태로 구성할 수 있다.

- 디폴드 앱 바 + 고정 탭 바

- 확장형 앱 바 + 고정 탭 바

- 다양한 스타일의 고정 탭 바

화면이 스크롤 될 경우, 상단에 남아있는 고정 탭 바

앱 바의 서치가 활성화 될 경우 + 고정 탭 바

- 고정 탭 바에 컬러를 적용할 경우

디폴트 앱 바 + 고정 탭 바에 아이콘이 배치된 경우

고정 탭 바의 텍스트 걸러는 액션 아이콘과 동일하게 적용

고정 탭 바의 아이콘 컬러도 액션 아이콘과 동일하게 적용

- 고정 탭 바 외에도 '스크롤러블 탭 바'가 있다. 탭이 여러 개가 있을 경우 스크롤로 메뉴를 선택할 수 있도록 하는 방식의 탭 바이다. 고정 탭 바와 달리, 시작 지점이 화면 좌측으로부터 일정 거리 이상부터 시작된다.


학습정리

구조 구성 컴포넌트

 - 모바일 컴포넌트의 이해 : 모바일 디바이스가 가지고 있는 특징인 (1) 작은 디스플레이 사이즈, (2) 손으로 들고 사용하는 방식, (3) 손가락으로 조작하는 제스처로 인해, 모바일 앱은 표준화된 구조와 사용 방식을 권장하고 있으며, 그에 따라 운영체제별로 다양한 컴포넌트를 통해 스마트폰을 조작하게 되므로, 각 컴포넌트를 정확히 이해하고 사용할 수 있어야 하겠다.

 - iOS (스테이터스 바, 네비게이션 바, 툴 바, 탭 바, 서치 바, 스코프 바) : iOS 아이폰의 구조 구성 컴포넌트인 바 컴포넌트들의 각 역할과 위치, 그리고 형태에 대해 정확히 이해할 수 있도록 한다.

 - 안드로이드 OS (툴 바, 바텀 툴 바, 앱 바, 스테이터스 바, 사이드 네비, 탭 바) : 안드로이드 OS, 안드로이드 폰의 구조 구성 컴포넌트인 바 컴포넌트들의 각 역할과 위치, 그리고 형태에 대해 정확히 이해할 수 있도록 한다.


6강 모바일 UI/GUI 디자인 컴포넌트 (2)


1. 컨트롤 컴포넌트

- 아이폰

시스템 버튼

- 앱 내에서 특정 액션을 실행하는 버튼. 디폴트는 외곽선 없는 글자 만으로 이루어진 버튼이다. 경우에 따라 아이콘을 포함하기도 한다. 경우에 따라서는 외곽에 선을 넣어서 버튼임을 명확히 하기도 한다.

스위치

- 스위치는 상태를 on/off 하는 경우에 일반적으로 사용된다. 컬러가 있는 좌측 이미지가 on, 컬러가 없는 우측의 이미지가 off이다. 

- 스위치는 테이블 뷰에서만 사용한다.

스태퍼

- 특정 양을 특정 단위로 늘리거나 줄이고자 할 때 사용한다. 일반적으로 +/-를 사용하며, 큰 숫자의 변화가 아닌 경우에 사용한다. 스태퍼를 선택할 경우, 구체적인 수치의 변화를 숫자 등으로 보여주지 않으므로, 사용자가 조작한 결과를 보여줄 수 있을 정도로 다른 변화를 보여주어야 한다.

슬라이더

- 슬라이더를 통해 사용자는 정해진 범위 내에서의 수치 값 변화를 손쉽게 진행할 수 있다. 일반적으로 좌측이 적은 방향이고 우측이 많은 방향이다.

피커

- 피커는 사용자가 하나의 값을 선택해야 할 경우, 손쉽게 선택할 수 있도록 제공해주는 컨트롤 컴포넌트이다. 일반 피커와 데이트(Date) 피커가 있다.

페이지 콘트롤

- 페이지 콘트롤을 통해 사용자는 총 몇 페이지가 존재하며, 현재 몇 번째 페이지에 있는지를 시각적으로 확인할 수 있다. 이 경우 사용자는 단계적으로 하나씩 이동할 수 있으며, 페이지가 너무 많을 경우에는 사용하는 것을 권장하지 않는다. 10개 미만을 권장하며, 20개 이상의 페이지가 필요한 경우 다른 방식을 선택할 것을 권장한다.

버튼

- 버튼은 특정 위치에 한정적으로 액션을 실행하는 역할을 진행한다.

- 추가 버튼 : 특정 아이템 혹은 항목을 추가하는 기능을 한다.

- 인포 버튼 : 해당 아이템의 추가 정보를 제공해주는 역할을 한다.

인디케이터 종류

- 네트워크 액티비티 인디케이터 : 통신 상태 등을 알려주는 시각적 컴포넌트

- 리프레시 콘트롤 : 해당 페이지 새로고침을 알려주는 역할을 한다.

텍스트 필드

- 텍스트 필드는 각 영역을 손으로 탭하게 되면 글자를 입력할 수 있다. 글자 입력시 화면에 키보드가 올라온다.

- 글자 입력시 'Clear'아이콘이 배치되기도 하며, 힌트 텍스트 등을 미리 넣을 수도 있다.

- 필요에 따라서 별도의 버튼 아이콘 등을 배치할 수 있다.

- 안드로이드

버튼 

- 버튼은 텍스트, 이미지, 혹은 둘 다 사용된 형태로 배치되며, 앱의 메인 컬러를 주로 사용하게 된다. - 플랫 버튼 / 레이즈드 버튼 / 플로팅 액션 버튼의 세 가지 형태가 있다.

플로팅 액션 버튼

- 사이즈 : 디폴트 사이즈와 미니 사이즈가 있다. 대부분은 디폴트 사이즈를 사용하며, 미니 사이즈는 비주얼의 통일성을 위해 다른 컴포넌트들과 사용할 때 적용한다.

- 일반버튼의 형태로써 남용해서는 안된다.

- 플로팅 액션 버튼은 Create / Favorite / Share / Navigate 등과 같이 긍정적인 행동을 넣는 것을 권장한다.

- 보관 / 삭제/ 얼럿/ 에러 등과 같이 부정적인 액션을 플로팅 액션 버튼에 놓는 것은 권장하지 않는다. 또한 사소한 역할을 하는 경우도 사용하지 않는 것을 권장한다.

- 플로팅 액션 버튼은 원형의 플랫하며 깊이감을 주는 형태를 하는 것을 권장한다. 다른 형태나 스큐어몰피즘의 형태는 권장하지 않는다.

칩 

- 칩은 해시 태그와 유사한 역할을 하며, 다양한 형태로 구성될 수 있다. 자유 입력 폼 / 사전 정의된 형태 / 아이콘을 포함한 형태 등이 가능하다.

- 콘택트 칩은 이메일 등에서 주로 사용되는 형태로써, 해당 인물의 프로필 이미지와 이름이 보여지며 선택할 경우 주로 뷰가 생성된다.

리스트 콘트롤

- 정의 : 리스트 콘트롤은 리스트 뷰 안의 콘트롤을 의미하며, 리스트 텍스트의 좌, 우에 배치된다. 리스트 아이템의 상태를 나타내거나 추가 정보 혹은 특정 액션을 수행할 수 있는 아이콘의 형태로 배치가 된다.

- 체크 박스 : 체크 박스는 1차 (주요) 액션 또는 2차 (서브) 액션을 할 수 있다.

- 스위치 : 스위치는 2차 (서브) 액션의 역할을 할 수 있다. 온/오프의 역할로 주로 사용된다.

- 리오더 (재정렬) : 리오더는 2차 (서브) 액션의 역할을 할 수 있다. 리스트 에디팅 모드에서 해당 리스트 항목의 위치를 이동하고자 할 때 주로 쓰인다.

- 확장/축소 : 확장/축소 아이콘은 2차 (서브) 액션의 역할을 할 수 있다. 리스트 아이템의 디테일 정보를 확장해서 보고자 할 경우에 사용된다.

피커

- 데이트 피커 : 데이트 피커는 다이얼로그 윈도우로 보여지며, 날짜를 선택할 경우에 쓰여진다.

- 타임 피커 : 타임 피커는 시간을 설정하고 할 경우에 쓰여지며, 다이얼로그 창에 사용된다.

셀렉션 콘트롤

- 체크 박스 : 체크 박스는 제공되는 여러 가지의 항목 중에서 원하는 옵션을 선택하는 데 사용된다. 온/오프로 선택이 되며, 한 하나의 선택지를 제공할 경우는 온/오프 스위치 사용을 권장한다. 어떤 동작을 취하느냐에 따라서 다양한 형태의 표현이 가능하다.

- 라디오 버튼 : 라디오 버튼은 세트 선택지 중에서 하나를 선택해야할 경우에 사용된다. 선택지를 나란히 늘어 놓고 하나를 선택할 경우에 사용되며, 항목들이 많을 겨웅에는 드롭다운 방식의 메뉴를 사용하는 것을 권장한다. 사용자가 어떤 동작을 취하느냐에 따라 다양한 인터랙션을 제공한다.

- 스위치 : 온/오프 스위치는 하나의 셋팅 옵션의 상태를 온/오프 하는데 사용된다. 텍스트로 '온/오프'를 표현하는 것은 권장하지 않고, 아래의 이미지만을 사용하는 것을 권장한다. 사용자가 어떤 동작을 취하느냐에 따라 다양한 인터랙션을 제공한다.

슬라이더

- 정의 : 슬라이더는 사용자가 손쉽게 슬라이더를 손가락으로 선택해서 이동시키며 수치를 조절할 수 있는 기능을 제공한다. 좌측으로 이동할 경우는 수치가 적어지며, 우측으로 이동하면 수치가 커지는 방식이며, 불륨, 밝기, 컬러 값 등을 정할 때 주로 사용된다.

- 연속형 슬라이더 : 가장 일반적인 슬라이더의 형태이며, 선택 상황에 따라 다양한 인터랙션이 제공되므로 참조한다. 경우에 따라서는 구체적인 수치값을 표현하는 경우도 있다.

- 분리형 슬라이더 : 구체적인 수치를 슬라이더에 별도의 아이콘의 형태로 표현하는 형태가 분리형 슬라이더이다.

텍스트 필드

- 정의 : 텍스트 필드에는 숫자, 텍스트, 이메일 주소 등을 입력하는 컴포넌트이다.

- 라벨 : 사용자가 텍스트 입력 필드를 터치하게 되면 해당 필드가 위로 올라오는 듯한 표현이 이루어진다. Floating Inline Label이라 부른다. 라벨에 적용되는 컬러는 앱의 컬러 팔레트 내에서 정해지며, 인터랙션 부분은 아래를 참조한다.

- 싱글 라인 텍스트 필드 : 1줄을 입력할 수 있는 텍스트 필드이다. 싱글 라인 텍스트 필드에 아이콘이 붙을 수도 있다.

- 멀티 라인 텍스트 필드 : 하나의 라인 텍스트 필드이나, 그 안에 여러 줄의 텍스트를 넣을 수 있는 컴포넌트를 '멀티 라인 텍스트 필드'라 한다.

- Full-width 텍스트 필드 : 이메일의 내용을 적는 란과 같은 역할을 하는 것이 'Full-width 라인 텍스트 필드'이다. 싱글 라인 텍스트 필드와 멀티 라인 텍스트 필드가 같이 적용되는 경우가 잦다.

- 캐릭터 카운터 : 구체적으로 입력할 수 있는 글자 수에 제한이 있을 경우, 캐릭터 카운터를 사용한다. 싱글/멀티/Full-width 텍스트 필드에 모두 적용 가능하다.

- 오토 컴플리트 텍스트 필드 : 서치 필드에 글자를 입력할 경우, 추천 항목을 보여주거나 자동 텍스트 완성 등의 기능을 한다. 텍스트를 입력하였을 경우, 해당 텍스트가 삽입된 자동 완성 텍스트를 추천해서 보여주는 기능을 한다. 일부 텍스트를 입력하였을 경우, 완료 형태의 항목을 보여주는 방식으로 자동 완성이 가능하다.

- 서치 필터 : 앱 바에 서치 기능을 활성화하여, 싱글 라인 텍스트 필드로 텍스트를 입력하는 경우이다. 글자를 입력함에 따라 아래에 관련 콘텐츠를 필터링/정렬하여 보여주는 기능을 한다.

- 필수 입력 필드 : 필수 입력 필드는 일반적으로 항목명 옆에 * 별표 표시를 하며, 해당 항목을 입력하지 않았을 경우 붉은 색으로 표기를 할 수 있다.


학습정리

컨트롤 컴포넌트

 - 아이폰 (시스템 버튼, 스위치, 스태퍼, 슬라이더, 피커, 페이지 콘트롤, 버튼 등) : 아이폰의 컨트롤 컴포넌트에 대해 학습하였다. 다양한 컨트롤러들이 있으므로 숙지하여 아이폰 UI/GUI 디자인시 적용할 수 있도록 한다.

 - 안드로이드폰 ( 버튼, 플로팅 액션 버튼, 칩, 리스트 콘트롤, 피커, 셀렉션 콘트롤 등) : 안드로이드폰의 컨트롤 컴포넌트는 아이폰보다 훨씬 많고 다양하므로 충분히 숙지하여 UI/GUI 디자인시 적용할 수 있도록 한다. 필요할 경우, 공식 머티리얼 디자인 웹사이트를 방문하여 추가 정보를 확인하도록 한다.


7강 모바일 UI/GUI 디자인 컴포넌트 (3)


1. 아이콘 디자인

- 아이폰

정의: 아이폰에서는 일반 아이콘을 '템플릿 아이콘'이라 부른다. 그리고 앱 아이콘을 동일한 명칭인 '앱 아이콘'으로 부른다

템플릿 아이콘

- 정의 : 템플릿 아이콘은 아이폰의 화면에서 손쉽게 볼 수 있는 일반 아이콘을 의미하며, 바에 위치하거나 홈스크린 퀵 액션 뷰 등에서도 사용된다.

- 디자인 스타일 : 템플릿 아이콘은 심플한 선으로 디자인하며, 일관성 있게 디자인 요소를 통일할 것을 권장한다. 아울러 최대한 표준 아이콘에 맞추어 디자인을 진행함으로써 사용자가 쉽게 이해할 수 있는 형태를 차용하는 것을 권장한다.

- 템플릿 아이콘의 형태 : 템플릿 아이콘 선택시에는 앱의 고유 컬러로 색을 적용하되, 

(1) 아이콘의 안을 채워 넣거나 반전 형태를 적용하도록 한다. 

(2)의 경우에 따라서는 별도의 원형을 외부에 두어 형태 인식을 좀더 명확히 할 수도 있다. 

(3) 단순히 컬러만을 반전할 경우에 시인성이 떨어진다면 외부의 선을 두껍게 만들어 시인성을 높일 수도 있다.

(4) 아이콘에 디테일을 높ㅇ힌 경우이다. 이 경우에는 외부의 선을 두껍게 한다면 디테일이 떨어지게 되므로, 단순히 컬러만 적용하도록 한다.

표준 템플릿 아이콘 리스트

- 툴 바, 네비게이션 바 적용 템플릿 아이콘

- 탭, 탭 바 적용 템플릿 아이콘

앱 아이콘의 의미와 역할

- 주요 역할 : 앱 아이콘은 앱 스토어에서 사람들에게 보여지는 대표 이미지와도 같은 역할을 하며, 사용자의 스마트폰 홈스크린에 배치되어 앱을 대표하는 대표 이미지이자 입구로써의 역할을 한다.

- 다양한 용도의 앱 아이콘 : 앱 아이콘은 이 외에도 다양한 용도에서 노출이 된다. 사용자의 아이폰 내에서의 검색 결과(스포트라이트), 셋팅 페이지 등에도 보여지며, 웹 사이트의 검색 결과 등에서도 쓰여진다.

앱 아이콘의 디자인

- 디자인 가이드

사람들이 쉽게 그 의미를 알 수 있게 디자인할 것

iOS 7 스타일로 앱 아이콘을 심플하게 디자인할 것

앱의 메인 콘셉트/기능 등을 직관적으로 알 수 있도록 디자인할 것

투명 요소를 포함하지 말 것

정사각형으로 이미지를 제출하면 외곽은 자동으로 잘려짐

- 앱 아이콘 이미지 용도

앱 아이콘은 크게 앱 스토어 등록용과 아이폰 앱 탑재용으로 나눌 수 있다.

앱 스토어용은 1개 사이즈로 제출하면 자동으로 리사이징 되어 외부에 쓰여지나, 앱 탑재용 이미지는 다양한 아이폰의 해상도에 맞는 이미지를 별도로 리사이징해서 탑재해주어야 한다.


- 안드로이드 (Material icon)

정의 : 안드로이드 OS에서는 일반 아이콘을 '시스템 아이콘'이라 부른다. 그리고 앱 아이콘을 '프로덕트 아이콘'으로 부른다. 이 둘의 역할은 아이폰에서의 아이콘들의 역할과 동일하다. 이렇게 명칭이 부여가 된 이유는, 단순히 모바일에서 쓰는 것을 넘어서, 다양한 제품/서비스에 앱이 쓰여지는 것을 가정하여 명칭이 쓰여지는 것으로 이해하면 된다.

시스템 아이콘

- 디자인 스타일 : 안드로이드폰의 모든 아이콘들은 머터리얼 디자인 테마를 적용하고 있으므로, 해당 스타일에 따라 모든 디자인 요소들을 맞출 필요가 있다. 전체적으로 아이폰과 비교하였을 때, 볼드한 스타일이며 플랫하다. 선과 면의 요소로 표현이 이루어지는 특징이 있다.

- 시스템 아이콘의 형태 : 모든 UI가 그렇지만, 안드로이드 시스템 아이콘 또한 일관성 있는 시스템 아이콘을 특히 강조하고 있다. 아이콘의 두께, 모서리 반경, +/- 스페이스의 너비 등의 디테일한 부분들을 모두 따라 줄 것을 권장하고 있다.

시스템 아이콘의 의미와 종류

- 공식 아이콘 라이브러리 참조 : 시스템 아이콘은 그 양이 방대하므로, 공식 아이콘 라이브러리를 참조하여 관련 내용을 학습하도록 한다. 필요시 해당 아이콘을 다운로드 받을 수도 있다.

- design.google.com/icons/

프로덕트 아이콘의 의미와 형태

- 정의 : 프로덕트 아이콘은 앱의 브랜드를 적절히 표현할 수 있는 시각적 대표 이미지의 역할을 하는 것을 권장한다. 친근하면서도 심플하게, 대담한 디자인 스타일을 적용하기를 권장하며, 다른 앱들과 시각적으로도 차별화가 이루어지는 것을 추천하고 있다.

- 프로덕트 아이콘의 머티리얼 디자인 개발 : 머티리얼 디자인의 특징을 잘 살려 심플, 머티리얼 (디지털 페이퍼), 그리자, 밸런스의 요소를 잘 적용하여 프로덕트 아이콘의 시각 디자인 요소를 명확히 하였다.

프로덕트 아이콘의 디자인 

- 프로덕트 아이콘의 그리드 시스템 : 프로덕트 아이콘의 시각적 통일성, 일관성을 위하여, 머티리얼 디자인 테마에서부터는 그리드 시스템을 적용하기 시작하였다. 따라서 안드로이드폰의 프로덕트 아이콘을 디자인 할 경우에는 이러한 형태적 특징을 그리드 시스템에서 시작하는 것을 권장한다.

- 프로덕트 아이콘의 용도 : 아이폰 앱 아이콘과 마찬가지로, 프로덕트 아이콘을 디자인 한 후에는 앱 탑재용 이미지와 앱 마켓 등록용 이미지로 저장하여 사용한다.

- 다양한 스타일의 안드로이드 앱 프로덕트 아이콘 : 머티리얼 디자인으로 앱 아이콘을 디자인하는 것을 권장하고 있으나, 가이드라인과 별개의 디자인 스타일로 만들어진 프로덕트 아이콘들도 많으니, 필요에 따라 추가 리서치를 통해서 아이콘을 기획하는 것을 권장한다.


2. 콘텐츠 디자인 - 아이폰

아이폰 : 액티비티 뷰 콘트롤러, 콜렉션 뷰, 맵 뷰, 팝오버, 테이블 뷰, 템포러리 뷰

- 모달 콘텍스트의 이해

양식/형식을 의미하는 모달리티 modality는 이전부터 존재해왔고 경험한 것을 의미한다. 사용자들은 아이폰 앱을 사용하면서 UI/GUI 디자인을 접하게 되는데, 기존에 경험했던 형태의 UI/GUI를 통해서는 불편함 없이 서비스를 이용할 수 있을 것이므로, 이러한 모달리티를 따르는 것을 권장한다.

- 액티비티 뷰 콘트롤러

내/외로 특정 태스크를 달성하기 위해 액티비티를 선택해야 하는 경우가 있다. 이러한 하나의 활동(북마크 추가, 복사 등)을 '액티비티'라 부른다. 서비스를 사용하던 중 특정 활동을 하게 되면, 이처럼 액티비티 뷰 콘트롤러가 화면에 나타나게 된다. 액션 시트 혹은 팝 오버 뷰에 나타나게 된다. 시스템 제공 기능과 개별적으로 구성한 기능을 배치하여 보여줄 수 있다.

- 콜렉션 뷰

콜렉션 뷰를 통해서는 정렬된 콘텐츠를 커스터마이제이션 할 수 있는 레이아웃에 보여줄 수 있다.

-  맵 뷰

빌트인 맵 앱의 기능을 활용한 맵 뷰를 통해 지역적 데이터 정보를 보여줄 수 있다.

- 팝오버

화면에서 콘트롤 아이콘을 탭하였을 때, 팝오버 뷰가 나타난다. 팝오버가 나타날 경우, 뒤의 화면은 어둡게 변하거나 블럭 효과를 주는 것을 권장한다. 팝오버에는 테이블, 이미지, 지도, 웹, 네비게이션 바, 툴 바 등을 배치할 수 있다. 팝오버에는 별도의 닫기 X 아이콘은 배치하지 않아도 된다.

(1) 팜오버 외부의 영역을 선택할 경우, 팝오버 안의 조작 내용은 저장해야 한다.

(2) 팝오버가 어느 위치를 눌러서 나오게 되었는지를 표시해주어야 한다. 화살표를 보여주게 하는 것도 좋은 방식이다.

(3) 팝오버 안의 내용만으로도 충분히 조작을 할 수 있어야 한다. 팝오버 뒤의 콘텐츠를 보아야 이해하고 사용할 수 있도록 하면 안된다.

(4) 팝오버는 한 번에 하나만 보여지도록 해야 한다.

(5) 팝오버 위에 또 다른 모달 뷰를 놓는 건 안된다.

(6) 팝오버 뷰가 너무 커서 화면 전체를 가리지 못하게 해야 한다.

- 테이블 뷰

정의 : 아이폰에서 가장 자주 쓰이는 뷰이기도 한 테이블 뷰이다. 테이블 뷰는 스크롤이 가능한 싱글 컬럼의 리스트 형태로 쓰여진다. 플레인과 그룹 테이블 뷰의 두 가지 스타일이 있다.

(1) 플레인 스타일 테이블 뷰 : 플레인 스타일 테이블 뷰의 한 열은 라벨이 표기된 섹션을 표기할 수 있으며, 테이블 뷰의 우측에는 추가 인덱스를 표시할 수 있다. 필요에 따라 헤더와 푸터를 붙일 수 있으며, 이 경우 첫 열 이전에 헤더를 배치할 수 있으며 마지막 열 이후에 푸터를 배치할 수 있다.

(2) 그룹 스타일 테이블 뷰 : 그룹 스타일 테이블 뷰에서는 열은 그룹 단위로 보여지게 된다. 이 경우 헤더와 푸터가 배치되며, 그룹에는 최소 1개 이상의 열이 포함되어야 한다.

(3) 4가지 테이블 셀 스타일

a. 디폴트 : 열의 좌측에 이미지가 들어가고, 좌측 정렬로 텍스트가 배치된다.

b. 서브타이틀 : 디볼트와 같으나, 텍스트 아래에 서브타이틀이 배치된다.

c. 벨류 1 : 디폴트와 같으나, 우측에 우측 정렬로 옅은 컬러의 텍스트가 배치된다.

d. 벨류 2 : 이미지는 들어가지 않으며, 우측정렬의 파란색 폰트를 좌측에 배치하고, 좌측 정렬로 검은색 폰트를 우측에 배치하는스타일

- 템포러리 뷰

(1) 얼럿 뷰 : 얼럿 뷰는 사용자가 앱 혹은 디바이스를 사용하는 데 큰 영향을 미치는 중요한 정보를 제공하는 역할을 한다. 충분히 이해할 수 있는 내용 정보를 최대한 짧게 보여주어야 하며, 하나 이상의 선택 버튼을 제공하여야 한다. 얼럿 뷰는 시스템에서 노출 되는 것이므로, 별도의 디자인을 적용할 수는 없다. 얼럿 뷰 안의 타이틀은 최대한 짧게 넣는다. 메세지가 길면 쉽게 파악하기 힘들 수 있으므로 최대한 짧게 넣는 것을 권장한다. 또한 필요에 따라서 작은 글자로 추가 부연 설명 메세지를 넣을 수도 있다. 부연 설명 메세지가 길어질 경우, 스크롤 방식으로 보여질 수 있으나 그렇게 하는 것은 권장하지 않는다. 일반적으로 선택 버튼은 두 개를 제공한다. 두 개 중 하나를 고르는 것이 쉽기 때문에, 일반적으로 두 개의 옵션을 제공한다. 단순히 하나의 옵션만 제공할 경우는 사용자에게 선택의 여지를 주지 않기 때문에 권장하지 않는다. 필요에 따라서 세 개 이상의 버튼을 제공할 수도 있으나, 복잡해지기 때문에 권장하지는 않는다.

(2) 액션 시트 : 액션 시트는 사용자가 선택할 수 있는 몇 가지의 선택지를 제공하는 뷰이다. 사용자가 어떤 행동을 취했을 때, 필요 선택지로 나타나는 방식이다. 두 개 이상의 버튼을 제공한다. 너무 많이 제공하여 스크롤이 되도록 만드는 것은 권장하지 않는다. 아이폰이 세로 모드일 경우, 액션 시트는 화면의 아래에서 나타난다. 아이폰이 가로 모드일 경우, 액션 시트는 팝 오버 뷰로 나타난다. 액션 시트는 테스크를 완수하기 위한 방법이 다양할 경우에 선택지를 보여주는 방식이며, 사용자에게 위험한 결과를 초래할 경우에도 경고성 및 확인차 보여주는 방식으로도 사용된다. 어떠한 상황이든지, 사용자에게 치명적인 결과를 초래하는 경우에는 붉은색 텍스트를 사용하여 경고의 의미를 전달한다.

(3) 모달 뷰 : 모달 뷰는 기존의 뷰 위에 임시적으로 나타나는 뷰이며, 특정 임무를 수행하는 것을 목표로 하는 뷰이다. 현재 있는 위치에서 필요한 기능 혹은 테스크를 완수하기 위해 임시로 나타난다. 해당 기능을 수행한 후에는 사라지는 것이 일반적이다.


학습정리

아이콘 디자인

 - 아이폰 (템플릿 아이콘, 앱 아이콘) : 아이폰에서 템플릿 아이콘과 앱 아이콘의 구체적인 역할과 디자인 스타일에 대해 충분히 이해하고 디자인 할 수 있도록 한다. 필요할 경우 공식 애플 개발자 사이트를 통해 추가 정보를 학습하도록 한다.

 - 안드로이드폰 (시스템 아이콘, 프로덕트 아이콘) : 안드로이드폰의 디자인 테마인 머티리얼 디자인의 시스템 아이콘과 프로덕트 아이콘의 형태와 디자인에 대해 이해하고 디자인 할 수 있도록 한다. 필요한 경우 구글 디자인 사이트를 방문하여 관련 정보 및 자료를 습득할 수 있도록 한다.

콘텐츠 디자인 - 아이폰

 - 아이폰 (액티비티 뷰 콘트롤러, 콜렉션 뷰, 맵 뷰, 팝오버, 테이블 뷰, 템포러리 뷰) : 아이폰의 콘텐츠 디자인에 필수적인 다양한 뷰에 대해 학습하였다. 본 내용을 잘 숙지하여아이폰 앱 UI/GUI 디자인시 적용할 수 있도록 한다. 필요시 공식 애플 개발자 사이트를 통해 필요 정보를 추가적으로 확인하도록 한다.


8강 모바일 UI/GUI 디자인 컴포넌트 (4)


1. 콘텐츠 디자인 - 안드로이드 폰

안드로이드 폰 : 카드, 다이얼로그, 그리드 리스트, 디바이더, 리스트, 메뉴, 바텀 시트

카드

- 정의 : 카드는 다양한 콘텐츠와 컴포넌트로 구성할 수 있는 하나의 콘텐츠 카드라 할 수 있다. 다양한 형태와 구성, 그리고 콘텐츠에 따른 길이의 변형으로 편리하게 콘텐츠를 보여줄 수 있는 방식이다.

- 카들 콜렉션 : 동일 수준 및 개념의 카드 형태의 콘텐츠를 모아서 볼 수 있으며, 이러한 모음을 카드 콜렉션이라 한다.

- 카드 형태 디자인 Do : 반드시 각 모서리에 라운드/ 그림자 효과가 있어야 한다. 삭제 / 재배열 가능할 수 있다.

- 카드 형태 디자인 Don't 각진 모서리에 그림자 효과가 없으면 '타일tile'이다. 2개 미만의 액션이 배치되어 있다.

- 카드 콜렉션 Do : 장식적 요소가 적어 정보 이해 및 스켄이 빠르다

  그리드 타일을 통해 콘텐츠 갤러리 이미지 정보 전달이 용이하다

- 카드 콜렉션 Don't : 카드 형식을 선택함으로써 정보 스캔이 어렵다. 재배열 / 삭제 불가

갤러리는 일반적으로 카드 형식은 사용하지 않는다.

- 콘텐츠 : 카드 콜렉션을 통해서 다양한 정보와 콘텐츠를 제공할 수 있으며 그에 따라 다양한 스타일의 카드 디자인이 이루어질 수 있다. 따라서 카드에 콘텐츠를 디자인할 경우에는 이미지 위에 텍스트 배치할 경우 가독성이 보장되어야 하고, 콘텐츠의 위계가 명확해야 한다. 카드 안에는 체크 박스, 이미지, 다양한 텍스트 사이즈, 액션 등이 배치될 수 있다. 사이즈 또한 다양하게 변형될 수 있다.

- 스크롤링 : 카드 콜렉션에서 스크롤은 상하 방향으로만 가능하다.

- 액션 : 카드 자체가 터치할 수 있는 콤포넌트의 성격을 가지고 있지만, 기본적으로 몇 가지 레이아웃을 기본적으로 제공해주고 있으므로 추가적인 액션, 아이콘, 콘텐츠 등을 배치할 수 있다. 콘텐츠의 종류와 기획 의도에 따라 이는 굉장히 다양하게 적용될 수 있다.

- 카드 보조 액션 배치 및 레이아웃 : 

a. 액션 가능 영역 / 미디어, 보조 텍스트 

b. 액션 가능 영역 1,2 / 옵션 헤더, 미디어, 보조 텍스트, 보조 액션

c. 액션 가능 영역 1,2,3,4 / 옵션 헤더, 미디어, 보조 액션

d. 액션 가능 영역 1,2,3 / 옵션 헤더, 보조 텍스트, 보조 액션

- UI 콘트롤러를 포함한 카드 사례 : 

별점 UI와 이미지 터치 영역을 포함한 카드 디자인

선택할 수 있는 버튼을 포함한 카드 디자인

슬라이더 UI를 포함한 카드 디자인

고정 탭 바를 포함한 카드 디자인

다이얼로그

- 정의 : 다이얼로그는 특정 테스크를 수행하게 하는 역할로써, 텍스트와 UI 콘트롤러 등을 포함하여 사용된다. 앱의 중요 정보, 결정 사항, 다양한 테스크를 수행할 수 있도록 뷰를 제공한다. 일반 형태의 다이얼로그가 있고, 풀 스크린 다이얼로그는 전체 화면에서 정보 등을 입력하게 한다.

- 얼럿 : 얼럿은 중요한 결정을 해야 하는 경우에 주로 사용된다. 일반적인 경우에는 특정 행동을 유도하는 질문을 한다. '지우시겠습니까?' '연결하시겠습니까' > 결정 사항은 얼럿 내의 액션 버튼을 통해 진행할 수 있다. 액션 버튼에는 구체적인 행동에 대한 결과를 예측하는 용어를 사용한다.

- 얼럿 + 타이틀 바 : 얼럿에 타이틀 바를 사용할 경우는, 무척 중요한 상황에서만 사용할 것을 권장한다. 이 경우는 타이틀에 가장 중요한 내용을 간략히 적고, 콘텐츠 부분에 세부 사항을 자세히 적기를 권장한다.

- 심플 메뉴 : 심플 메뉴는 리스트 아이템에 대한 옵션을 보여주는 역할을 한다. 해당 옵션에서 선택을 하게 하면 선택의 결과가 즉시 반영된다.

- 심플 다이얼로그 : 심플 다이얼로그는 리스트 아이템에 대한 옵션을 보여주는 역할을 한다. 해당 옵션에서 선택을 하게 되면 선택의 결과가 즉시 반영되고, 창이 닫힌다.

- 심플 다이얼로그 Don't 다이럴로그의 바깥 영역을 터치하거나 스마트폰의 back 버튼을 누르면 창이 닫히는데, 별도의 Cancel 혹은 Close 버튼을 두는 것은 옳지 않다.

- 컨펌 다이얼로그 : 컨펌 다이얼로그는 옵션이 반영되기 전에 최종 컨펌을 받는 것을 목적으로 사용하는 경우이다. 최종 'OK'를 눌러야만 결과가 반영된다. 컴펌 다이얼로그 컨펌 다이얼로그는 이전의 리스트 형태 외의 다른 경우에도 사용이 가능하다. 데이트 피커의 경우에도 OK를 눌러야 최종 결정 사항이 반영된다.

- 풀스크린 다이얼로그 : 풀스크린 다이얼로그는 여러 가지의 테스크를 수행해야 하는 경우에 사용한다. 최종적으로 컨펌해야만 최종 작업이 결과에 반영된다. X 혹은 Cancel 할 경우에는, 수행 결과는 반영되지 않는다. 풀스크린 다이얼로그에서는 필요에 따라 추가 다이얼로그를 생성할 수 있다. 풀스크린 다이얼로그에서 일부 항목이라도 변경을 하였을 경우에, 취소를 하게 되면 변경 사항을 저장할 지를 묻는 얼럿을 보여주도록 한다. 만약 수정 사항이 없는 경우는 얼럿을 보여줄 필요 없이, 즉시 이전 화면으로 돌아가도 무방하다.

- 풀스크린 다이얼로그의 네비게이션

자동 저장 구조 : Up Arrow (화살표 아이콘)만 있을 경우에는 화면에서 변경하는 모든 항목들이 즉시 저장되는 방식이다.

수동 저장 구조 : X 아이콘을 누를 경우, 변경 사항을 모두 삭제하게 되며, Save를 누르게 될 경우에는 모든 사항이 저장되게 된다.

그리드 리스트 

- 정의 : 그리드 리스트는 기본 리스트 뷰의 또 다른 대안으로 사용되며, 일반적으로 동질 성격의 콘텐츠를 배열하여 보여주는 방식으로 정렬된다. 일반적으로 이미지와 관계된 경우에 주로 쓰인다. 타일을 사용하며, 특정 간격으로 수평 / 수직 그리드 리스트에 반복적으로 배열된다.

- 타일과 콘텐츠 : 타일 콘텐츠는 주요 콘텐츠와 2차 콘텐츠로 구성된다. 주요 콘텐츠는 일반적으로 이미지이며, 2차 콘텐츠는 액션 혹은 텍스트가 된다. 2차 콘텐츠의 구성 요소인 액션과 텍스트는 배치 위치가 정해져 있으므로 참조한다.

- 스크롤 Do : 일부 이미지가 잘려보이는 형태로 레이아웃을 구성하는 것을 권장한다.

- 스크롤 Don't : 이미지처럼 배치할 경우, 사용자는 화면의 아래에 추가 정보가 있을 거라 예측하지 못할 수 있기 때문이다.

- 이미지 그리드 리스트 : 이미지만으로 그리드 리스트를 구성하는 경우이다. 이 경우 이미지 사이즈를 적절히 구성하는 것이 중요하다. 이미지가 너무 클 경우에는, 빈 공간이 너무 커보일 수 있다.

- 싱글 라인 그리드 리스트 : 1줄의 텍스트를 넣는 그리드 리스트이다. 이 경우 텍스트를 타일의 상단 혹은 하단에 넣을 수 있다. 싱글 라인 텍스트에 아이콘을 추가할 수 있다. 이 경우도 아이콘을 텍스트의 앞 혹은 뒤에 배치하여 사용한다.

- 2 라인 그리드 리스트 : 텍스트가 2줄로 배열되는 구성이다. 이전과 마찬가지로 상단과 하단에 배치할 수 있다. 2라인 그리드 리스트의 텍스트 앞/뒤 위치에도 아이콘을 배치할 수 있다.

디바이더

- 정의 : 디바이더를 통해 리스트, 페이지 레이아웃의 콘텐츠와 그룹을 구분할 수 있다. 디바이더는 옅고 얇은 선으로 표현되지만, 사용자가 충분히 시각적으로 구별할 수 있으며 이를 통해 정보의 구분을 명확하게 할 수 있다.

- 풀 브리드 디바이더 : 풀 브리드 Full-bleed 디바이더는 별개의 콘텐츠 섹션을 나누는 것을 목적으로 쓰여진다. 또한 머티리얼 타일이 확장되어 콘텐츠가 추가적으로 필요할 때도 쓰여진다. 아바타 혹은 아이콘 같은 시각적으로 포인트를 주는 요소가 없을 경우에는 단순한 간격을 주는 것만으로는 구분이 되지 않으므로, 풀브리드 디바이더를 사용하는 것이 각 콘텐츠 타일을 명확히 구분지어 줄 수 있다.

- 인섹트 디바이더 : 'insect삽입'을 의미하는 인섹트 디바이더는 관계 있는 콘텐츠들을 나누는 것을 목적으로 쓰여진다. 연락처 리스트나, 대화 내의 이메일 리스트 등을 섹셕으로 나누는 역할을 한다. 인섹션 디바이더는 아바타 혹은 타이틀 시작 지점 등을 기준으로 시작점을 정한다.

- 디바이더 Don't : 풀 브리드 디바이더를 너무 많이 사용함으로써, 오히려 시각적 노이즈를 만드렁 내고 있다. 이로써 디바이더의 의미가 없어진다. 인섹트 디바이더는 비주얼 노이즈를 주링는 목적에서 주로 쓰여지나, 남용하면 의미가 없어진다.

- 서브 헤더 & 디바이더 : 서브 헤더와 디바이더를 같이 쓸 경우에는, 콘텐츠와 서브 헤더의 의미를 강조하기 위해 디바이더를 서브 헤더에 맞추어 배치한다.

리스트

- 정의 : 리스트는 싱글 컬럼으로 구성되어 있으며, 이 하나의 컬럼은 '타일'의 성경으로 구성되어 있다. 타일에는 콘텐츠를 배치하며, 리스트 내에서 필요에 따라 그 높이 값을 달리한다.

- 콘텐츠 구성 : 1개의 타일이 모여서 리스트를 이루며, 리스트 콘텐츠를 디자인할 때에는 콘텐츠의 위계를 잘 구성하는 것이 중요하다. 이를 통해 사용자가 중요한 정보를 좀 더 쉽게 찾을 수 있게 한다. 예를 들어, 이메일 리스트에 있어 아바타 > 제목 등의 순으로 배열하는 것이 더욱 중요 정보를 먼저 배치하는 것이다. 만약 3줄 이상의 텍스트와 더 많은 정보를 포함하고자 한다면 리스트가 아닌 카드 방식을 추천한다. 주요 액션은 좌측 배치 / 2차 액션은 우측 배치

- 싱글 라인 리스트 : 싱글 라인 리스트에서는 각 타일은 한 줄의 텍스트만을 배치한다. 아이콘과 함께 배치될 수 있으며, 텍스트의 길이는 다양하게 적용될 수 있다.

- 싱글 라인 리스트의 응용 : 싱글 라인 리스트에는 텍스트만 넣거나, 아이콘과 텍스트를 넣거나, 아바타, 텍스트, 아이콘을 전부 넣는 것이 가능하다. 

- 2 라인 리스트 : 2 라인 리스트에는 2줄의 텍스트가 들어간다. 이 또한 싱글 라인 리스트와 마찬가지로 아이콘, 아바타 등과 같이 배치가 가능하다.

- 2 라인 리스트의 응용 : 텍스트만 들어간 형태의 2 라인 리스트, 아이콘과 텍스트를 같이 사용한 경우가 가능하다. 또한 아바타와 텍스트, 그리고 아바타, 텍스트, 아이콘을 사용한 2 라인 리스트가 가능하다.

- 3 라인 리스트 : 3 라인 리스트도 리스트의 형태로 구성이 가능하다. 3 라인 이상의 내용이 들어갈 경우에는, 리스트가 아닌 카드 형태의 구성을 고민해보아야 한다. 3 라인 리스트 또한 다양한 콘텐츠로 구성이 가능하다.

- 3 라인 텍스트의 응용 : 텍스트 만을 사용하거나, 아이콘과 텍스트를 사용한 3 라인 리스트가 있다. 아바타와 텍스트, 또는 아바타, 텍스트, 아이콘의 조합으로도 3 라인 리스트의 타일을 구성할 수 있다.

메뉴

- 정의 : 메뉴는 임시 팝업 형태로 나타나며, 버튼, 액션 등으로 구성된다. 각 메뉴의 항목들은 옵션 액션의 역할을 하며 화면 내에 선택한 항목들에 어떠한 액션을 수행하거나 앱 내에서 어떠한 역할을 하는 것을 선택할 수 있다. 메뉴의 각 항목은 싱글 라인 텍스트로만 구성되어야 하며, 선택시 즉시 수행되어야 한다.

바텀 시트

- 정의 : 바텀 시트는 화면의 하단에서 올라오는 머티리얼 시트이다. 바텀 시트는 사용자가 행동한 액션에 대한 결과로 나타나게 되며, 위로 스와이프 할 경우에는 필요한 추가 정보를 더 볼 수 있게 한다. 바텀 시트는 임시적 모달 시트의 역할을 하기도 하며, 퍼시스턴트 바텀 시트는 앱 구조의 일부로써의 역할을 하기도 한다. 구글 지도 앱의 경우, 바텀 시트는 앱 구조의 일부 역할을 한다.

- 퍼시스턴트 바텀 시트 : 퍼시트턴트 바텀 시트는 앱 구조의 일부로써, 평상시에도 메인 뷰 하단에 남아 있다가 필요에 의해 추가 정보를 보여주는 역할을 한다. 새로운 정보를 보여주거나, 주요 콘텐츠에 대한 콘텐츠를 보여준다. 퍼시스턴트 바텀 시트는 하단에 위치하고 있다가 필요에 따라 화면에서 선택한 지역의 세부 정보를 보여준다. 현재 메인 페이지에서 다른 정보를 살펴보고 있다 하더라도 퍼시스턴트 바텀 시트는 플레이 되고 있는 음악에 대한 정보를 표시하고 있다.

- 모달 바텀 시트 : 모달 바텀 시트는 '메뉴', '심플 다이얼로그' UI의 대안으로 종종 쓰여진다. 다른 앱과 연계 기능이나 콘텐츠를 보여주는 역할을 한다. 다른 뷰 위에 배치 되므로 모달 뷰의 역할을 하며, 뒤 화면을 활성화 시키기 위해서는 모달 바텀 시트를 닫은 후에 사용할 수 있다. 모달 바텀 시트는 리스트 혹은 그리드의 형태로 액션 혹은 선택 옵션 항목을 보여준다. 항목을 보여줄 때에는 중요 정보를 잘 구성하여 사용자가 쉽게 이해할 수 있도록 한다.

- 모달 바텀 시트 Do : 모달 바텀 시트의 높이는 콘텐츠의 높이만큼만 올라오면 된다.

모달 바텀 시트 내에서 많은 수의 선택지가 주어지더라도 최상단의 앱 바를 침범하지는 않는다.

- 모달 바텀 시트 Don't : 포함하고 있는 리스트 항목보다 훨씬 높은 위치까지 리스트가 보여지는 것은 

   권장하지 않는다.

   모달 바텀 시트가 최상단의 앱바를 침범하여 올라와 있으므로, 사용자가 모달 바텀 시트의 외부 영역을 터치하여 모달 바텀 시트를 닫기 어렵다.

- 모달 바텀 시트 조작 : 모달 바텀 시트는 모달 바텀 시트 영역을 스와이프 다운하거나, 외부 영역을 터치하게 됨으로써 모달 바텀 시트를 닫을 수 있다.


학습정리

콘텐츠 디자인 - 안드로이드 폰

 - 안드로이드 폰 (카드, 다이얼로그, 그리드 리스트, 디바이더, 리스트, 메뉴, 바텀 시트) : 안드로이드폰의 콘텐츠 디자인 부분에는 다양한 형태의 요소들이 많이 있으므로 충분히 숙지하여 UI/GUI 디자인시 적절히 적용할 수 있도록 한다. 필요할 경우 ,공식 머티리얼 디자인 웹사이트를 방문하여 추가 정보를 확인하도록 한다.


9강 컬러 (1)


1. 컬러의 기본 이론

- 기본 개념 학습

컬러의 기본 개념

- 정의 : 컬러는 단순하게 색으로 존재하는 것이 아니라 이미지 감정 등의 다양한 요소를 포함하고 있는 요소이다. 그리고 UI에 사용되는 컬러는 일반 생활에서 컬러를 접하는 것보다 사용성이란 측면에서 구체적인 역할을 하게 되는 경우도 있다.

' 색이란 우리가 무엇인가를 처음 대면했을 때 가장 먼저 인지하는 요소일 것이다. 문화적 / 관습적 인식 때문에 특정 색을 접했을 때 자연스레 어떠한 이미지나 감정을 떠올리게 마련이며, 이에 따라 그 사물이나 디자인에 반응하게 된다. 색은 의미를 지니며 이에 대한 우리의 반응은 문화적 환경, 트렌드, 연령, 개인적 기호 등 다양한 요소에 영향을 받는다. ' - '컬러' 앱브로즈-해리스 지음

가산 혼합, 감산 혼합

- 빛의 색, RGB : 빛의 색을 표현하는 3원색인 RGB는 가산 혼합 방식의 컬러이다. 빛의 속성이기에 겹쳐짐에 따라 밝아지는 방식으로 주로 디지털 미디어인 모니터, 스마트폰 등의 스크린에 적용되는 컬러 방식이다.

- 물체의 색, CMYK : 구체적으로는 인쇄 컬러라고도 불리우는 CMYK는 감산 혼합 방식의 컬러이다. 물감을 덧칠하면 색이 어두워지는 것으로 연결지어 생각하면 된다 .주로 현실의 인쇄물, 페인팅 등이 적용될 때의 컬러이다.

색의 표시

- 색의 3속성 : 하나의 컬러는 색의 3속성을 통해 표현될 수 있다. RGB는 가산 혼합 방식에서의 구성 단위로써는 설명하기 좋으나, 실제 사람의 언어로 컬러를 이해하고 표현하기는 어렵다. 이에 색의 3속성인, 색 (hue/color) / 채도(saturation) / 명도 (brightness) 를 사용해서 컬러를 표현한다.

- 색 hue / color : 색이란 각 색의 고유한 특성을 의미하는 것이며, 시각적으로 구분할 수 있다.

- 채도 saturation : 채도는 색의 선명한 정도를 의미한다. 가장 높은 채도의 색은 선명하게 밝은 빛을 내며, 채도가 낮을 수록 가라 앉는 느낌을 준다.

- 명도 brightness : 명도란 색의 밝고 어두운 정도를 의미한다. 어두워질 수록 검정에 가까워지고 밝을 수록 색의 원색에 가까워진다. 명도와 채도는 별개의 개념이므로 혼동하지 않도록 한다.

- 색상환 the color whell : 배색을 색의 관계를 통해 진행하기 위해서 일반적으로 색상환을 사용한다. 색상환이란 색체 스펙트럼을 둥글게 나열한 형태이며, 색채 이론에서 중요한 역할을 한다. 색상환을 통해 색의 경향(난색/한색 구분)을 파악하거나 관계에 따른 배색 원리를 적용할 수 있다.

- 색상환과 색의 3속성 활용 색상황에 이전에 학습한 3속성을 대입하여 명도와 채도를 포함한 형태의 색상환을 통해 실제 컬러를 선택하고 적용한다.

색 상환을 활용한 배색

- 단색 Monochrome : 색 상환 중 한 가지 색을 의미한다.

- 단색 계열 Monochromatic : 단색 선정 후 명도를 달리하여 사용하는 배색을 의미한다.

- 유사색 Analogous : 선정한 하나의 주색과 그 옆에 바로 인접한 두 색을 의미한다. 유사색을 사용한 디자인은 자연스럽고 조화로운 느낌을 준다.

- 보색 Complementary : 마주보는 위치의 색을 의미하는 보색은, 강렬한 대비 효과로 활기있는 배색이 가능하다.

- 분리 보색 Split Complements : 마주보는 보색 중 한 쪽의 보색에 인접한 두 가지 색을 포함하여, 세 컬러의 배색을 의미한다.

- 삼색 프라이어드 Triad : 색상환에서 같은 간격으로 놓인 세 색의 조합으로, 세 가지 색 모두가 대비되므로 긴장감이 느껴진다.

- 색의 범위 / 색역 gamut

색역의 이해

- 정의 : 색역이란 색 체계와 디바이스에 따라 실제 재현할 수 있는 색의 범위를 의미한다. 따라서, 색역에 대한 개념 없이 컬러 작업을 하게 되면 의도치 않게 다른 컬러가 보여지기도 한다.

 ' 색역이란 특정 색 체계, 장비나 공정에서 재현할 수 있는 색의 범위를 가리킨다. 모니터, 스캐너, 그래픽 프로그램, 인쇄소의 출력기 등은 각각 재현할 수 있는 색의 범위, 즉 색 공간이 다르다. 색 공간이란 디자이너가 활용할 수 있는 색의 범위인 셈이다. 이 때문에 색재현 범위의 가장자리에 있는 색을 써서 작업한 후 다른 기기로 옮겨 재현하면 원본 디자인의 색과 다르게 나올 수도 있다.

'컬러' 앰브로즈-해리스 지음

- 색역의 비교 : RGB 색역과 CMYK를 비교해보면, 겹쳐지는 부분도 있지만 겹치지 않는 부분도 존재한다.따라서, 컬러모드가 달라질 경우 다른 컬러모드에서 표현하지 못하는 색일 있을 수 있다.

- 디바이스와 색역의 비교 : 색역도 별도로 존재하지만, 이러한 색역 또한 어떠한 디바이스냐에 따라서 표현 / 채집할 수 있는 색의 범위가 다르다는 점도 숙지해야 한다.


2. 컬러의 의미와 역할

- 컬러의 의미와 역할의 이해

제품 / 서비스 / 모바일 앱에서 컬러는 실제적으로 굉장히 중요한 역할을 하고 있으며, 단순한 취향을 넘어서 컬러의 의미도 포함하고 있다. 그럼에도 불구하고, 실제 프로젝트 진행시 임의로 선정하는 경우가 잦다. 또한, 컬러는 감정적인 부분도 포함하고 있으며 브랜드 아이덴티티를 나타내는데 중요한 역할을 한다. 더불어 모바일 앱에서는 컬러가 UI에도 적극적으로 사용되므로, UI유저 인터페이스에서의 컬러의 의미를 이해해야 한다.

- 컬러에 따른 감정

컬러별 의미

- 정의 : 컬러는 감정적인 의미로 해석할 수가 있다. 붉은 색은 열정, 사랑, 분노, 위험, 공격 등의 의미를 지닐 수 있다. 파란색은 지식, 차가움, 안정, 평온함 등의 의미를 지닐 수 있다. 이처럼 컬러는 긍정 / 부정의 의미를 동시에 지니며, 한 가지 색뿐만 아니라 여러 색을 조합해서 다양한 의미를 만들어 내기도 한다.

- 국가 / 문화별 컬러의 의미 차이 : 컬러는 또한 나라별로 그 의미를 다르게 가지기도 하며, 특정 컬러는 공통된 의미를 가지고 있기도 한다. 의미가 없거나, 사람들이 각기 다른 의미를 부여하는 경우도 있다. 이 경우는 해당 컬러가 보편적으로 받아들여지지 않는다고 해석하면 된다.

- 대상, 주제에 적합한 컬러 : 누군가를 대상으로 하느냐, 무엇을 주제로 하느냐에 따라 어울리는 컬러인지 아닌지에 대한 일반적인 의견도 존재한다. 변호사를 대상으로 한 앱인데, 핑크색이라면? 어린아이를 대상으로 한 앱인데, 검정색이라면? 희망 / 행복을 주제로 하는데, 회색이라면? 평온함을 주제로 하는데, 붉은색이라면?

브랜드와 컬러

- 기존 브랜드가 선점한 컬러 : 기존 브랜드가 컬러와 의미를 선점하고 있는 경우도 있으므로, 해당 분야에 진출하고자 할 때 주의해서 컬러를 정해야 한다.

- 컬러와 인지 심리 : 컬러를 통해서 감정, 의미를 가지느냐가 중요한 의미를 지니므로 컬러에 대한 심리학 학문도 존재하며, 제품/서비스/앱을 통해서 전달하고자 하는 가치와 브랜드, 그리고 컬러는 일관성이 있어야 한다. 삼성 전자의 블루 컬러를 통해서는 '신뢰'를, LG 전자의 레드 컬러를 통해서는 '열정, 도전'을 SK의 레드, 오랜지 컬러를 통해서는 열정, 도전 그리고'새로움, 이노베이션'을 떠올린다. 따라서 이와 같은 요소를 모바일 앱을 통해 전달하고자 한다면, 컬러에 따른 감정 요소를 구체적으로 이해하고 컬러 선정에 활용할 수 있어야 한다.

UI와 컬러

- 긍정 / 부정의 의미 : 브랜드 아이덴티티를 대표하는 컬러도 있지만, 브랜드 컬러와 별개의 역할로 UI에도 쓰여지며, 구체적으로는 GUI 작업 단계에서 명확히 표현된다. 가장 대표적으로는 YES / NO를 의미하는 초록색과 붉은색이 있으며, 사용자가 버튼 UI를 통해 행동을 선택해야 할 경우에 쓰인다. 사용자가 컬러의 사용 의미를 알고 있다면, 화면에서 정보를 파악하는데 시간을 적게 사용하고도 안심하고 쉽게 행동을 취하게 할 수 있다. 

- 위계 표시 : 모바일 앱의 화면에 텍스트가 표현될 때, 폰트의 굵기와 사이즈로도 중요 정보를 표현할 수 있으나, 컬러도 위계를 나타내는 데 큰 역할을 한다. 컬러의 배색을 통해 무엇이 중요하고 중요하지 않은지를 쉽게 파악할 수 있다. 실제로 사용자는 컬러를 통해 중요도를 파악하고 있다고 인지하지 못하지만, 이를 통해 자연스럽게 사용자의 행동을 유도할 수 있으며, 배색이 엉망일 경우에는 사용자가 불편하다고 여기거나 정보가 (부정적 의미에서) 많다고 여기게 되고 결과적으로 안 쓰게 된다. 중요한 것과 중요하지 않은 것을 디자이너가 의도적으로 이끄는 것은 위계를 디자인하는 것이다.

- 창의력 UI 컬러 적용 : 일반적으로 구매 버튼은 붉은 색이나, 경우에 따라 다른 컬러를 적용해서 그 의미를 전달할 수 있다.


3. 포토샵과 컬러

- 포토샵 Adobe Color CC와 배색

어도비 컬러 CC

- 소개 : 어도비에서는 컬러 배색을 손쉽게 할 수 있도록 도와주는, '어도비 컬러 CC'를 제공하고 있다. 어도비 컬러 CC는 대표 명칭이며, 총 3가지 경로를 통해 배색을 진행할 수 있다.

- Adoble ID를 통한 Creative Cloud 서비스 : 어도비 ID로 로그인해서 작업할 경우 각 서비스 간 작업 결과 공유 및 저장이 가능하다.

어도비 컬러 웹사이트

- 소개 : 이전에는 kuler 라는 명칭으로 제공되던 서비스가 이제는 color.adobe.com 웹 사이트를 통해서 제공하고 있다.

- 주요 기능 : 중앙 색상환을 통해서 배색 구성이 가능하며, 마우스로 해당 지점을 드래그하면 직관적으로 조절이 가능하다. 이러한 결과는 아래에서 바로 결과를 확인할 수 있다. 하단 컬러 부분을 선택한 후, 화살표 아이콘을 누를 경우 작업하고자 하는 컬러모드를 변경할 수 있다. (지원 컬러 모드 : CMYK, RGB, LAB, HSB, HEX)

-  색상 규칙 적용 : 화면 좌측의 '색상 규칙 Color Rules'기능을 통해 앞에서 학습한 배색 규칙을 적용하여 색 구성이 가능하다.

a. 유사

b. 단색

c. 삼각형

d. 보색

e. 혼합

- 이미지에 컬러 추출 : 기본 모드인 '만들기'에 있을 때, 우측 상단의 카메라 아이콘을 통해 이미지를 임포트 할 수 있다. 이를 통해 외부에서 가지고 온 이미지 화일에 대해 컬러 배색을 적용할 수 있으며, 컬러 추출도 가능하다. 이미지에서 자동으로 컬러를 분위기에 따라서 자동 추출해주는 기능이 있지만, 일반적으로 앱의 GUI에 대한 컬러 배색을 위해서는 '사용자 정의'로 필요 부분만을 추출하는 게 일반적이다. 컬러를 추출한 후, 좌측 위의 저장 버튼을 통해 (어도비 ID계정으로) 저장할 수 있다.

- 탐색 메뉴 : 탐색 메뉴에서는 다른 사람들이 저장해서 공개한 컬러 스와치를 볼 수 있다. 이를 통해 필요한 컬러를 별도의 작업 없이도 다른 사람들의 스와치를 사용할 수 있다. 서치 기능을 통해 이전에 공개로 저장한 스와치를 찾을 수도 있다.

- 내 테마 메뉴 : 내 테마 메뉴에는 이전에 저장한 나의 컬러 스와치들을 전부 확인할 수 있다.

모바일 앱 'Adobe Capture CC'

- 소개 : 웹 사이트 외에도 모바일 앱으로도 어도비 컬러 기능을 사용할 수 있다. 아이폰 앱과 안드로이드폰 앱으로 제공되고 있다.(무료)

- 4개의 앱을 하나로 통합 : 어도비의 다양한 모바일 앱들을 2015년 Adobe CC 업데이트시 'Adobe Capture CC'앱에 모아서 1개의 앱으로 만들어 출시 하였다. 총 4가지인 Color, Shape, Brush, Look 기능이 제공된다.

- Color 메뉴 : 여러 기능 중에서도 본 과정에서 살펴볼 기능은, 'Color'이다. 앱 실행 후 나오는 메뉴 중에서 Color를 선택하면 된다.

- 이미지 캡처 및 컬러 배색 : 모바일 앱이라 당연히 UI는 다르지만, 제공하는 기능을 동일하다. 다만 카메라 기능을 통해 원하는 이미지를 촬영한 후 컬러 캡처가 가능하며, 폰에서 캡처 이미지를 불러와서 바로 컬러 스와치 추출이 가능하다.

- 불러온이미지에 대한 색상 무드 적용 : 불러온 이미지 또한, 상단의 색상 무드 아이콘(스마일)을 눌러서 원하는무드를 적용할 수 있다. 라이브러리에 저장된 컬러 스와치를 선택한 후, 편집 기능을 통해 색상 편집'을 진행할 수 있다.

포토샵과 Adobe Color Themes 

- 소개 : 포토샵에서도 지금까지 소개한 컬러 CC의 기능을 사용할 수 있다. 포토샵 CC의 상위 메뉴 '창 Window'에서 'Extensions > Adobe Color Themes'를 선택하면 도구 창으로 열 수 있다. 

-  포토샵 내에서 Adobe Color Themes : 포토샵에서 해당 도구를 통해, 웹과 모바일 앱에서 제공한 모든 기능이 동일하게 사용할 수 있다. 상단 메뉴 : 만들기 Create / 탐색 Explore / 내 테마 My Themes

- 포토샵 내에서 Adobe Color Themes : 내 테마 메뉴에서는 이전에 Adobe ID를 사용하여 저장한 '페이스북 ~' 컬러 스와치를 볼 수 있으며, 이를 테마 옆의 아이콘을 눌러서 '스와치로 저장'을 선택하면, 포토샵의 스와치로 바로 옮길 수 있어 유용하다.


학습정리

컬러의 기본 이론

 - 컬러의 기본 개념 : 가산 혼합, 감산 혼합, 색의 3속성인 색, 명도, 채도에 대해 학습하였다. 이 중에서 색의 3속성에 대한 개념을 명확히 한다면, 실제 배색에도 큰 도움이 된다.

 - 색상환과 배색 이론 : 색상환의 구성 이론과 함께, 배색 이론을 학습하였다. 이를 통해 색의 관계를 시각적으로 확인하며 배색을 진행할 수 있는 방법을 배울 수 있다.

 - 색역의 이해 : 가산 혼합이냐 감산 혼합이냐에 따라서도 표현할 수 있는 색의 범위가 달라지지만, 어떤 디바이스냐에 따라서도 표현 / 채집할 수 있는 범위가 달라지는 점을 기억해야 한다.

컬러의 의미와 역할

 - 컬러에 따른 감정 : 컬러는 단순히 취향 이상의 의미를 지니고 있다. 컬러에 따른 감정의 의미 브랜드 아이덴티티의 의미와 역할은 물론, UI에서도 컬러는 그 고유의 중요한 역할을 하고 있으므로 이러한 컬러의 구체적인 의미와 각 역할에 대해서 충분히 의식하고 컬러를 배색하고 사용할 수 있어야 한다.

포토샵과 컬러

 - 포토샵 Adobe Color CC와 배색 : 어도비에서는 웹 사이트, 모바일 앱, 포토샵 익스텐션을 통해 컬러 배색을 손쉽게 할 수 있는 (통칭) Adobe Color CC를 제공해주고 있다. 각 프로그램마다 장단점이 있으므로 필요에 따라 적절히 사용하여 컬러 배색 작업을 진행하도록 한다.


10강 컬러 (2)


1. 아이폰과 컬러

- 아이폰의 컬러 정의

커뮤니케이션을 위한 컬러

- 개념 : 아이폰에서 컬러는 단순하게 색을 표현하는 것이 아니라, 컬러를 통해 인터랙션 정보와 시각적 일관성에 대한 정보를 얻을 수 있다.

- 참조 사항 : 

인터랙션을 지정한 컬러를 비 인터랙션 내용에 적용하지 않는다. 

iOS7부터 메인 컬러가 지정된 요소들은 인터랙션을 적용한다. 그렇지만 동일 컬러를 인터랙션이 되지 않는 요소들에 적용할 경우에는 사용자들이 혼란을 겪게 된다. 마치 버튼이 눌리지 않는 것과 같은 혼란을 줄 수 있다.

사용 상황의 컬러 대비를 항상 체크한다.

테스트 걸러와 배경 컬러의 대비가 명확하게 나오지 않을 경우, 구분이 되기 어려울 수 있다. 또한 밝은 대낮의 야외에서 사용하는 경우, 늦은 밤 어두운 곳에서 사용하는 경우가 있을 수도 있으므로 앱에 대한 컬러를 항상 주의한다.

메인 컬러의 적용

- 메인 컬러와 UI의 단순화 : 서비스의 메인 컬러는 일반적으로 1개를 선택하여, 전체 UI에 일관적으로 적용한다.

- 희색 배경 컬러 : 배경은 희색 사용을 추천하며, 흰 바탕의 검은 글자와 같이 전통적 개념의 색 배열을 통해 좀 더 쉽게 콘텐츠에 주목할 수 있도록 배색하는 것을 권장한다.

- 새로워진 컬러 팔레트 : iOS7 업데이트 후부터 새로운 컬러 팔레트를 적용하고 있다. 직접적으로 브랜드 컬러를 적용하지 않더라도, 운영체제에서 일반적 쓰이는 컬러와 얼마나 차이가 나는지는 알 수 있어야 한다.

- 빌트인 앱 (혹은 디폴트 앱) 과 비교 : 아이폰에 기본 설치된 빈트인 앱들과 비교해보아 컬러의 쓰임과 적용을 좀 더 이해할 수 있도록 한다.


2. 안드로이드와 컬러

- 구글 머티리얼 디자인과 컬러

구글 머티리얼 디자인 컬러

- 개념 : 구글의 디자인 테마인 머티리얼 디자인 테마를 안드로이드에도 채용함에 따라, 컬러 또한 머티리얼 디자인의 컬러를 당연히 적용하게 되었다.

- 컬러의 중요성 : 디지털 페이퍼, 컬러 위계, 모션 & 인터랙션을 머티리얼 디자인의 3대 특성으로 대표하며, 컬러도 중요 3요소 중 하나이다.

- 컬러 위계 : 프린트 디자인의 개념을 적극 수용하여 컬러, 이미지, 레이아웃 등의 개념을 모바일에 구현함으로써 특징적인 디자인을 구현하는 개념

- 컬러의 정의 : 머티리얼 디자인에서의 컬러는, 대담한 컬러 배색과 하이라이트 컬러의 사용, 그림자가 표현되는 다양한 상황을 주로 표현한다. 현대 건축, 도로 표지판, 마킹 테입 등에서 아이디어를 얻었으며, 컬러는 새롭고 자극적인 배색을 추천한다.

머티리얼 디자인 컬러 팔레트

- 다양한 컬러의 팔레트 : 머티리얼 디자인 컬러를 선택할 수 있돌고 컬러 팔레트를 제공해주고 있으며, 공식 사이트의 컬러 섹션을 통해서는 포토샵 스와치 컬러 팔레트 화일도 받을 수 있다.

https://www.google.com/design/spec/style/color.html

- 머티리얼 컬러 계획 : 자신의 프로젝트에 적합한 컬러를 선택하거나, 만약 선택하지 못했다면 제공되는 컬러 내에서 컬러를 선택하는 것도 추천한다. 컬러는 메인 컬러(500)로 1개 선택 후, 2개의 메인의 서브 컬러 (예에서는 (700), (800)) 선택, 2팔레트에서 1개의 엑센트 컬러를 선택하면 된다.

- 메인 컬러 선택 : 컬러는 메인 컬러(500)로 1개 선택 후, 2개의 메인의 서브 컬러를 팔레트에서 고르면 된다.

- 엑센트 컬러 선택 : 메인 컬러 계열이 아닌, 대비 되는 다른 컬러 중 하단의 'A~' 가 붙어 있는 컬러 중에 하나를 엑센트 컬러로 선택한다.

- 엑센트 컬러의 역할 : 엑센트 컬러는 플로팅 액션 버튼, 슬라이더, 스위치, 인디케이터, 링크 등의 사용자 인터랙션이 필요한 부분 및 관련 부분에 사용된다.

머티리얼 디자인 컬러 Do & Don't

- 텍스트 내의 컬러 남용 자제 : 웹 링크를 나타내는 텍스트 내의 엑센트 컬러와 달리 전체 텍스트에 엑센트 컬러를 넣는 것은 권장하지 않는다.

- 앱 바에 엑센트 컬러 사용 금지 : 미니 플로팅 액션 버튼에 엑센트 컬러가 적용된 좋은 예와 달리, 액션 바에 엑센트 컬러가 들어온 경우는 나쁜 예이다. 플로팅 액션 버튼과 동일 색이 될 경우에는 색 구별이 잘 가지 않으므로 추천하지 않는다.


3. 모바일 컬러 기획

- 마켓 리서치

관련 리서치

- 리스트업 : 디자인 프로젝트가 시작되면, 최소한 경쟁 서비스와 카테고리 등에 대한 정보를 알 수 있다. 이에 해당 서비스들의 리스트를 작성한 후 다운 받아서 주요 화면을 체크한다.

- 컬러 추출 : 컬러는 메인 컬러와 보조 컬러로 크게 이등분 할 수 있다. 주로 앱 아이콘에서 확인할 수 있는 메인 컬러와 앱 내의 UI를 구성하고 있는 컬러이다.

- 어도비 Color CC를 활용한 추출 : 메인 컬러와 보조 컬러를 어도비 Color CC 관계 서비스를 활용해서 추출한다.

- 메인 컬러 리스트 업 : 메인 컬러는 메인 컬러끼리 모아서 분석한다. 주로 어떤 컬러를 쓰는지를 중심으로 컬러를 체크한다. 이를 통해 앱의 메인 컬러 트렌드와 진행 방향을 알 수 있다.

(SNS는 파란색, 카메라는 따뜻하고 밝은, 쇼핑은 붉은색 위주로 쓴다)

- 서브 컬러 리스트 업 : UI를 구성하고 있는 컬러를 리스트 업 한다. 이를 통해 UI를 구성하고 있는 대다수의 컬러를 이해할 수 있다. 크게 구분한다면, UI 컴포넌트들의 컬러와 폰트로 나눌 수 있다.

- UI 컴포넌트의 컬러 : UI 컴포넌트의 컬러를 통해서는, 실제 UI를 구성할 때 필요한 컬러의 범위를 이해할 수 있다.

- 타이포그래피와 컬러 : 타이포그래피, 즉 폰트의 컬러 쓰임에 대한 추출을 통해서 폰트의 위계, 사용 방식에 대해 이해할 수 있다.

분석과 적용

- 리서치 분석 : 메인 컬러, 서브 컬러를 모아서 비교 분석을 통해 앱 컬러의 방향을 정한다. 필요에 따라서는 화면에 보이는 것처럼, 포지셔닝 맵을 활용하여 컬러를 선정할 수도 있다.

- 컬러의 적용 : 실제 컬러를 적용해보는 단계. 대략적인 컬러의 방향을 잡았다 하더라도 화면을 구성하면서 보게 되면 컬러를 수정하게 될 필요가 있으므로, 선정 후에도 수정의 경우가 있다는 점은 사전에 이해하고 작업을 진행한다.

- 컬러의 수정 : 서브 컬러는 대부분 UI에 적용되는 예이므로, 사전에 기획하고 디자인하게 되면 거의 수정할 경우가 없다. 하지만 메인 컬러는 앱의 전체적인 인상은 물론, 브랜딩의 개념을 포함하고 있으므로 수정하게 될 수 있다.


학습정리

아이폰과 커러

 - 아이폰의 컬러 정의 : 아이폰은 메인 컬러를 브랜딩의 요소 외에도 전반적으로 사용하고 있다. 또한 컬러를 적용함으로써, 이를 통해 UI를 네비게이션 용도로 사용하게 되어 결과적으로는 UI 형태를 단순화 하였다고 할 수 있다. 따라서, 메인 컬러를 일관되게 사용하는 것이 중요한 점이다.

구글 머티리얼 디자인 안드로이드 앱과 컬러

 - 구글 머티리얼 디자인과 컬러 : 구글 머티리얼 디자인의 컬러는 중요 3대 요소 중 하나이다. 또한, 컬러는 서비스의 전반적인 인상을 좌우하는 큰 역할을 하므로, 신중하게 선택해야 한다. 구글 머티리얼 디자인에서는 고유의 컬러 팔레트를 구성하며, 자체 컬러가 지정되지 않았을 경우 머티리얼 디자인 컬러를 사용하는 것을 권장한다. 컬러는 크게 메인 컬러와 엑센트 컬러의 2가지로 구분지어 볼 수 있으며, 컬러 선정 후 실제 적용 사례 등을 참조하며 적절히 사용하도록 한다.

모바일 컬러 기획

 - 마켓 리서치 : 모바일 디자인을 위해 경쟁 및 관계 서비스들의 컬러를 분석해볼 필요가 있다. 이를 통해 구체적인 사용 사례, 범위 등을 파악할 수 있으며, 이를 근거로 자신의 프로젝트에 적합한 컬러 배색을 할 수 있다. 범위는 메인 컬러와 UI 관련 컬러로 크게 나누어 볼 수 있다.


11강 타이포그래피


1. 모바일과 타이포그래피

- 타이포그래피의 이해

타이포그래피의 정의 ( Typography : 문자를 통한 커뮤니케이션 )

- 단순하게 폰트를 디자이너 마음대로 배열하는 것이 아니라, 구체적 대상, 매체(모바일), 콘텐츠 종류와 양, 비즈니스의 목표와 의도를 고려해서 폰트를 사용해야 한다.

- 고려사항 : 대상, 모바일(매체), 콘텐츠, 비즈니스 목표 & 의도

대상과 타이포그래피

- 유아와 성인은 지적 수준에서 큰 차이를 보인다. 각 대상의 특성에 맞추어 폰트를 적절히 사용해야 한다.

- 유아를 대상으로 할 경우, 글자를 안 씀

- 클래시 오브 클랜은 게임과 어울리는 폰트 사용

매체와 타이포그래피

- 모바일과 잡지, 포스터, 데스크톱 컴퓨터는 각기 다른 방식으로 보여지고 쓰여지고 사용된다. 매체, 여기에서는 모바일을 기준으로 하므로, 디지털 스크린, 작은 스크린 / 손가락 사용에 최적화 되어야 한다. 더불어 모바일 운영체제에 따라 폰트의 쓰임에 대한 가이드가 있으므로 이를 따라야 한다.

콘텐츠와 타이포그래피

- 텍스트, 사진, 동영상, 음악 등, 다루는 콘텐츠에 따라 폰트의 쓰임이 달라진다.

- 운영체제의 타이포그래피

운영체제 디폴트 폰트의 이해

- 앱 디자인시 폰트는 주로 디바이스 탑재 폰트를 주로 사용한다. 그리고 모바일 운영체제별로 탑재하고 있는 폰트들이 다르다. 따라서 이러한 차이가 폰트 사용 및 타이포그래피에 차이를 만든다.

- iOS 디폴트 영문 폰트 San Francisco

- 머티리얼 디자인 영문 폰트 Roboto

개발 툴과 모바일 앱 탑재 폰트

- 개발 툴과 모바일 앱 탑재 폰트를 맞추어야 한다.

- 개발 툴, 포토샵, 디바이스 탑재 폰트가 서로 맞는지 체크해야 한다.

- 빌트인 앱과 표준 타이포그래피의 이해

빌트인 앱 = 운영체제별 표준 타이포그래피의 표본

- 운영체제별로 기본적으로 탑재된 앱을 빌트인 앱 (혹은 디폴트 앱)이라 부른다. 해당 앱을 디자인 분석하고 타이포그래피의 사용을 이해한다면, 표준을 이해하는 것과 같다.


2. 아이폰과 타이포그래피

- 아이폰과 타이포그래피

아이폰 타이포그래피 활용 팁

- 폰트 훼밀리 사용 : 일반적으로는 앱 내에서 한 폰트 웨밀리 만을 사용한다. 여러 개의 폰트들을 사용하는 것은 추천하지 않는다.

- UI의 역할을 하는 타이포그래피 : 텍스트에 컬러가 적용되거나, 아이콘, 보더 등과 함께 사용되면 ui 버튼의 역할을 하게 된다. 아이폰 사용자들이 이를 식별 가능하고 조작 가능한 방식으로 디자인해야 한다.

- 효과적 컬러 사용을 통한 명확한 UI 역할 : 조작을 위한 텍스트의 컬러 적용시, 일반 텍스트와 명확히 구분되게 적용하는 것을 권장한다.

컬러 사용시 '위계'를 명심하라

- 텍스트에는 반드시 컬러의 위계를 적용하라 : 화면에서 텍스트의 중요 정도를 빠르게 파악할 수 있도록 하되, 사이즈는 물론 컬러로도 그러한 의도를 전달할 수 있어야 한다.

San Francisco, Apple SD Gothic Neo

- iOS 9 이후의 영문 시스템 폰트 San Francisco : 운영체제별로 기본적으로 탑재된 앱을 빌트인 앱(혹은 디폴트 앱)이라 부른다. 해당 앱을 디자인 분석하고 타이포그래피의 사용을 이해한다면, 표준을 이해하는 것과 같다.

https://developer.apple.com/fonts/

- iOS의 한글 시스템 폰트, 애플 산돌 고딕 네오 : 운영체제별로 기본적으로 탑재된 앱을 빌트인 앱 (혹은 디폴트 앱)이라 부른다. 해당 앱을 디자인 분석하고 타이포그래피의 사용을 이해한다면, 표준을 이해하는 것과 같다.

http://www.sandollcloud.com/portfolio...page/gothic-neo1/


3. 안드로이드와 타이포그래피

- 머티리얼 디자인과 타이포그래피

안드로이드 타이포그래피 활용 팁

- 영문 폰트와 한글 폰트의 확립 : 머티리얼 디자인이 적용되면서, 영문은 신 버전의 Roboto 폰트가 선정되었고 한글은 Noto Sans CJK KR 폰트가 개발되어 적용되었다.

- 폰트의 구분

English, English-like Scripts

Dense Scripts (Chines Japan Korean)

Tall Scripts (아랍쪽)                        이렇게 3종으로 폰트를 구분한다.

- 폰트 사이즈 표준화

English, English-like Scripts 사이즈 표준화를 정교하게 진행하였으며

Dense Scripts / Tall Scripts 에 대한 사이즈 또한 명확하게 구성하였다.

- Roboto, Noto Sans CJK KR

영문 표준 시스템 폰트

- 새로워진 Roboto 폰트가 제공되며, 머티리얼 디자인에서의 표준 폰트로 사용된다.

주목받고 있는 'Noto Sans CJK KR' 폰트

- 머티리얼 디자인의 한글 표준 시스템 폰트인 Noto Sans CJK KR 폰트는 총 7개의 폰트로 구성되어 있다.

- http://www.google.com/get/noto/

Noto Sans 폰트를 통해 해외 로컬라이제이션이 편리해졌다.

- 중국과 일본 등을 대상으로 한 폰트도 굉장히 많아 졌으며, 폰트별로 한글과도 동일한 7종의 폰트로 훼밀리를 구성해놓아 현지화시 폰트 차이로 인한 디자인 어려움을 많이 없애준다.


4. 모바일 환경에서의 타이포그래피 기획

- 디자인 가이드 참조

운영체제의 공식 개발자 사이트 내의 관계 페이지 참조한다.

- 폰트는 사례에서 정보를 얻는 것도 중요하지만, 정해진 치수가 있을 수 있으므로 정확한 정보는 각 운영체제의 개발자 사이트에서 관련 섹션의 정보를 얻는다. 또한 비정기적으로 업데이트가 되므로, 필요시 관련 내용을 의무적으로 학습해야 한다. 게임이 아닌 경우, 표준 폰트에서부터 시작하는 것을 권장한다.

가이드보다는 앱이 먼저다.

- 애플의 아이폰은 가이드 문서와 앱에 대한 설명이 유사하게 진행되는 편이나, 구글 안드로이드는 머티리얼 디자인 가이드보다 먼저 선행되어 앱 디자인이 업데이트 되는 경향이 있으므로, 최신 앱의 정보를 얻는 방식도 적절히 맞추어 진행한다.

- 템플릿의 활용

공식 리소스 및 외부 리소스를 적극 활용한다.

- GUI 디자이너들은 포토샵 psd 화일을 통해서 직접적인 정보를 얻기도 한다. 공식 리소스 혹은 비공식 리소스에서 포토샵 화일을 획득하고, 관련 정보는 직접 포토샵 psd 화일에서 얻는다. 사전에 미리 셋팅된 리소스를 활용하면 손쉽게 GUI 디자인이 가능하다.

머티리얼 디자인 리소스 페이지

- 구글 머티리얼 디자인 페이지에는 Resources 섹션이 있는데, 이 곳에서 레이아웃 템플릿, 폰트, 컬러 스와치 등 다양한 공식 리소스를 제공하고 있으므로 반드시 체크한다.

https://www.google.com/design/spec/resources/color-palettes.html

- 타이포그래피 적용

대상, 모바일, 콘텐츠, 비즈니스 목적/의도를 명확히 한다.

- 타이포그래피를 적용할 때는 언제나 프로젝트의 관련 요소들ㅇ르 참조하여 구체화하도록 한다.

일관성의 적용

- 폰트의 사용 또한 일관성 있게 적용되어야 한다. 전체에 일관성 있게 적용하도록 해야한다. 사이즈, 컬러, 두께, 위치 등과 관련하여 규정을 정하게 되면 반드시 따라야 한다. 앱에서는 이제 텍스트가 UI의 역할도 하게 됨에 따라 이러한 점을 따르는 것이 굉장히 중요하다.


학습정리

모바일과 타이포그래피

 - 타이포그래피의 이해 : 타이포그래피란 말은, 대상, 매체, 콘텐츠, 목표와 의도를 반영하여 문자를 활용한 디자인을 의미한다.

 - 운영체제의 타이포그래피 : 모바일 운영체제별로 전용 시스템 폰트가 있으며, 기획시 적극 적용하는 것을 권장한다. 개발툴 포토샵, 기획 단계에서도 해당 폰트를 사용하여 앱을 디자인하도록 한다.

 - 빌트인 앱과 표준 타이포그래피의 이해 : 빌트인 앱은 운영체제 별로 기본적으로 제공되느 앱이며, 운영체제의 표준 디자인 가이드라인을 잘 따르고 있으므로, 이를 통해 앱의 사용 방식을 충분히 이해하고 자신의 프로젝트에도 참조하여 적용하는 것을 권장한다.

아이폰과 타이포그래피

 - 아이폰과 타이포그래피 : 아이폰에서는 앱 디자인시 1개의 폰트 훼밀리를 중심으로 타이포그래피를 디자인하며, 텍스트는 UI의 역할도 겸하고 있는 경우가 있으므로 주의하여 사용한다. 또한 컬러를 적절히 사용하여 UI에 적용되는 텍스트와 일반 텍스트를 구분한다.

 - San Francisco, Apple SD Gothic Neo : 아이폰의 디폴트 영문 시스템 폰트는 샌프란시스코이며, 한글은 애플 산돌 고딕 네오 폰트를 사용한다.

안드로이드와 타이포그래피

 - 머티리얼 디자인과 타이포그래피 : 머티리얼 디자인에 타이포그래피 디자인을 위한 디자인 팁에 대해 간략히 알아보았다. 머티리얼 디자인에서부터는 한글 폰트도 확립되었으며, 총 3개의 범주로 폰트의 사용군을 나누고 있다. 추가적인 정보는 공식 사이트에서도 확인해보도록 한다.

 - Roboto, Noto Sans CJK KR : 머티리얼 디자인에서 표준 시스템 영문 폰트는 Roboto, 한글은 Noto Sans CJK KR 폰트를 사용한다.

모바일 환경에서의 타이포그래피 적용

 - 디자인 가이드 참조 : 각 운영체제별 디자인 가이드를 참조하고 실제 앱의 사용 방식과 디자인 분석도 병행한다면, 앱의 타이포그래피 디자인에 대해 충분히 이해할 수 있을 것이다.

 - 템플릿의 활용 : 타이포그래피의 경우, psd 템플릿을 적극 활용한다면 손쉽게 앱의 타이포그래피 디자인을 진행할 수 있다.

 - 타이포그래피 적용 : 앱을 사용하는 사람이 누구이며, 어떠한 카테고리의 앱을 디자인하는지, 주로 다루고 있는 콘텐츠가 무엇인지 등을 고려하여 타이포그래피를 적용한다.


12강 레이아웃


1. 레이아웃과 그리드 시스템의 이해

- 레이아웃의 이해

레이아웃의 의미

- 레이아웃과 매체 : 콘텐츠의 배치 / 배열을 뜻하는 레이아웃은 주로 한 화면의 구성을 의미한다. 과거에는 책, 신문, 광고 등의 인쇄 매체를 중심으로 다양한 디자인들을 볼 수 있었으나, 최근에는 디지털 디바이스의 레이아웃이 주요한 관심사와 매체로 집중되고 있다.

- 레이아웃의 의미 : 레이아웃은 내용을 어디에 어떠한 식으로 보이게 만드는 지에 대한 실무적인 작업이다.

 ' 레이아웃은 각 디자인 요소를 전체 미적 계획에 맞춰 한정된 공간에 적절히 배열하는 것이다. 이를 테면 형태와 공간의 경영이다. 레이아웃의 주된 목적은 독자들이 의식적인 노력을 기울이지 않고도 텍스트와 이미지를 받아들일 수 있도록 전달하는데 있다. 결과물이 인쇄물이건 전자 매체이건 간에 훌륭한 레이아웃은 독자들이 복잡한 정보들 가운데 필요한 부분을 쉽게 찾을 수 있다. ' 

'레이아웃'앱브로즈-해리스 지음

- 레이아웃의 고려 사항 : 앞서 학습한 타이포그래피와 동일하게, 대상, 매체, 콘텐츠, 목표와 의도를 고려해야 한다. 이를 통해 대상의 지적 수준, 매체의 특성, 전달하고자 하는 의도와 목적에 따라 콘텐츠를 배치하게 된다.

- 레이아웃에 있어 콘텐츠의 중요성 : 레이아웃에 절대 법칙이 반드시 존재하는 것은 아니지만, 어느 경우에서건 콘텐츠 즉 내용이 우선시 되어야 한다는 사실은 변함이 없다.

- 레이아웃의 한계 : 레이아웃은 이처럼, 디자이너가 표현하고자 하는 콘텐츠를 매체라는 정해진 공간과 방법 안에 의도를 가지고 배치하는 것을 의미한다. 하지만 콘텐츠가 많아지고, 페이지가 많아진다면 레이아웃은 이러한 많은 양을 처리하기에 어려움을 겪게 된다. 즉, 일관성 있고 체계적인 디자인을 위한 기준점이 필요하게 되는 것을 의미한다. 따라서, 이러한 상황에 대해서는, 작업에 있어 질서를 부여하는 그리드가 좋은 선택이 될 수 있다.

- 그리스 시스템의 이해

그리드 시스템의 의미

- 그리드의 정의 : 보이지 않는 가이드라인이라고 설명할 수 있는 그리드는 디자인 작업에 있어 일관성과 질서라는 개념을 더해줄 수 있다.

' 그리드란 주어진 공간에 디자인 요소들을 가장 적절하게 배치하기 위한 도구로써 디자인 결정 과정을 쉽게 해 준다. 그리드는 디자인에 더 체계적으로 접근할 수 있게 하며, 공간 비례나 차수 면에서 구성 요소 배치에 정확도를 높여준다.'                                    '레이아웃'앱브로즈-해리스 지음

- 그리드의 종류 : 그리드는 필요에 따라 단순하게도 복잡하게도 만들 수 있기 때문에 얼마든지 다양한 형태의 그리드가 나올 수 있다. 어떠한 그리드를 적용하건 간에, 디자이너가 디자인 작업을 하는데 있어 일관성과 질서라는 요소를 적용하는 데 있어 도움을 준다면 적합한 그리드라 할 수 있겠다. 크게 나눈다면, 인쇄 매체에 대한 그리드와 디지털 매체에 대한 그리드로 나누어 볼 수 있다.

레이아웃과 그리드 시스템의 이해

- 레이아웃과 그리드 시스템의 이해 : 그리드 시스템은 기준 선이자 가이드라인으로 존재한다. 이러한 그리드를 바탕으로 매체의 페이지 혹은 면에 대한 디자인이 이루어진다. 이러한 구체적 배치 작업을 레이아웃이라 한다. 따라서 그리드 시스템은 구체적인 디자인 이전에 공간에 대한 계획 / 기획과 같다고 할 수 있으며, 레이아웃 작업은 구체적인 배치 작업이라 할 수 있다.


2. 앱과 터치 제스처에 맞는 레이아웃

- 터치 제스처와 앱

모바일의 조작 방식, 터치 제스처

- 터치 제스처의 이해 : 터치 제스처, 즉 '손가락을 사용해서 특정 동작을 수행함으로써, 모바일 디바이스에서 의도한 결과를 얻어내는 조작 방식'이라 할 수 있다. 이러한 터치 제스처는 모바일 디바이스의 주요 조작 수단이며, 데스크톱에서 키보드와 마우스를 통해 조작하는 것처럼, 모바일 앱을 사용하는 방식이다.

- 터치 제스처와 레이아웃의 이해 : 모바일의 조작 방식이 터치 제스처이므로, 그에 맞는 레이아웃으로 모바일의 화면이 구성되었다. 즉, 손가락 터치에 적합한 크기의 버튼과 스위치, 콘트롤러 등으로 콤포넌트 등이 만들어졌으며, 글자의 사이즈 또한 그에 맞추어 정해지게 되었다.

- 운영체제별 터치 제스처를 위한 사이즈 : 아이폰과 안드로이드폰, 각 운영체제별로 이러한 최소 영역에 대한 값이 규정되어 있다.

아이폰 : 44x44point = 99x99px(Retina)

안드로이드폰 : 48x48 dp = 7~10mm

- 실제 디자인에 있어 터치 최소 사이즈의 적용 : 최대한 터치 영역에 권장 사이즈를 따라야 하겠지만, 디자인시 따르지 못하게 되는 경우에는 주변의 영역에 여유 공간을 둠으로써 이러한 문제를 해결할 수 있다. 또는 타업체의 디자인 사례를 통해 해결 방안을 리서치하는 것도 권장한다.

- 앱의 기본 레이아웃

모바일 앱의 기본 레이아웃 구성

- 최소 구성 그리드 : 모바일 앱은 디지털 매체이므로, 동일 디바이스 내에서 보여지는 레이아웃이 계속적으로 변화한다. 또한 가로/세로 변환도 이루어지는 특징이 있다. 그럼에도 불구하고, 기본적인 모바일 앱의 그리드로써의 단위는 다음과 같다.

권장 터치 영역 사이즈가 기준이며, 가로 컬럼(행)이 시작점이다.

- 아이폰 44pt, 안드로이드 48dp 높이의 컬럼을 기준 시작 단위로 볼 수 있다.

- 높이는 높아질 수 있지만, 줄어들게 될 경우 터치에 제약을 받을 수 있다.

- 화면 구성 그리드 : 양측 운영체제에 모두 적용되는 기본 그리드의 개념을 살펴본다.

최상단 : 위치 정보 / 최고 중요 정보

중앙부분 : 콘텐츠 좌우에 16px의 안전영역인 공간이 있다. 각 콘텐츠의 높이는 48px를 기준으로 잡는다.

최하단 : 도구 / 기능 / 네비게이션

최상단과 중앙부분 사이, 중앙부분과 최하단의 사이에는 공간을 띄워둔다.

- 의도적 화이트 스페이스 : 시각적 정보 그룹핑을 위해 의도적 화이트 스페이스는 중요하다.

- 정렬의 효과적 사용 : 화면의 좌측 정렬 영역을 우선적으로 시각의 흐름으로 정보를 파악하는 곳이므로, 위계를 정확히 제공하여 정보의 중요도에 따라 사용자가 정보를 받아들일 수 있게한다.


3. UI 디자인의 이해

- UI 디자인 프로세스

전체 디자인 프로세스 리뷰

- UX-UI-GUI, 각 업무 프로세스 내 UI 디자인의 위치를 확인한다.

↓프로젝트 구성 : 비즈니스 구성

↓UX 디자인 : 사용자 정의

↓UI 시나리오 문서 : 콘텐츠와 레이아웃, 네비게이션

↓GUI 디자인 : 콘셉트, 디자인 스타일, 컬러, 폰트, 형태

UI 디자인 프로세스의 이해

- 요구 사항, 관련 정보의 수합 : 구체적인 요구 사항, 내부 목표, 관련 담당자 미팅 등을 통해 모바일 서비스의 구체적인 목표를 확인하고, 관련 정보를 수집한다.

- 플로우 차트, 인포메이션 아키텍처 등 구성 : 서비스의 흐름, 정보 구조 구성 등의 작업을 통해 구체적으로 앱 내에 포함될 요소와 흐름을 정의한다.

- 페이퍼 와이어프레임스케치 : 제공, 수합, 필요 정보에 근거하여 모바일 화면을 스케치로 그려본다. 경우에 따라서는 페이퍼 / 디지털 프로토타입을 제작하여 테스트 (프로토타이핑) 한다.

- (가능시) 포토샵으로 디지털 와이어 프레임을 제작한다 : 손 스케치는 정교하지 못하므로, (가능시) 포토샵으로 UI 와이어프레임을 디자인한다. 일반적으로는 이 단계에 UI 시나리오 문서를 작성한다. (PPT)

- GUI 디자인 : GUI 디자인은 UI 시나리오 문서에 근거하여 GUI 디자인을 진행한다. 포토샵을 사용하며 디자인 후에는 각 이미지들을 추출하여 개발자들에게 전달한다.

- UI 시나리오 문서의 이해

시나리오 문서의 의미와 역할

- UI 시나리오 (기획 문서) : 콘텐츠와 레이아웃, 그리고 페이지 간의 네비게이션을 구체적으로 표현한 문서이며 일반적으로는 기획 문서라고 총칭하기도 한다. 이를 기반으로 GUI 디자인이 이루어지므로, 실제 GUI 디자이너는 이 문서를 충분히 이해하고 GUI 디자인으로 해석할 수 있어야 하겠다. 경우에 따라서는 본 문서에 간략하게 정의한 사용자 정의 앱의 목적 등을 넣기도 한다.

- UI 시나리오 (기획 문서) 사례 - 소개 페이지 : 서비스 소개, 비즈니스 목적, 사용자 정의 등은 이렇게 간략하게 표현하기도 한다.

- UI 시나리오 (기획 문서) 사례 - IA : 인포메이션 아키텍처를 첨부한 문서의 모습

- UI 시나리오 (기획 문서) 사례 - 페이지 레이아웃 : 페이지 레이아웃은 아래와 같이 디테일하게 설명을 포함하여 작성한다.

UI 디자인 패턴의 개념

- UI 디자인 패턴의 정의 : 디자인 패턴이라는 용어는, 이전에 누군가가 해결해놓은 사례를 참조하여 내가 진행하는 업무에 활용하여, 내가 가진 문제 / 상황을 해결하는 것을 의미한다. UI 디자인 및 GUI 디자인시 이러한 디자인 패턴의 개념이 있으면 좀 더 적절한 레이아웃을 구현할 수 있다.

- UI 레이아웃의 범주화 및 리서치 : 페이스북 타임라인 외에도 다양한 타임라인 디자인이 존재하는 것처럼, 내가 작업하는 페이지가 어느 패턴에 속하는지를 먼저 파악한 후, 그에 맞는 페이지들을 리서치하여 최종 작업물에 그러한 내용을 반영하는 것을 의미한다.


학습정리

레이아웃과 그리드 시스템의 이해

 - 레이아웃의 이해 : 레이아웃은 실제적으로 콘텐츠를 배치하는 작업이며, 이를 통해 매체를 접하는 사람들은 콘텐츠를 좀 더 편리하고 쉽게 받아들일 수 있다.

 - 그리드 시스템의 이해 : 그리드 시스템을 통해서 레이아웃 작업을 좀 더 일관성 있고 질서 있게 진행할 수 있으며, 디자인을 하는 경우에는 본 레이아웃 작업 이전에 어떠한 그리드 시스템을 적용하여 레이아웃 디자인을 진행할 것인지 고민해보아야 한다.

앱과 터치 제스처에 맞는 레이아웃

 - 터치 제스처와 앱 : 모바일 디바이스는 일반적으로 터치 제스처로 조작이 이루어지며, 모바일 앱의 화면을 통해서 조작이 이루어지기 때문에 실제 UI/GUI 디자인에도 이러한 측면이 반영되어 디자인이 이루어졌다. 따라서 터치 제스처를 위한 운영체제별 사이즈와 최소 크기에 대한 개념을 명확히 이해할 수 있어야 한다.

 - 앱과 터치 제스처에 맞는 레이아웃 : 최소 터치 사이즈부터 시작하여 모바일 앱의 레이아웃을 구성할 수 있으며, 모바일 앱의 기본 그리드와 그 형태, 역할에 대해서 충분히 이해할 수 있어야 한다.

UI 디자인의 이해

 - UI 디자인 프로세스 : 프로젝트 전체 진행 프로세스 중에서 UI 디자인의 순서 및 역할을 명확히 이해해야 한다. 또한 각 업무에서 맡은 업무의 범위와 작업의 내용을 이해한다.

 - UI 시나리오 문서의 이해 : UI 시나리오 문서를 바탕으로 GUI 디자인과 개발이 이루어지므로, 이 문서의 구성과 역할을 정확히 이해하는 것이 필요하다.

 - UI 디자인 패턴의 이해 : 레이아웃 및 GUI 디자인시 필요에 따라 UI 디자인 패턴을 파악하고, 각 부분에 대한 구체적인 표현을 참조한다면, 레이아웃 디자인을 손쉽고 편리하게 작업할 수 있을 것이다.


13강 UI 시나리오 문서의 이해와 GUI 디자인


1. UI 시나리오 문서와 GUI 디자인

- UI 시나이로 문서의 해석

UI 시나리오의 해설

- GUI 디자이너의 입장 : 실제 업무에서 GUI 디자이너가 작업하는 영역은 컬러, 타이포그래피, 이미지, 형태 정의 등과 같이 시각 디자인에 대한 부분이다. 그러나, UI 시나리오는 단순히 콘텐츠가 어떠한 레이아웃에 배치되어 있는지, 어떠한 네비게이션의 구조로 구성되어 있는지를 보여주는 문서이다. 따라서 이러한 문서를 보고 GUI 디자이너가 적절히 해석하고, 필요에 따라서는 적극적으로 UI 디자이너와 의견을 교환하는 것을 권장한다. 이에 본 챕터에서는 UI 시나리오의 해석 및 GUI 디자인의 적용에 대해 알아보도록 하겠다.

- UI 시나리오 사례 : 아래의 사례를 보고 UI 시나리오 문서를 해석하는 몇 가지 내용을 이해한다. 

- 와이어프레임 : 이미지는 네모에 X자로 선을 그은 형태를 의미, 아이콘은 동그라미, 아바타는 동그라미안에 사람 형태를 그린다. 파워포인트로 문서를 작성하는 게 일반적인 방식이다.

- 기획 중심의 레이아웃 및 구성 : 일반적인 경우, 기획 의도가 우선시되므로 폰트의 사이즈가 가독성에 맞지 않게 작거나, 아이콘이 터치 하기에 너무 좁거나 작게 배치되는 경우가 있을 수 있다.

- 시각적 일관성은 GUI 디자이너의 몫 : UI 시나리오에 있는 아이콘의 시각적 통일성과 일관성은 GUI 디자이너가 해결해야 한다. 즉, 아이콘의 두께나 모서리의 반경과 같은 부분 등은 GUI 디자이너가 맡아서 작업한다.

- GUI 디자이너도 UI 시나리오 문서에 참여한다. : UI 시나리오 문서에 대해 GUI 디자이너에게 전달 사항이 발생하거나, 공유할 경우에는 GUI 디자이너도 문서에 의견 등을 기입할 수 있어야 한다.

- GUI 레이아웃 디자인의 적용

GUI 디자인 작업의 이해

- 픽셀 단위 작업 : GUI 디자인의 레이아웃 작업은 UI 시나리오 문서를 픽셀 단위로까지 구체화하는 단계이다. 따라서, 정확한 단위로 결정해야 하며 UI 디자인을 시각적으로 굉장히 세밀하게 구현해야 한다.

- 통합적 vs 세부적 작업 : 이전에 학습한 내용과 같이, 전체의 통합적 관점에서의 굿 디자인과 세부적 관점에서의 굿 디자인이 이루어져야 한다. 즉, 컬러, 타이포그래피, 레이아웃, 이미지, 아이콘 등 여러가지 요소들이 어우러져야 하면서도 부분적으로 정확한 역할을 해야 한다.

- 모바일 운영체제의 가이드라인을 숙지해야 한다. : 모바일 운영체제에 다양한 컴포넌트와 콘텐츠 디자인 가이드가 존재한다. UI 기획 문서를 참조하여 GUI 디자인을 진행하면서도, 필요에 따라서는 UI 디자이너에게 더 나은 컴포넌트에 대한 이야기를 해줄 수도 있다.

- 운영체제별 고유의 이미지 구현 방식에 대해 숙지한다. : 안드로이드의 나인패치 방식으로 이미지를 작업하는 방법, 아이폰의 오토 레이아웃에 대한 디자인 등, 운영체제별로 이미지를 화면에 구현하는 방식이 다르다. 따라서, 운영체제별로 후반 디자인 작업이 어떻게 이루어지는지 사전에 확인하고 GUI 디자인을 진행한다.

- 결정한 GUI 일관성은 모든 페이지에 적용해야 한다. : 컬러의 쓰임, 아이콘의 형태, 레이아웃의 사용 등 GUI의 모든 시각적 작업들은 모두 동일하게 적용되어야 한다. 만약 웹, 데스크톱 프로그램까지도 디자인하게 된다면, 이러한 점들이 다른 운영체제, 다른 매체에도 적용되어야 한다.

- 스마트폰을 모니터로 사용해야 한다. : 데스크톱 모니터에서 보여지는 화면은 실제 모바일 앱과 차이가 확연히 날 수 밖에 없으므로, 기준 디바이스로 정해진 스마트폰을 통해 GUI 디자인 결과물을 확인해보도록 한다.


2. GUI 리서치 및 무드 보드 작성

- GUI 리서치

GUI 리서치의 이해

- GUI 리서치의 필요성 : 앱 디자인을 할 경우 대다수의 GUI 디자이너들은 별다른 리서치 없이, 바로 포토샵을 통해 디자인을 진행한다. 이전에 학습한 UI 시나리오 문서를 한 쪽에 띄워두고 그대로 포토샵에서 작업을 진행한다. 그렇지만 GUI 디자인은 픽셀 단위의 작업으로 여러 가지 시각 디자인의 요소들이 반영된 결과물이다. 그래서, 실제 작업시 고민되는 부분들이 많이 나오면서 작업 중에 고민을 하게 되고, 대부분은 직접 해결하려고 한다. 하지만 시간이 많이 걸리고 결과물이 좋지 않게 나오는 경우가 많다. 이러한 경우에 GUI 리서치를 진행하면 많은 도움을 받을 수 있다.

- GUI 리서치의 의미 : 리서치는 내가 알지 못하는 대상에 대해 알고자 하는 관련 정보를 습득하는 것을 의미한다. 그리고 이러한 것들을 직접하는 것보다, 주변의 실제 사례를 통해 문제 해결의 실마리를 찾을 수 있다. 단지 기획 파트 뿐만 아니라, GUI 디자인도 리서치를 통해 많은 정보를 얻을 수 있다.

- GUI 리서치가 필요한 상황 : 

Q : 내가 알지 못하는 페이지의 형태를 UI 시나리오 문서에서 발견하였는데, 어떻게 디자인해야 하는가?

Q : 모바일에서 잘 쓰이지 않는 방식의 멀티 테이블 형태인데, 다른 앱에서는 어떻게 디자인했는가?

Q : 터치 제스처에 어떤 시각 반응을 보이는가?

Q : 경쟁사의 앱들은 디자인을 어떻게 하였는가?

Q : 우리 프로젝트도 동일한 콘텐츠를 다루고 있는데, 메인 페이지를 어떻게 차별화 할 수 있는가?

Q : 메인 페이지에서 장문의 텍스트, 웹 링크를 표현할 때, 어떠한 컬러와 폰트 사이즈를 적용하고 있는가?

Q : 운영체제별 GUI 디자인을 어떻게 대응하고 있는가?

- 무드 보드 구성

무드 보드

- 무드 보드의 의미 : 무드 보드는 이미지, 텍스트, 샘플들을 조합해서 만들어 진다. 디자이너들이 일반적으로 작업하는 데 있어, 영감을 얻거나 구체적인 사례가 필요한 경우에 모아서 콜라주 하는 방식으로 진행을 한다. 직접적인 연관이 없더라도 무드 보드에 모아놓은 이미지 등을 통해 나의 디자인 작업에 반영하는 데 의의가 있다.

- 무드 보드의 구성 : 실제로 출력해서 붙여도 좋고, 파워포인트에 콜렉트 해도 좋다. 다만 한 곳에 모여져 있어야 하고 특정 주제로 묶여 있어, 필요시 바로 찾거나 참조할 수 있어야 한다.

- 무드 보드 디지털 툴 : 무드 보드를 위한 다양한 디지털 툴들이 많이 출시되어 있으니 필요에 따라 다양한 툴을 사용해보고 자신에게 맞는 방식을 적용하는 것을 권장한다.

Pinterest, Mural.ly


3. 디자인 스타일 가이드 문서 작성

- 디자인 스타일 가이드의 이해

디자인 스타일 가이드의 필요성

- 내부 스타일 가이드 문서 없이 GUI 디자인시 발생하는 문제점 : 대부분은 별다른 문서를 제작하지 않고, 포토샵에서 psd 화일 안에 실제 폰트, 컬러 등을 적용하여 작업을 진행한다. 그러나 페이지가 많아지고 디자이너가 많아지고, 기간도 길어진다면 작업하는 도중에 최초의 설정 값과 형태 등은 변하게 되며, 어느 순간 기준점을 상실하게 된다.

- 스타일 가이드의 역할 : 스타일 가이드를 디자인의 기준점으로 활용할 수 있다. 구체적인 표현을 하자면, 실제 디자이너들이 작업할 때 참조하는 작업 지시서, 또는 CI 브랜드 가이드와 유사하다고 보면 된다. 따라서 나중에 참여하는 디자이너 등도 해당 문서를 참조하면 디자인을 일관성 있게 디자인할 수 있으므로, 장기적으로 프로젝트에 큰 이익이 된다.

- 스타일 가이드의 형태와 내용 : 구체적인 스타일 가이드에 대한 표준은 없고, 필요에 따라 여러가지 방식으로 작성한다. 문서 정리 방식, psd 화일을 별도의 스타일 가이드로 구성하는 방법 등 다양한 방법이 가능하다. 이 안에는 폰트의 사이즈, 인터랙션에 대응하는 버튼의 단계, 아이콘의 종류와 응용, 앱에 사용되는 각종 컴포넌트들이 구체적으로 쓰여있다. (psd 화일일 경우는 가져다 쓸 수 있도록 정리가 되어있다.)

-  디자인 스타일 가이드 참조

psd 디자인 스타일 가이드 참조

GRID (Landing Page, Portal)

COLOR PALETTE (#000000~#FFFFFF)

TYPOGRAPHY (Headers, Body)

FORMS (Empty, Selected, Typing, Select, Error, Success)

BUTTONS

AVATARS (Big / Middle / Small Size)

ICONS (Landing Page, Portal, Artists/Albums/Activity, Rank, Voting, Social Media)

UI ELEMENTS (Calendar, Slider/Tooltips, Pag nator, Tag-Tooltip,Drop Down Menu, Read more, Move/Hide)

ALERT/ERROR MESSAGES(Info파랑, Warning노랑, Error빨강, Success녹색)

LOGIN


학습정리

UI 시나리오 문서와 GUI 디자인

 - 시나리오 문서의 해석 : 실제 UI 시나리오 문서를 해석하고 이를 GUI 디자인시 어떻게 적용해야 하는지에 대해 간략히 알아보았다.

 - GUI 디자인의 적용 : UI 시나리오 적용 및 실제 GUI 작업에 있어 참조해야 할 사항들에 대해 학습하였다. 이러한 점들을 숙지하여 GUI 디자인을 효과적으로 할 수 있도록 한다.

GUI 리서치 및 무드 보드 작성

 - GUI 리서치 : GUI 리서치를 통해 디자이너들은 구체적인 GUI 적용 사례와 디자인 해결 사례 등을 확인할 수 있으므로, 반드시 GUI 리서치를 진행하는 것을 권장한다.

 - 무드 보드 구성 : 무드 보드는 작업을 하는데 있어 필요한 이미지들의 꼴라주라고 할 수 있다. 필요에 따라 다양한 이미지들을 구성하여 참조할 수 있으며, 다양한 디지털 툴도 나와있으니 필요에 따라 선택해서 구성하면 된다.

디자인 스타일 가이드 문서 작성

 - 디자인 스타일 가이드의 이해 : 디자인 스타일 가이드는 GUI 디자인 작업에 있어 참조 할 수 있는 작업 지시서와 같다. 제대로 작성하여 적용한다면, 손쉽게 디자인 작업을 할 수 있다.

 - 디자인 스타일 가이드 참조 : 다양한 디자인 스타일 가이드가 있으니 사례를 통해 자신의 프로젝트에 적합한 스타일 가이드를 찾아본다. 아울러 포토샵 파일로 만든다면, 실제 디자인 작업시에도 활용할 수 있는 좋은 자료가 될 것이다.


14강 GUI 리서치 프로세스


1. 주요 카테고리별 마켓 리서치

- 애플 앱 스토어

아이폰의 앱 마켓, 애플 앱 스토어

- 애플 앱 스토어는 모바일 앱 마켓 중 최고 퀄리티의 앱들이 있는 곳으로써, 애플 아이폰, 아이패드, 아이팟 앱 및 다양한 콘텐츠를 판매하고 있는 마켓이다.

- apple.com/kr/itunes 를 통한 아이튠즈 다운로드 애플 앱 스토어는 아이폰, 아이패드, 아이팟이 있을 경우, 모바일 내의 앱 스토어 아이콘을 통해 방문할 수 있으며, 맥 컴퓨터에도 기본적으로 아이튠즈를 통해 iOS 앱 스토어에 방문이 가능하다. 만약 윈도우즈 컴퓨터를 사용한다면, 위의 링크로 들어가서 별도의 아이튠즈를 설치한다면, 윈도우즈에서도 애플 앱스토어에 들어갈 수 있다.

국내, 국외 마켓 탐색 

- 한국 앱 스토어 리뷰 : 아이튠즈 설치시, 디폴트로 한국 앱 스토어를 볼 수 있다. 한국 앱 스토어는 한국 내의 순위로만 집계되므로 이러한 점들을 체크한다.

- 국외 앱 스토어 리뷰 : 아이튠즈 앱 스토어 내 우측 하단에 국가 아이콘이 있다. 해당 아이콘을 누르면 나라별로 앱 스토어를 방문할 수 있다.

애픞 앱스토어 리서치 

- 목적별 리서치 진행 : 구성 카테고리, 제공 순위 리스트, 특별 이벤트, 이벤트성 리스트 등 앱스토어에서 제공하는 전반적인 구성과 앱 리스트를 체크한다. 진행 프로젝트가 있다면, 해당 앱이 어떤 카테고리에 속하는지 확인하고 관련 앱들도 리서치 진행한다.

- 키워드별 리서치 진행 : 국내/국외 리서치를 진행할 수 있으며, 진행 프로젝트에 따라 연관 키워드를 다양하게 검색을 해본다.

- 구글 플레이

구글 안드로이드 공식 앱 마켓, 구글 플레이

- play.google.com 혹은 구글 플레이 앱 : 웹사이트 play.google.com 혹은 안드로이드 폰에 설치되어 있는 구글 플레이 앱을 통해 앱 마켓에 방문이 가능하다. 아이폰과 달리 해외 마켓에는 방문할 수 없다. 구글 플레이에서도 앱 외의 다양한 콘텐츠를 판매하고 있다.

구글 플레이 리서치 

- 구성 및 키워드 리서치 : 애플 앱 스토어와 마찬가지로, 앱 마켓에서 제공하는 순위, 리스트 등을 리서치하고 키워드에 따른 리서치를 진행한다.

- 모바일 vs 데스크톱 리서치

매체별 리서치의 장단점

- 소개 : 모바일 리서치는 각 운영체제별 앱 마켓에 들어가서 관련 앱에 대한 내용을 확인하고 다운 받아서 사용해보는 것을 의미하고, 데스크톱 리서치는 앱 마켓리서치와 웹 리서치를 의미한다. 각 장단점을 간략히 확인한다.

- 모바일 리서치 : 직접 앱을 다운 받아서 확인하는 방법인 모바일 리서치는, 실제 앱을 사용해보는 측면에서 제일 권장하는리서치 방법이나, 시간이 많이 걸리는 단점이 있다. 또한, 해당 디바이스가 없을 경우에는 앱을 설치해서 사용해 볼 수가 없다. 스마트폰은 개인용 기기의 성격을 지니고 있기 때문에, 주변 사람들에게 부탁해서 사용해보기에도 애매하다.

- 데스크톱 리서치 : 실제 자료를 정리하고 작성할 수 있는 데스크톱에서 리서치를 하는 건, 우선 편리하기 때문이다. 다만 앱 마켓도 아닌, 일반 웹사이트에서 관련 정보나 스크린 샷 등을 찾는 것은 자제해야 한다. 앱의 변화 속도를 일일히 웹사이트에서 확인할 수가 없으므로, 앱 마켓 방문 위주로 리서치를 진행해야 한다.


2. 운영체제별 GUI 디자인 대응

-  요구 사항 분석

UI 시나리오의 요구 사항 분석

- 담당자 미팅 : GUI 디자인에 앞서 실제 기획한 담당과 미팅하여 GUI 디자인에 대한 의견을 묻는다. 참조 혹은 경쟁 서비스 등의 리서치와 관련된 정보를 요청하여 기록한다. UI 시나리오 중 컬러, 타이포그래피, 레이아웃과 관련된 직접적인 질문을 하여 불명확한 부분을 구체화하고 의견을 맞춘다. 운영체제별 디자인 대응과 관련하여 별도의 의견이 있는지를 확인하는 것도 중요한 부분이다.

- UI 시나리오 숙독 : UI 시나리오를 체크하며 각 페이지를 이해한다. 주요 콘텐츠를 다루고 있는 페이지 등, 각 페이지별로 어떠한 디자인 패턴에 속하는지 확인한다. (메인 페이지 = 타임라인, 서브페이지 = 프로필등) 시각 디자인과 관련하여 별도의 요구 사항이 있는지 확인하고 시나리오에서 이해가지 않는 부분이 있다면 메모하여 담당자에게 질문한다. 최종적으로 리스트를 만들거나, 해당 문서에 구체적인 질문과 진행 방향 등을 적어서 커뮤니케이션 한다.

- 리서치 구조화

리서치 항목 도출

-  결과 종합하여 수행 리스트 작성 : 구체적으로 리서치를 진행하기 위해 수행 리스트를 작성한다. 어떠한 마켓을 방문할 것이며, 어떤 키워드와 카테고리를 검색할 것인지, 디자인 패턴은 어떠한 부분에 대한 리서치가 필요한 지 등을 구체적으로 수행 리스트를 작성한다. 해당 리스트는 필요에 따라 3자와 공유하기도 하고, 본인만 참조하기도 한다.

리서치 앱 리스트 업

- 참조 희망 앱 체크 및 리서치 : 담당자의 참조 앱 리스트, 앱 마켓의 카테고리, 키워드 서치 등을 통해 앱을 리서치하며 리스트를 구체화한다. 해당 앱을 다운 받아서 리뷰하고, 필요에 따라서는 스크린샷을 캡처하여 별도 보관한다.

- 디자인 패턴 관련 앱 체크 : 디자인 패턴 관련 앱은 동일 카테고리와 연관 검색어로 보여지지 않을 수도 있다. 예를 들어, 현재 프로젝트가 커피 관련 앱이지만 그 안에 결제 쇼핑 관련 페이지에 대한 리서치 요구 사항이 있을 경우, 직접적인 커피 앱이 아니더라도 쇼핑 전문 앱을 리서치하여 해당 부분에 대한 디자인을 확인하는 것을 의미한다. 이 경우는 평상시에도 많은 관심을 가지고 앱을 많이 써보았을 경우에 더욱 유리할 수도 있다. 그렇지만 실제 프로젝트 시점에서 트랜드, 디자인의 변화가 있을 수 있으므로 반드시 새롭게 다운로드 / 업데이트하여 관련 부분을 체크한다.

- 운영체제별 비교

멀티 디바이스, 멀티 운영 체제

- 원 서비스, 멀티 플랫폼, 멀티 디바이스의 대응 : 2015-2016년에 들어서면서, 대다수의 모바일 앱 서비스는 멀티 플랫폼, 멀티 디바이스의 개념이 도입되었다. 이에 하나의 서비스라면, 어떤 채널, 매체를 통해서도 동일한 서비스를 받을 수 있는 환경이 구축되었다고 할 수 있다. 이에 디자이너 또한 흐름을 이해하고 동참할 수 있어야 한다.

- GUI 디자인과 멀티 디바이스, 멀티 운영체제 : 간략하게 말하자면, 아이폰 앱과 안드로이드폰 앱을 얼마만큼 다르게 혹은 동일하게 가져갈 것인지를 고민해야 한다는 뜻이다. GUI 디자이너는 운영체제별 디자인 가이드를 숙지하고, 그에 따른 시각 디자인 요소들을 명확히 알아야 하지만, 다른 운영체제 간의 조화를 찾기란 사실 쉬운 일은 아니다.

- 멀티 운영체제에 대한 GUI 리서치 및 분석 : 작업하는 운영체제의 앱을 직접 써보고, 스마트폰을 나란히 늘어놓고 앱을 써보며 비교 분석해보는 것이 좋다. 각 페이지별로 어떠한 디자인 패턴에 속하는지 살펴보고, 해당 페이지가 운영체제별로 어떠한 구성을 이루고 있는지에 대해 3~5개의 앱을 리서치 한다면 구체적인 방향을 알아낼 수 있다.


3. 콘텐츠별 UI/GUI 디자인 구성 원칙의 이해

- 데이터 중심

데이터 중심 앱의 구성 원칙

- 데이터 중심 앱은 제일 많이 볼 수 있는 형태이다. 이메일, 페이스북, 트위터, 채팅창 등이 데이터 중심 앱을 제일 잘 표현해주는 앱이다.

- 구성원칙 : 

스크롤 가능하게

폰트는 한정적으로 사용

손가락 터치 사이즈 반드시 고려 

OS 기본 디폴트 사이즈 고려 

가독성 필수

그래픽적 완성도 더욱 추구

콘텐츠와 조작부 간 명확히 구분

- 이미지 중심

이미지 중심 앱의 구성 원칙

- 이미지 중심 앱은, 사진과 동영상을 주로 다루는 앱을 의미한다. 카메라, 유튜브, 인스타그램 등이 해당 앱이라 할 수 있다.

- 구성원칙 : 

화면을 최대한 넓게 사용 (최대화), 

가로 모드 지원, 

핀치 인/아웃 = 줌/인 아웃 지원

화면 터치할 경우 컨트롤 부 숨김/노출

스와이프로 콘텐츠 네비게이션

콘텐츠 중심의 화면 구성

- 게임

게임 앱의 구성 원칙

- 게임 앱은 일반 앱과 완전 별개의 앱으로 구분하는데 고유의 재미 요소가 필수적이다.

- 구성원칙 :

수준 높은 그래픽 비주얼

일관성

비주얼 스타일의 통일성


학습정리

주요 카테고리별 마켓 리서치

 - 애플 앱 스토어 : 애플 앱 스토어는 iOS와 컴퓨터에설치된 아이튠즈를 통해 방문할 수 있다. 데스크톱 아이튠즈를 통해서는 해외 앱 스토어도 손쉽게 방문할 수 있다.

 - 구글 플레이 : 구글 안드로이드 앱 마켓인 구글 플레이는 웹사이트와 전용 앱을 통해 방문할 수 있다.

 - 모바일 vs 데스크톱 리서치 : 모바일 리서치 방식과 데스크톱 리서치 방식에는 장단점이 있다. 그러므로 권장사항은 두 리서치 방식을 병행하여 진행하는 것이다.

운영체제별 GUI 디자인 대응

 - 요구 사항 분석 : 실제 UI 시나리오 기획 담당자 및 관계자들과 미팅을 통해 GUI 디자인과 연관된 요구사항을 구체적으로 분석해야 한다.

 - 리서치 구조화 : GUI 디자인에 필요한 부분을 사전에 확인하기 위해 리스트업을 하고 구체적으로 항목을 도출한다. 필요에 따라서는 디자인 패턴 리서치만 진행하기도 한다.

 - 운영체제별 비교 : 멀티 디바이스, 멀티 플랫폼, 원 서비스의 트렌드에 따라 다양한 디바이스와 운영체제에 대한 대응을 해야 한다.

콘텐츠별 UI/GUI 디자인 구성 원칙의 이해

 - 데이터 중심 앱 : 모바일 앱에서 가장 많이 볼 수 있는 형태는 데이터 중심 앱이다. 페이스북, 트위터, 이메일, 지메일 등이 대표적인 앱이다.

 - 이미지 중심 앱 : 이미지와 동영상을 중심으로 다루는 경우 이미지 중심 앱이라 할 수 있다. 유튜브, 인스타그램 등이 대표적인 앱이다.

 - 게임 앱 : 게임 앱은 정말 다양하게 앱이 존재한다. 그 중에서도 디자인시에는 높은 퀄리티와 일관성, 통일성이 중요하다.


'Legend 개발자 > T아카데미' 카테고리의 다른 글

Spring Framework  (0) 2017.09.07
UX/UI 기획  (0) 2017.09.04
jQuery (JavaScript)  (0) 2017.09.02
컴퓨터 알고리즘 중급  (0) 2017.08.31
JavaScript  (0) 2017.08.30
Posted by 전설의아이
|

UX/UI 기획

Legend 개발자/T아카데미 2017. 9. 4. 15:46

1강 사용자경험(UX)의 개념과 이해


1. 사용자 경험(UX)의 정의와 중요성

- 사용자 경험(UX)이란?

사용자 경험(UX)이란, 총체적(holistic)관점으로 그 경험의 작용대상과 인간의 반응으로 이해한다.

- 사전적 정의

사용자 경험(User Experience, UX)은 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등의 총체적 경험을 말한다.

- UX 대상과 사용자의 지각과 반은

사용자는 경험의 대상과 지각반응을 통합적으로 인지하고, 구매와 지속적 사용행위를 하게 된다.

- 대상 : 제품, 시스템, 서비스, 회사, 브랜드 등으로 확장된 경험 대상

- 지각반응 : 감정(felling), 태도(attitude), 행동(behavior)의 총합

- UX의 이해와 관점

- 이해와 해석 : 사용자경험 요소와 현상을 어떻게 해석하고 사용자를 이해할 수 있는가?

- 관점 : 사용자에 대한 관점을 넓혀 보다 풍부한 사용자경험 가치를 창출할 것인가?

- UX란 

ICT기술과 모바일 환경에서 다양한 사용 행태를 관찰, 해석하고, 실제 사용자의 경험을 이해하여 잠재 니즈의 발견은 물론, 모바일 서비스에 접목할 수 있는 사용자 인사이트와 사용자 가치를 만들어내는 방법론으로 이해할 수 있다.

- UX 이해의 복잡성

- 주관성(subjectivity) : 인간의 경험은 그 사람의 개인적, 신체적, 인지적 특성에 따라 주관적이다.

- 맥락성(contextuality) : 사용자 경험이 일어나는 상황적 의적 환경에 영향을 받는다.

- 총체성(holistic) : 경험 시점에서 개인이 느끼는 총체적인 심리적, 감성적 결과이다.


2. UX에 대한 이해와 관점

- UX의 이해와 관점

①인지적 관점(Cognitive)

- 인간의 기억과 생각하는 구조의 이해

- 인간이 어떻게 하나의 정보를 받아들여 인지하고 처리하는가?

②사용자 맥락과 상황(Context)

- 경험 발생 상황과 외적 영향

- 사용자는 컨텍스트의 영향으로 외부 환경과 어떤 관계적 경험을 형성하게 되는가?

③감각과 감성(Emotion)

- 역동적이고 다면적인 감각능력과 경험발생 시점에서의 심리적 상태와 변화의 이해

- 어떻게 느끼는가?

④사용자 행위(Behavior)

- 제품, 서비스 경험의 물리적, 인지적, 사회문화적 현상의 해석과 상호작용

- 어떻게 행동하는가?

- 사용자 경험(UX)의 영역

- 사용자 경험(UX)은 특정 영역(domain)을 갖기보다 기존의 다양한 분야와 결합되는 새로운 틀을 제공하는 접근으로 확장되고 있다.

- 단순하게 인터페이스만이 아니라, 제품, 시스템, 서비스, 회사 등 사용자가 특정 포인트를 중심으로 경험할 수 있는 대상이 확장된다.

- 사용자경험(UX)의 중요성

- UX의 이해(사용자를 이해하고 공감하기 위한 사고방식)

UX는 특정 제품과 서비스에 내재되어 있는 개념이 아니라 사용자(User)에 귀속된 개념으로 이해해야 한다.

사용자 경험 가치의 창출은 사람(유저)을 얼마만큼 이해하고 있는가에 달려 있음

- UX디자이너의 역할 : 경험의 기회 제공

UX디자이너는 사용자로 하여금 특정한 경험을 할 수 있도록 경험의 기회를 사용자에게 제공할 수 있어야 한다.


3. 사용자 경험 요소

- 사용자(User)

- 사용자, 과연 그들은 누구인가?

사용자(user)는 어떤 목표와 의도를 가지고 특정 컴퓨터나 시스템(모바일 기기) 등을 사용하며 능동적이고 가변적인 욕구를 가지는 주체다.

- 사용자는 어떤 욕구의 소유자인가?(인간의 본질적 욕구 측면)

Ex) 개인 프라이버시에 민감하며, 사회적 소속감을 중시

- 사용자가 궁극적으로 원하는 것은 무엇인가?(기능적 측면)

Ex) 자신의 개인정보를 친한 지인에게만 안전하게 공유할 수 있는 자신만의 공개 기능

- 사용자 경험(UX)의 기본 요소

- 사용자 경험(UX)을 명확하게 규명하기 위해서는 니즈(User Needs) 이외에 사용동기(Motives), 태도(Attitudes), 사용행태(Behavior)의 기본 구성요소에 대한 구체적인 분석이 필요하다.

사용자 니즈(User Needs) : UX 대상(제품/시스템/서비스)으로부터 특정한 만족감을 얻으려는 사용자들의 기대

사용동기(User Motives) : 사용자들의 행동을 불러일으키는 직접적인 발화제

사용자 태도(User Attitude) : UX 대상에 대해 갖는 개인의 취향과 선호, 선험적인 믿음과 정보

사용자 행위(User Behavior) : UX 대상을 사용하는 과정에서 드러나는 반복적인 행동패턴


4. 모바일 환경과 UX

- 모바일 사용자의 경험의 주요 요소

- 모바일 환경의 이해

모바일 분야는 전방위 산업 분야로 확산되고 있으며, 각 분야 개별 컨텐츠와 플랫폼, 그리고 디바이스를 중심으로 유기적 연결과 통합을 지속하고 있음

- 사용자 관점에서 모바일UX의 라이프사이클

The APP LIFECYCLE

Stage1. The App Store Experience (구매경험)

Stage2. The First-Open Experience (첫인상)

Stage3. Attempting Simple Tasks (단순조작경험)

Stage4. Attempting Complex Tasks (복잡조작경험)

- 모바일 UX의 환경과 영향 요소

사회문화적 환경과 사용자, 사용자의 의도와 목표, 사용자 태스크, 인터페이스와 인터랙션, 모바일  기기(H/W) 연결 속성과 성능, 통신사와 서비스 ... etc (매우매우 미시적부터 거시적까지 다양하다)


학습정리

사용자경험(UX)의 이해와 UX 요소

 - 사용자의 인지적 특성, 외부 상황의 영향성, 심리적 요인 등의 복잡성을 갖는다.

 - 사용자 경험 영역은 모호하며, 다양한 분야와 결합된 형태의 대상으로 확장

 - 니즈(User Needs), 사용동기(Motives), 태도(Attitudes), 사용행태(Behavior)

 - UX는 특정 제품과 서비스에 내재되어 있는 개념이 아니라 사용자(User)에 귀속된 개념

사용자(User)의 이해와 관점

 - 인지적 관점

 - 감각과 감성

 - 사용자 맥락과 상황

 - 사용자 행위

모바일 사용자 경험(UX)

 - 모바일 환경과 사용자경험 요소 


2강 모바일앱 환경의 이해와 UX의 중요성


1. 모바일앱(App) 환경 특성의 이해

- 모바일앱(App)의 개념

모바일앱이란?

- 특정 모바일 OS에서 구동되는 애플리케이션(application, 응용프로그램)을 의미한다.

- 스마트 폰에서 애플리케이션(앱)은 특정 용도에 따라 설치되는 컴퓨터의 응용프로그램과 같다.

- 앱을 스마트폰으로 직접 다운로드하여 설치할 수 있는 서비스를 제공하는 곳이 앱 마켓(app market) 또는 앱 스토어(app store)다.

모바일앱 환경의 이해

개발자 

판매등록/업로드→

앱스토어 

App다운로드/설치→ 

사용자 

←수익분배 

←지불결제 

- 모바일앱(App)의 종류와 특성

- 네이티브 앱(Native App) : 네이티브앱은 모바일OS 제조사에서 제공하는 개발언어를 이용하여 각가의 고유 모바일 OS에서만 동작되는 앱(App)을말한다.

Ex. 자바(Java)로 개발하는 안드로이드앱과 Objective-C 언어로 개발 되는 아이폰앱.)

- 네이티브앱의 장단점

장점 

단점 

- 빠른 구동 속도

- 다양한 기능 구현 가능

- 인터렉티브한 사용자 환경 제공 가능

- 업데이트 및 수정이 어려움

- 동일한 앱을 다양한 플랫폼에 출시시 많은 시간이 소요됨 

- 모바일 웹(Mobile Web) : 모바일 웹(Web)은 모바일에 최적화된 웹사이트라고 할 수 있고, 디바이스 별 별도의 개발 방식이 필요하지 않으며, 인터넷에 접속이 가능하다면 어떠한 모바일 디바이스로도 접속이 가능하다.

 모바일 웹(Web)은 데스크탑 브라우저에서 실행되는 기능을 모바일 기기 환경에 맞춰서 개발한 사이트이다. (PC용 홈페이지가 모바일 화면으로 보여지는 것)

- 모바일 웹의 장단점

 장점

단점 

- 플랫폼 및 기기에 상관없이 대부분의 모바일기기 브라우저에서 볼 수 있음

- 업데이트 및 수정이 용이함. 

- 앱스토어에 등록이 되질 않습니다.

- 표현의 자유 한계.

- 인터넷이 연결이 되지 않으면 사용할 수 없음. 

- 하이브리드 앱(Hybrid App) : 하이브리드앱이란 모바일웹(Mobile web)의 홈페이지를 구현하는 웹기능과 앱(App)의 어플기능을 접목시킨 형태로, 네이티브앱과 모바일웹의 장점을 혼합한 앱이다.

 하이브리드앱은 네이티브앱의 형태를 띄고 있어 앱스토어나 마켓에서 다운받아 모바일에 설치할 수 있다.

- 하이브리드앱의 장단점

장점 

단점 

- 네이티브 앱의 빠른 속도와 모바일웹이 가지는 개발의 용이성을 둘 다 취할 수 있음

- 빠른 업데이트 적용 

- 인터넷 환경에 따라 일부 기능이 작동이 되지 않을 수 있음.

- 구동속도가 네트워크 상태에 따라 많은 영향을받아 속도가 느림 


2. 모바일 사용자경험(UX)의 속성과 특징

- 모바일 사용자행태적 속성

편재성(Ubiquity) : 어디서든 정보검색과 통신이 가능한 이동성(모빌리티)을 구현해 공간성의 제약을 해소.

즉시연결성(Instant connectivity) : 언재 어디서나 사용자가 원하는 즉시, 해당 정보검색과 통신이 가능

개인화(Personalization) : 사용자 개인의 선호와 취향 등 개인 특성에 맞춘 콘텐츠 및 보안 인증 제공.

위치기반(Localization) : 사용자의 현재 위치를 파악하여 주변의 유용한 정보를 제공이 가능

- 모바일 사용자경험의 주요 특징

단순 간결한 경험을 선호

- 사용자 목표와 의도에 연관된 직관적인 UX요소들의 중요성이 PC의 비해 상대적으로 강함.

- 정보에 대한 복잡한 선택 상황을 꺼려함.

다른 사용자와의 소통에 개방적이고 자신의 현재 주변 환경과 교감하고자 함.

- 타인과의 커뮤니케이션 매체로써 PC에 비해 다른 사용자와 교류에 적극적임.

- 정보의 선택, 공유, 평가, 저장, 편집 등에 더 적합한 경험이 형성됨.

- 모바일의 이동성과 위치기반 특성으로 내 주변 상황에 민감함.

새로운 형태의 UX에 비교적 쉽게 적응

- 이미 학습된 모바일 UX/UI 환경에서 새로운 기능과 서비스를 배우는데 쉽게 적응함.

- 스마트기기의 새로운 기능/서비스를 경험을 하고자하는 기대가 자연스럽게 형성됨

새로운 정보제공이나 추천 서비스에 개방적임

- 일상에서 모바일 기기와의 상호작용 시간이 길고, 양방향 인터랙션 경험에 익숙함.

- OS 별 지속적인 앱의 업데이트 환경에 익숙함

- 사용자가 원하고 있는 정보가 사용자의 상황에 맞게 제공되는 방식에 익숙함


3. 모바일UX 특성을 반영한 UI 설계 시 주안점

- 디자인 측면

Desirable : 매력적인 디자인

얼마나 감성적으로 쓰고 싶게끔 디자인 되어 있는지?

Credible : 디자인 신뢰성

어떤 디자인적 요소들이 사용자의 신뢰도의 영향을 미치는지?

Usable : 사용하기 쉬운 사용자 인터페이스(UI)

사용자의 목푤를 달성하기 위해 제공된 인터페이스가 얼마나 쉬운지?

- 정보설계 측면

UseFul : 유용한 기능과 콘텐츠

사용자에게 정말로 필요한, 또는 문제해결을 할 만한 기능과 컨텐츠인가?

Accessible : 접근성의 극대화

누구나 쉽게 접근할 수 있도록 디자인되었는가?

Findable : 정보 탐색 경ㄹ(Navigation)의 일반화

사용자가 필요한 정보와 기능을 쉽게 찾을 수 있게 UI가 설계되었는가?

Valuable : 사용자 만족도

사용자가치가 어떻게 전달되어 만족도를 높일 것인가?


학습정리

모바일앱(App) 환경 특성의 이해

 - 모바일앱이란, 특정 모바일 OS에서 구동되는 응용프로그램(application,)을 의미한다.

 - 모바일앱(App)의 종류:

    1)네이티브앱(Native App), 2)모바일 웹(Mobile Web), 3)하이브리드앱(Hybrid App)

모바일앱 사용자경험(UX)의 속성과 특징

 - 모바일 사용자행태적 속성 : 편재성(Ubiquity), 즉시연결성(Instant connectivity), 개인화(Personalization), 위치기반(Localization)

 - 모바일 사용자는 새로운 형태의 IX에 비교적 쉽게 적응한다.

 - 모바일 사용자는 새로운 정보제공이나 추천 서비스에 개방적이다

모바일 UX 특성을 반영한 UI 설계 시 주안점

 - 디자인 측면 : 매력적인 디자인, 디자인 신뢰성, 사용하기 쉬운 사용자 인터페이스(UI)

 - 정보설계 측면 : 유용한 기능과 콘텐츠, 접근성의 극대화, 정보 탐색 경로(Navigation)의 일반화, 사용자 만족도


3강 사용자 인터페이스의 개념과 이해


1. 사용자인터페이스(UI)의 정의와 이해

- 사용자인터페이스(UI, User Interface)란?

사용자 인터페이스(UI)는 사람들이 컴퓨터, 시스템, 기기, 도구 등 그 사이에서 일어나는 상호작용(Interaction)을 매개하는 것이다.

- 사람(사용자)과 사물 또는 시스템, 기계, 컴퓨터 등, 그 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.

- 사용자인터페이스는 디스플레이 화면, 키보드, 마우스, 문자, 아이콘, 도움말 등 사용자들과 상호 작용을 하도록 설계된 모든 정보관련 고안품을 포함하여, 응용프로그램이나 웹사이트 등이 상호 작용을 초래하거나 그것에 반응하는 방법 등을 의미한다

- 사용자 인터페이스(UI)의 목적

사용성(usability)는 사용자인터페이스의 주된 목적

- 좋은 사용자 인터페이스는 심리학과 생리학에 기반하여, 사용자가 필요로 하는 요소를 쉽게 찾고 사용하며 그 요소로부터 명확하게 의도한 결과를 쉽게 얻어 낼 수 있어야 한다.

사용자 인터페이스는 상호작용 수단과 방식을 제공

- 입력(I) : 사용자가 시스템을 조작할 수 있게 한다.

- 출력(O) : 시스템이 사용자가 이용한 것에 대한 결과를 표시한다.

- 사용자 인터페이스(UI)의 구분(종류)

상호작용 수단과 방식에 따른 사용자인터페이스의 구분

- CUI(Character based UI) : 문자 방식의 명령어 입력 사용자 인터페이스

- GUI(Graphic UI) : 그래픽 환경 기반의 마우스 입력 사용자 인터페이스

- NUI(Natural UI) : 사용자의 말과 행동 기반 제스쳐 입력 인터페이스


2. 모바일 UI 디자인의 기본 설계 원칙

- 사용자인터페이스 기본 원칙

직관성(Intuitiveness)

앱의 구조를 큰 노력 업이도 쉽게 이해하고, 쉽게 사용하게 해주는지

→ Findability / Ease of use / Consistency

유효성(Efficiency)

얼마나 정확하고 완벽하게 사용자의 목표가 달성될 수 있는지

→ Feedback / Effectiveness

학습성(Learnability)

초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 해주는지

→ Easy of learning / Accessibility / Memorability

유연성(Flexibility)

사용자의 인터랙션을 얼마나 포용하고, 실수로부터 방지해주는지

→ Forgiveness / Error Prevention / Error Detectability / Error-averse

- 사용자인터페이스 설계 지침-10원칙(한국HCI연구회)

가시성의 원칙(Visibility)

앱의 주요기능(feature)을 노출시켜 최대한 조작이 쉽게 되도록 한다.

조작결과 예측의 원칙(Natural Mapping)

사용자가 앱을 조작하여 작동시킨 결과를 조작 부위만 보고도 미리 예측가능하게 설계해야 한다.

일관성의 원칙(Consistency)

앱의 조작방식에 일관성을 제공함으로써 사용자가 쉽게 기억하고 빠르게 적응할 수 있게 한다.

단순성의 원칙(Simplicity)

앱의 기능구조를 단순화 시켜 조작에 요구되는 노력을 최소화하여 인지적 부담을 줄이게 한다.

지식배분의 원칙(Knowledgein World & Head)

앱의 기능 조작에 요구되는 지식은 사용자의 지식과 기억 구조에 적합하도록하여 학습하기 쉽고 기억하기 쉽게 상호 보완적으로 배분한다.

조작오류의 원칙(Design for Error)

발생된 오류는 쉽게 발견될 수 있도록 하고, 오류의 수정 또한 최대한 쉽게 이루어져야 한다.

제한사항 선택사용의 원칙(Constraints)

앱의 조작 상의 제한사항을 이용하여 가능한 선택의 여지를 줄여 조작방법이 명확하도록 한다.

표준화의 원칙(Standardization)

앱의 기능구조와 디자인을 표준화하여 한번 학습한 이후 효과적으로 사용할 수 있도록 한다.

행동유도성의 원칙(Affordance)

사용자에게 앱의 기능을 어떻게 조작하면 될 것인가에 관한 단서(cue)를 제공함으로써 조작의 가능성을 높인다.

접근성의 원칙(Accessibility)

사용자의 성별, 연령, 인종 등에 따른 다양한 계층의 사용자를 수용할 수 있도록 고려해야 한다.


3. 좋은 UI의 특징 및 관련 원칙들

- 화면의 구성관련

조직성 + 일관성

- 조직성은 사용자에게 일관성 있는 개념적 구조를 제공

- 일관성은 사용자가 예측할 수 있는 UI를 반영하여 용이성을 향상

간결성 + 명료성

- 간결성이란 커뮤니케이션을 위해 꼭 필요한 요소만을 디자인

- 사용자에게 한 번에 너무 많은 기능을 제공하지 않음

- 디자인된 모든 요소들의 의미가 모호하지 않고 명료해야 함

- 감성, 인지적 품질 관련

가독성 + 시인성

- 너무 많은 버튼이 디스플레이 되거나 너무 복잡한 아이콘은 사용자에게 부담을 줄 수 있음

- UI를 바로 보고, 그 의미를 혼동 없이 쉽게 읽고 정확하게 이해할 수 있어야 함.

접근성 + 관용성 : 다양한 사용자 고려

- 불특정 다수의 사용자도 시스템 UI에 접근할 수 있도록 하고, 동시에 다양한 사용자의 문화적, 언어적 차별이 없이 사용자 요구를 반영해야 함

- 사용성 관련

메타포 + 피드백

- 현실세계의 대상물들(도구)을 메타포로서 인터페이스에 옮겨 놓은 아이콘들은 직관적 사용성에 효과적으로 작용한다.

- 메타포의 활용은 문화적, 언어적 장벽들을 자연스럽게 극복하게 해준다.

- 피드백은 사용 결과와 반응의 대화를 이끌어낸다.

- 작업을 수행 할 때 반응(피드백)은 가능한 한 즉각적으로 제공하여 시각적 혹은 청각적 신호로 제공해야 한다.

- 사용자에게 시스템이 무슨일이 일어나고 있는지를 피드백을 통해 계속 알려 주어야 한다.


학습정리

사용자인터페이스(UI)의 정의와 이해

 - UI 사람들이 컴퓨터, 시스템, 기기, 도구 등 그 사이에서 일어나는 상호작용을 매개하는 것이다.

 - 사용자 인터페이스의 궁극적인 목적은 사용성이다.

 - 사용자 인터페이스는 입력/출력의 상호작용 수단을 제공하고 그 방식에 따라 구분할 수 있다.

모바일 UI 다자인의 기본 설계 원칙

 - 직관성(Intuitiveness) : 처음 사용할 시에도 사용방법을 쉽게 알 수 있다.

 - 일관성(Consistency) : UI가 일관적이라면 학습하기가 용이하다

 - 효율성(Effectiveness) : 익숙해진 다음에 더 효율적으로 사용할 수 있다면 가장 좋다

 - 유연성(Flexibility) : 예상하지 못한 다양한 인터랙션을 포용할 수 있는 유연성이 중요

좋은 UI의 특징 및 관련 원칙들

 - 조직성 + 일관성

 - 간결성 + 명료성

 - 가독성 + 시인성

 - 접근성 + 관용성

 - 메타포 + 피드백


4강 사용자 인터랙션(Interaction) 디자인 이해


1. 인터랙션(Interaction)의 의미와 이해

- 인터랙션(InteractioN)이란?

인간이 제품이나 서비스를 사용하면서 상호간 작용하는 것

- 컴퓨터에 의해 작동되는 전자 제품, 시스템 환경과 사용자의 행동간의 상호작용 또는 상호 영향성을 의미

- 인간과 인간, 인간과 물질, 인간과 시스템, 시스템과 시스템 간 상호작용이 일어나는 방법 또는 양식

- 인터랙션의 목적

인터랙션 디자인 : 사람 - 기기 간 커뮤니케이션 관점 = '대화(dialogue)'

- 인간이 제품이나 서비스를 사용하면서 상호작용하는 방식 또는 양식을 보다 용이하게 디자인하는 분야

- 인터랙션 디자인은 사용자 간 커뮤니케이션뿐만 아니라 서로 간의 행위 소통 자체를 위한 디자인

- HCI(Human-Computer Interaction)

HCI는 과학과 인문학 사이의 인터페이스

- 컴퓨터 시스템과 상호작용의 연구 분야

- 시스템을 사용하는 인간(사용자)의 특성을 이해하는 분야

- 사용자와 컴퓨터 사이를 잇는 사용자 인터페이스에서 발현

HCI의 목적

- 스마트환경에서 제품과 서비스의 최적 경험

- 궁극적인 목적은 사용자의 의지를 보다 자유롭게 하고, 창의력을 증진시키고, 인간 사이의 의사소통과 협력을 증진시킴.


2. 사용자의 행동모델과 인터랙션 디자인

- 사용자 행위 단계와 좋은 인터랙션 디자인

- 사용자의 목적과 그것을 달성하기 위해 할 수 있는 행위 간의 차이가 작아야 함.

- 원래 목적과 실행 결과 간 차이가 적어야 함.

사용자는 어떻게 사고(think)하고 사용행위(behavior)를 하는가?

- 도널드 노먼의 7단계 행동 모델(Donald Norman's 7 Stage of Action model)

사용자가 달성하고자 하는 목표에 도달하기까지의 의도와 행동-기대결과-해석과 평가-피드백의 과정(행위이론

1. Forming the Goal (목표)

목표는 막연히 얻고 싶은 것으로, 매우 부정확한 형태로 나타날 수 있다.

→ 스마트 디바이스의 기능이 결정되었는가?

2. Forming the Intention (의도)

막연한 목표에 의도나 계획이 있고, 구체적으로 어떤 목표인지 분명히 진술한다.

→ 어떤 조작이 가능한가?

3. Specifying an action (행동 단계 설정)

의도에 맞는 정확한 행동 단계를 구체적으로 진술한다.

→ 의도와 행동과의 대응관계(매핑)는 정해졌는가?

4. Executing an Action (실행)

실제적인 무엇인가를 실행하는 단계로 실제 결과물을 내어 놓는다.

→ 행위의 수행이 가능한가?

5. Perceiving the state of the world(지각)

실제로일어난 일에 대해서 지각하고 이해한다.

→ 대상인 시스템이 어떤 상태에 있는지를 알 수 있는가?

6. Interpreting the State of the world (지각의 해석)

실제로 일어난 일에 대해서 지각하고, 인식한 것에 대한 감각을 해석한다.

→ 시스템의 상태와 해석의 대응(피드백)이 결정되었는가?

7. Evaluating the Outcome (결과 평가하기)

수행 결과와 원하던 목표에 대해 비교와 평가를 한다.

→ 사용자가 원했던 목표와 시스템의 결과가 잘 맞아 떨어지는가?


3. 모바일 인터랙션 디자인의 구성 요소

- 사용자 목표와 행위, 결과의 차이(gap)를 줄여주는 요소

심성 모형(Mental model)과 개념모형(Conceptual model)

- 심성 모형 : 사용자가 생각하고 행동하는 구조를 설명하는 개념

- 개념 모형 : 사람이 시스템과 제품 등의 개념을 이해하려고 머리 속에 만드는 모형

매핑(Mapping)

- 행위와 실제 조작, 결과가 대응하는 것으로 시스템 상태가 눈에 보이도록 대응관계를 확정해야 함

- 사용자가 모바일 기기를 조작해 작동시킨 결과를 조작 부위만 보고도 미리 에견, 또는 기능적 유추할 수 있도록 하는 것.

메타포(Metaphor)

- 메타포는 어떤 것을 머리에 떠올릴 때 직관적으로 반응하는 느낌과 해석을 의미한다.

- 인터랙션 디자인은 눈으로 보기만 해도 (직관적), 사용자는 기기의 상태와 가능한 여러 행위들을 파악 가능해야 한다.

어포던스(Affordance, 행동유도성)

- 어포던스(Affordance)는 어떤 행동을 유도한다는 뜻으로 행동유도성이라고도 한다.

지각된 어포던스의 4가지 원리(도날드노먼)

- 이미지들의 선택과 허용 가능한 상호작용 양쪽에서 일반적으로 익숙한 사용법을 따르라

- 사용자가 원하는 행동을 묘사하는 단어를 사용하라

- 메타포(Metaphor, 은유)를 사용하라.

- 인터페이스를 학습한 이후 이것을 다른 부분에 활용할 수 있도록 지속적으로 같은 컨셉 모델을 따르도록 하라

피드백(Feedback)

- 피드백은 어떤 작동이 실제로 이루어졌는지 어떤 결과가 달성되었는지에 대한 정보를 사용자에게 알려주는 것이다.

- 사용자의 행위 결과에 관한 충분한 피드백을 지속적으로 받을 수 있어야 한다.


학습정리

인터랙션(Interaction)의 의미와 이해

 - 인터랙션은 인간이 어떤 주어진 환경에서 사물이나 사람 혹은 환경 등과 행하는 모든 행위를 의미한다.

 - 인터랙션의 목적은 인공물과 사람 간의 커뮤니케이션이 일어나게 하는 것이다.

 - 인터랙션 디자인은 사용자 간 커뮤니케이션뿐만 아니라 서로 간 행위의 소통 자체를 위한 디자인이다.

사용자의 행도모델과 인터랙션 디자인

 - 도널드 노먼의 7단계 행동 모델(Donald Norman's 7 Stage of Action model)

 - 좋은 인터랙션 디자인은

    - 사용자의 목적과 그것을 달성하기 위해 할 수 있는 행위 간의 차이가 작아야 함

    - 원래 목적과 실행 결과 간 차이가 적어야 함

 - 인터랙션 요소 : 메타포, 어포던스, 피드백, 매핑, 심성모형


5강 사용성의 이해와 사용성 평가의 활용


1. 사용성(Usability)의 정의와 중요성

- 사용성(Usability)란?

사용자가 어떤 도구를 특정 목적을 달성하기 위해 사용할 때에 어느 정도 '사용하기 쉬운가(easy to use)'를 말한다.

사용자들이 목표를 이루기 위해 특정한 상황에서 사용하는 시스템, 제품 또는 서비스에 대한 유효성(effectiveness), 효율성(efficiency), 만족도(satisfaction)의 정도(ISO)

- 사용성의 이해

사용성은 사용자와 컴퓨터간에 일어나는 상호 작용에서 경험하는 '사용의 품질'을 의미한다.

유효성 (Effectiveness)

- 사용자가 원하는 목적을 제대로 달성하였는가?

- 사용자 요구에 적합하고 안정적이고 신뢰성이 있는 제품

효율성 (Efficiency)

- 사용자가 원하는 목적을 가능한 편리하게 수행하였는가?

- 사용 방법을 학습하기 쉽고 사용자의 실수를줄여주는 제품

만족도 (Satisfaction)

- 전반적인 사용 만족도는 어떠하였는가?

- 사용자의 감성적, 경험적인 성향에 부합하는 제품

- 야콥 닐슨(Jakob Nielsen)의 사용성 지침

①알기 쉬운 시스템 상태(Visibility of system status

- 절절한 피드백을 통해 적절한 반응시점에 사용자에게 "시스템마다 무슨 일이 일어나고 있는지"를 알 수 있게 해야 한다.

②실제 사용 환경에 적합한 시스템(Match between system and the real world)

- 사용자의 실제환경과 유사한 친숙한 단어와 문구, 개념 등을 사용하여 자연스럽고 논리적인 정보를 제공해야 한다.

③사용자에게 자유와 주도권 제공(User control and freedom)

- 사용자가 시스템의 기능 선택에서 실수를 하거나 원치 않는 상태로부터 확실한 실행 취소 및 재실행 기능을 제공해야 한다.

④일관성과 표준화(Consistency and standards)

- 동일한 상황에서 상이한 버튼, 피드백, 아이콘 등으로 UI의 일관성을 해쳐 사용자에게 혼란을 주어서는 안된다.

⑤오류 예방(Error prevention)

- 오류가 발생하기 쉬운 조건을 제거하거나 조건을 설정할 수 있는 사용자에게 작업을 취하기 전에 확인 옵션을 제공해야 한다.

⑥기억을 불러오지 않고 보는 것만으로 이해할 수 있는 디자인(Recognition rather than recall

- 시스템을 사용하기 위한 설명은 언제든지 적절할 때 볼 수 있거나 쉽게 찾을 수 있어야 한다.

⑦유연성과 효율성 (Flexibility and effciency of use)

- 사용자가 자주 실행하는 기능은 사용자가 직접 효율화를 조정할 수 있도록 한다.

⑧심플하고 아름다운 디자인(Aesthetic and minimalist design)

- 사용자의 의도와 달성목표를 수행하는 과정에 불필요하거나 상관없는 정보는 제거하고 심플한 디자인을 구현할 수 있어야 한다.

⑨사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원(Help users recognize, diagnose, and recover from errors)

- 오류 메시지는 쉽게 이해되어야 하며, 문제 상황을 정확히 알려주고, 그 해결책 또한 제공해야 한다.

⑩도움말과 설명서 준비(Help and documentation)

- 어떤 정보든 쉽게 찾을 수 있고, 사용자의 행위에 초점을 가지고, 수행할 구체적인 단계가 나열되고, 분량이 너무 많지 않아야 한다.

- 사용성(Usability)의 속성과 원칙

사용성은 사용자 경험의 구성요소 중 하나로 다양한 하위 속성을 포함하고 있다.

속성 

설명 

원칙 

효율성

Efficiency 

원하는 목적을 달성하는데 소모되는 자원의 효율 

사용자가 최소한의 단계로 해당 작업을 달성 할 수 있도록 설계되어야 한다. 

유효성

Effectiveness 

의도한 목적을 완성도 있게 달성하는가 

사용자의 오류 처리 또는 그 복구 역시 쉽고 자유롭게 할 수 있도록 지원해야 한다. 

학습 용이성

Learnability 

사용자가 응용 프로그램을 배울 수 있는 제품의 능력 

사용자가 조작할 때마다 쉽게 인식할 수 있도록 사용정보들이 잘 보이도록 설계해야 한다. 

기억 용이성

memorability 

사용자가 해당 테스크를 달성하기 위한 최소한의 정보의 양을 유지하는가 

시스템은 사용자의 인지적 부할르 최소화하기 위해 일정범위 이상의 항목을 제시하지 않는다 

이해 용이성

Understandability 

사용의 특정 테스크 및 조건을 이해할 수 있는 제품의 능력 정도

시스템은 다양한 작업을 수행하는 방식에 대해 일관성을 유지해야 한다. 

피드백

Feedback

사용자 입력 또는 인터랙션 방식에 대한 소프트웨어 제품의 반응성 

사용자에게 항상 현재 어느 위치에 있고 어떤 조작을 하고 있는지에 대한 정보를 주어야 한다

지침
Guidance 

UI가 상황에 맞는, 또는 오류가 발생할 때 의미있는 피드백을 제공하는지 여부 

사용자 설명서에 유용한 정보와 사용에 관련한 지침을 제공해야 한다. 

유연성
Flexibility 

처음 지정된 거 이외의 작업 또는 환경의 변화에 적응할 수 있는 정도 

사용자 인터페이스는 사용자의 개인 기호에 맞게 맞춤화 할 수 있어야 한다 

보편성

Universality

제품이 서로 다른 문화적 배경을 가진 사용자의 다양성을 수용할 수 있는지 여부 

시스템은 사용자의 장애, 인종, 문화적 다양성을 가진 모든 사용자를 고려해야 한다. 

안전성

Safety

정보와 데이터를 보호하기 위한 소프트웨어 제품의 능력 

인증되지 않은 정보와 다른 사용자의 접근과 정보 데이터를 보호할 수 있어야 한다. 


2. 사용성 평가 원칙과 절차

- 사용성 평가(Usability Evaluation)의 정의와 목적

사용성 평가는 제품과 시스템의 복잡하나 기능들을 사용자가 보다 쉽고 편리하게 조작할 수 있도록 사용자 인터페이스를 개발 또는 개선하기 위해 문제점을 찾아 내고 개선안을 발굴하는 과학적 조사과정이다.

- 신규 또는 기존의 특정 제품, 시스템, 서비스의 기능에 대한 사용자측명의 평가와 일련의 과정

- 제품과 시스템의 복잡한 기능에 대해 사용자가 보다 쉽고 편리하게 사용할 수 있도록 사용자 인터페이스 등에 대한 사용 측면의 평가와 개선

- 사용성 평가(Usability Evaluation)의 절차(3단계)

사용성 평가는 제품 및 시스템의 완성단계에서 시행되므로 주로 수행 데이터(performance data)분석을 통해 검증 결과를 도출해 낸다.

1단계 - 태스크 시나리오(task scenario) 수행과 측정 및 기록

실제 사용 상황을 가정해 미리 작성된 태스크 시나리오에 맞춰 기기 조작을 실행한다. 수행 시간, 수행도, 특이사항, 주요 오류 유형을 측정하고 기록한다.

2단계 - 사용자 만족도를 평가와 개선, 보완 사항 발굴

제품에 대한 사용자 인터페이스의 주요 구성 요소 별 사용자 만족도를 평가해 해당 제품의 사용성을 높이기 위해서 우선적으로 개선 보완해야 할 요소를 발굴한다.

3단계 - 문제점의 개선, 보완하기 위한 새로운 아이디어 탐색(반복)

주요 사용상 오류의 원인을 진단하고 이를 개선 및 보완하기 위한 아이데이션(ideation)을 진행하고, 향후 사용자 인터페이스 개발을 위한 새로운 아이디어를 탐색한다.

- 사용성 평가 항목과 측정지표

항목 

설명 

측정지표 

작업시간

Time behavior 

- 사용자가 태스크를 완료하는 시간

- 사용자가 태스크 또는 인터랙션 모드에 머무는 시간(지속하는)

- 특정 이벤트를 수행하는 데까지 걸린 시간

- 입력 속도와 빈도 

- 완료시간

- 로딩시간 

- 이벤트까지 걸린 시간

- 입력시간

사용 패턴

Usage patterns 

- 사용자의 행동 또는 기능 사용 빈도

- 마우스 클릭의 수, 기능 사용의 수, 마우스 활용의 양 등

- 사용자의 접근의 수와 방문 빈도, 이용정보의 양

- 최적의 해결방법과 실제 행동 사이의 비율

- 사용 빈도

-정보 접근성

-최선 해결책과의 편차 

정확성

Accurary 

- 사용자가 태스크를 완료할 때까지의 에러의 양

- 사용자 인터페이스 조작 또는 위치 컨트롤의 정확도

- 검색 정보의 총 양과 정확한 정보 사이의 비율 

- 에러율

- 공간 정확도

- 정보의 정확성 

완성도

Completeness

- 사용자의 태스크 성공 여부에 대한 숫자 혹은 백분율(%) 

- 성공/ 실패 여부와 비율 

학습 용이성
Learnability 

- 객체를 보는 즉시 사용하는 방법을 알 수 있는 정도
- 특정 목표를 달성하기 위해 필요한 기능 습득 정도
- 외부 요소가 중요한 정보와의 간섭 없이 습득하는 정도 

- 행동유도성
- 기억 용이성
- 단순성 

일관성
Constancy 

- 동일한 상황이나 유사한 태스크에 일관되고 표준화된 체계를 가지고 있는지 여부에 대한 평가

- 사용자가 이해할 수 있는 인식 요소와의 상호작용을 제공하는 지의 여부

- 시각적 일관성
- 기능적 일관성
- 가독성
- 친숙성 


3. 사용성 평가의 활용

- 사용성 평가의 장점 및 중요성

사용성 평가는 상세한 문제점 진단 및 개선 방향을 제시할 수 있다.

사용성 평가를 통해 제품, 시스템 또는 서비스를 사용하는 인간의 행동에 대해 구체적으로 정리하기 때문에 단계별로 상세한 문제점 발견을 가능하게 하고, 같은 측정 방법을 기준으로 기존 제품 또는 경쟁 제품과의 비교를 통해 개선의 가능성을 평가할 수 있다.

사용성 평가는 문제점의 진단과 발견된 이슈의 중요도 판단에 도움을 준다.

사용성 평가를 통해 제품, 시스템 또는 서비스의 문제점의 진단에서 나아가 발견된 이슈의 중요도를 판단할 수 있다고, 문제의 우선순위에 따른 문제점과 개발 이슈의 제공으로 결정권자의 빠른 판단을 가능하게 한다.

- 사용자 경험(UX)과 사용성(Usability)의 관계

사용성은 사용자경험의 품질

사용자 경험(UX)은 도구적 품질(사용성, 유용성), 비도구적 품질(심미성 측면, 상징성 측면)의 인지에 대한 감정 반응이며 상호작용 하면서 시스템 특성, 사용자 특성 및 컨텍스트는 큰 영향을 미친다. 또, 사용자 경험의 실제 결과는 이 모든 것의 종합적인 것.

- 말크(Mahlke, 2007)

제품이나 서비스의 도구적 품질의 인지 요소인 유용성과 사용성

비도구적 품질의 인지 요소인 심미성과 상징성

유용성, 사용성과 심미성, 상징성에 대한 종합적 결과인 감정반응


학습정리

사용성(Usability)의 정의와 중요성

 - 사용성은 사용자와 컴퓨터간에 일어나는 상호 작용에서 경험하는 '사용의 품질'을 말한다.

 1) 유효성(Effectiveness) : 사용자가 원하는 목적을 제대로 달성하였는가?

 2) 효율성(Efficiency) : 사용자가 원하는 목적을 가능한 편리하게 수행하였는가?

 3) 만족성(Satisfaction) : 전반적인 사용 만족도는 어떠하였는가?

사용성 평가 목적과 절차

 - 신규 또는 기존의 특정 제품 기능에 대한 사용자 측면의 평가와 일련의 과정

    1단계 : 태스크 시나리오(task scenario) 수행과 측정 및 기록

    2단계 : 사용자 만족도를 평가와 개선, 보완 사항 발굴

    3단계 : 문제점의 개선, 보완하기 위한 새로운 아이디어 탐색

사용성 평가의 장점 및 중요성

 - 사용성 평가는 상세한 문제점 진단 및 개선 방향 제시한 수 있다.

 - 사용성 평가는 문제점의 진단과 발견된 이슈의 중요도 판단에 도움을 준다. 


6강 사용자중심디자인(UCD)


1. 사용자중심디자인의 개념과 중요성

- 사용자중심디자인(UCD, User Centered Design)의 개념

디자인적 문제해결 과정

- 사용자 중심 디자인(UCD)은 사용자를 중심으로 사고하여 만들어 내는 인터페이스, 서비스, 제품 디자인의 철학적 접근 방법이자 디자인 사상이다.

- UCD의 최종적 단계에서의 결과물인 디자인은 '인간(사용자)의 편의와 가치의 실현에 초점'을 맞추게 된다.

사용자중심디자인과 사용자 인터페이스

- UCD는 사용자가 무엇을 할 수 있고', '무엇을 원하고', '무엇을 할 필요가 있는지에 따른 사용자 인터페이스(UI)의 최적화를 통해 사용자중심디자인 가치를 현실화하는 노력에 있다.

사용자의 이해가 최우선이 되는 디자인 방법론

- 개발과정에 사용자가 개입, 사용자 테스트가 중요시되는 디자인 방법론

- 사용성과 직접적으로 결부된 인간 요소(human factor)연구에 기반을 둠

- 심성모형, 행동유도성 등의 개념을 바탕으로 사용자를 이해하고 디자인에 반영

사용자중심디자인의 중요한 원칙

- 실체 제품을 사용하는 최종 사용자에 집중한다

- 요구 사항과 디자인을 사용자와 함께 검증한다

- 디자인, 프로토타입 제작, 새발을 반복적으로 수행한다.

- 전체적인 사용자 경험을 고려한다.


2. 사용자중심디자인의 구성요소

- 사용자중심디자인의 핵심가치

사용자

사람들이 진심으로 바라고 원하는 것은 무엇인가?

사용 편의성(usability)

다양하고 복잡 다기능화 되어가는 스마트기기의 사용자가 보다 사용이 편리한 제품과 서비스를 디자인해야 하는 필요성

사용자 참여 디자인(participatory-design)

디자인 단계별로 실제 사용자들을 참여시켜서 설계와 검증을 진행, 제품의 기획과 설계 등 모든 단계에서 사용자를 참여시켜서 확인하고 그들이 쉽게 사용할 수 있는 제품을 만드는 것이 사용자중심디자인의 핵심

- 사용자중심디자인의 특징

사용자의 개발 절차의 개입

- UCD는 철저하게 사용자에 초첨이 맞춰어져 있다.

- 사용자의 경험적(empirical)정보를 이용하여 그들이 원하는 디자인 요구사항을 도출한다.

반복적 디자인과 다양한 분야의 협력

- 사용자의 피드백, 테스트 등을 통해 제품과 서비스는 개발과정에서 수많은 평가 개선의 반복과정을 거친다.

- 사용자의 이해가 중요하기 때문에 심리학, 인류학, 문화, 언어 등 인문사회학적 접근과 협력이 요구된다.


3. 사용자중심디자인 프로세스의 이해

- 사용자중심디자인 프로세스의 기본 원칙

사용자의 참여와 반복적 사용자 평가

- 단계 정의보다 각각 사용자 개입이 어떻게 이루어지는가가 중요

- 사용자의 요구를 만족하는 시스템 디자인

- 사용자의 이해와 프로토타입을 통한 디자인에 대한 반복적 사용자 평가와 개선

- 사용자중심디자인 수행 단계

사용자 이해 단계

- 사용자의 행동과 태도를 파악하고, 그들이 원하고 필요로 하는 것이 무엇인지 찾아낸다.

→ FGI, 필드리서치를 통한 사용자 조사 실시

인터랙션 정의 단계

- 사용자 조사를 통해 얻은 결과를 바탕으로 사용자 프로필을 만들고 정보 구조와 작업 구조를 정의한다.

→ 사용자 요구사항을 정의하고 전반적인 인터랙션 구조를 파악

UI 디자인 단계

- 개략적 컨셉에서 구체적인 설계까지 사용자와 함께 다양한 프로토타입을 평가하면서 디자인을 완성해가는 단계이다

→ 다양한 수준의 프로토타입을 만들어 사용자를 참여시켜 평가를 반복한다 (저수준/고수준 프로토타입 제작)

사용자 검증과 평가 단계

- 프로토타입 작성이 완료된 후 개발의 진행과 완료 시 필요한 평가를 수행하는 단계다.

→ 프로토타입이 실제 개발 가능한지 검토하고, 내부의 UI가이드라인과 OS나 제조사에서 제공하는 디자인 가이드라인이 지켜졌는지 점검한다

개발 완료 단계

- 실제 개발된 제품을 대상으로 사용성 테스트를 진행한다.

- 개발이 완료되고 출시된 이후에는 사용자 반응을 파악한다.

→ 제품 출시 후에도 사용자 피드백을 지속적으로 수집하고 사용자 중심의 혁신 과정을 반복해야 제품의 경쟁력을 지속적으로 높일 수 있다.


학습정리

사용자중심디자인의 개념

 - 사용자를 중심으로 사고하는 디자인직 문제해결 방법론이자 과정이다.

 - 사용자의 이해가 최우선이 되는 디자인 방법론으로 개발과정이 사용자가 개입, 사용자 테스트가 중요시되는 디자인 방법론이다.

 - UCD방법론은 디자인, 프로토타입 제작, 개발 과정에 반복적으로 반영하게 된다.

사용자중심디자인의 핵심가치

 - 사람들이 진심으로 바라고 원하는 것은 무엇인가?

 - 사용자 참여 디자인(participatory-design) : 사용자의 개발 절차의 개인

 - 반복적 디자인과 다양한 분야의 협력

사용자중심디자인 프로세스의 이해

    사용자 이해 단계 → 인터랙션 정의 단계 → UI디자인 단계 → 사용자 검증과 평가 단계 → 개발 완료 단계


7강 UX시나리오


1. UX 시나리오의 이해

- UX 시나리오

UX 시나리오는 구체적인 미래 시점의 상황에서 사용자가 겪을 경험을 예상해보는 도구이다.

- UX 시나리오의 목적과 활용

- 미래의 사용자가 무엇을 원하고 필요로 하는지와 제품서비스가 추구하는 사용자 가치에 대한 통찰력을 반영한다.

- UX 시나리오의 목표와 범위 내에서 사용자(고객)의 환경과 현상, 그리고 그들이 처한 문제점에 대한 진단 및 해결 방향을 설정하는 과정을 통해 제품과 서비스 이면에 숨겨진 사용자 경험가치의 본질을 찾아가는 과정이다.

- 사용자 경험의 속성과 흐름을 파악할 수 있다

- 미래의 불명확한 사용 상황을 보다 구체화하기 위한 도구이다.

- 미래의 사용자가 무엇을 원하고 필요로 하는지에 대한 제품서비스 검증의 단계이다.

- UX시나리오는 구체적인 사용자와 컨텍스트를 정의하고, 사용자 행위 중심의 태스크(task)를 정의하여 상호작용 방식을 구체화하기 때문에 정보구조, 인터랙션 디자인 등의 UI 설계에 유용하게 활용된다.


2. UX 시나리오의 유형과 장단점

- 페르소나(Persona) 기법

가상의 사용자

- 페르소나는 '가상의 인물(Persona)'을 통해 그들 사용자들의 이용행태와 제품, 서비스에 대한 니즈(Needs)에 주목하여 이를 서술적으로 정의하는 기법이다.

- 목표 사용자를 보다 면밀하게 분석하기 위해, (가상)사용자들을 특정한 기준에 따라 분류한 뒤, 이들 각각의 사용자 유형들을 가공의 캐릭터 또는 프로필 등으로 표현하는 기법이다.

장점

- 사용자를 집중해서 분석하도록 해준다.

- 사용자에 대한 감성적인 이해를 도와준다.

- 효과적으로 사용자를 알게 해준다.

- 페르소나를 작성하게 되면, 사용자는 하나의 동일한 유형으로 존재하지 않고, 이용환경(Context)이나 성별/연령별/직업별 특성, 제품에 대한 기대, 니즈, 동기, 태도, 이용행태 등이 다르다는 것을 발견하게 된다.

- 유저 스토리(User story)

사용자 리서치의이해도 향상

- 리서치 결과는 가장 특징적인 이야기들만 담겨져 있기 때문에 모든 사용자의 모든 경험을 대변할 수 없다.

- UX 디자이너는 리서치 결과를 보다 풍성하게 꾸며서 다른 이해관계자들에게 효과적으로 설명할 필요가 있는데, 이 때 사용하는 방법이 사용자 스토리이다.

구성 요소

- 사용자들은 이런 사람이다.

- 사용자들은 이럴 때 제품을 이용한다.

- 사용자들은 제품을 이렇게 이용한다.

- 사용자들은 제품 이용 시에 이런 갈등을 겪는다.

- 사용자들은 제품에 대해서 이런 니즈를 가지고 있다.

- 니즈에 부합하는 디자인 아이디어가 반영되어도 된다.

- 사용자 여정맵(Journey Map)

시간의 흐름에 따른 사용자 경험의 파악

- 사용자 여정맵은 사용자들이 수행하는 제품/서비스 이용흐름을 조망하고 문제를 발견하는 데 탁월한 툴이다.

- 미리 해당 제품(서비스)을 분석하고 Journey Map을 그려봄으로써 예상되는 사용자들의 이용 경험을 모형화해 볼 수 있다.

특징

- 사용자의 긍정, 부정을 나타내어 부정을 긍정으로 끌어올리며, 효과적인 서비스 설계가 가능함

장점

- 사용자 여정의 의도적인, 의도하지 않은 측면을 이해하는데 도움을 줌

- 서비스의 실제 그리고 일상적인 터닝 포인트를 밝힐 수 있음

- 필요 없는 단계와 중복되는 수고에 대해 파악할 수 있음


3. UX 시나리오의 작성 방법론

- 페르소나 기반 UX 시나리오 작성

페르소나 기법의 장점

- 예측하기 힘든 수 많은 사용자에 대한 동기, 욕구, 패턴을 구체적으로 요약, 제시함

- 다양한 프로젝트 구성원들이 의사 결정을 할 때 그 기준으로 작용함

- '사용자는 이렇게 생각할 거에요.' 라는 주관적 예측을 줄임

- 사용자의 기술적 수준에 대한 시각차를 좁힘

- 특정한 사람을 위해 디자인한다는 느낌을 가질 수 있음

- 사용자에 대한 관점을 여러 부서 사이에서 계속 일치시킬 수 있음

페르소나 기반 UX 시나리오 작성 가이드

- 동기 : 사용자가 얻으려고(의도/목표) 하는 것

- 니즈 : 목표 달성을 위해 사용자가 필요로 하는 것


사용전 - 사용과정 - 사용 후

- 페르소나가 서비스를 어떻게 사용할 것인지에 대한 설정

- 페르소나가 서비스를 사용하기 전에 어떤 정보를 알고 있을지 정의

- UX 시나리오는 페르소나의 다음 행동이 어떤 것인지 명시해야 함

- 사용자 여정맵 작성

여정맵 기법의 장점

- 여정맵은 실제 사용자의 서비스 경험을 시각적으로 재현해보는 맵으로 사용자의 긍정적, 부정적 반응을 나타냄

- 여정을 맵핑하는 것은 서비스들을 이해하고 서비스와 사용자와의 갭, 개선과 혁신의 디자인적 기회를 알아보는데 가장 심플하고 유용한 접근임

- 사용자 여정맵은 사용자들이 경험하게 될 서비스의 인터랙션과 제스츄어, 터리 포인트들로 구성됨

여정맵 작성 가이드

- 서비스 이용전 / 이용 중 / 이용 후로 구분한다.

- 사용자의 컨텍스트를 고려해 가로축을 설계하고, 세로축은 사용자의 긍부정을 표현한다.

- 지나치게 복잡해지지 않도록 하고, 선형 그래프로 한눈에 전체 경험을 조망할 수 있돌고 한다.

- 되도록 그림 이미지를 활용한다.

- UX 시나리오의 요소

동기/계기와 의도(Motivation & intention)

- 사용자 행동이 일어나게 되는 직접적인 이유(목표)

사용자 행위(User Interactivity)

- 사용자 인터랙션/인터페이스에 대한 사용자 행동패턴

기대 결과의 평가와 해석(Evaluation & Interpretation)

- 의도 / 원했던 목표와 실행 결과의 평가와 인식/감각적 해석

기억과 태도(Memory & Attitude)

- 결과에 대한 만족/불만족 수준의 기억-다음 행동 영향을 주는 요인

- 사용자 경험의 흐름과 요소

사용자에게 형성될 UX의 구조와 요소를 파악

- 사용자에게 어떤 동기로 작용, 특정 행동을 야기하여, 기대(의도)에 대한 평가와 해석, 기억과 태도로 이어지는 경험 흐름의 구조

사용자 경험의 흐름 파악

동기/계기와 의도(Motivation & intention) → 사용자 행위(User Interactivity) → 기대 결과의 평가와 해석(Evaluation & Interpretation) → 기억과 태도(Memory & Attitude) → 동기/계기와 의도(Motivation & intention)

- UX 시나리오 작성 가이드(6단계)

User definition : 목표 사용자는 누구인지?

(User definition) 사용자(고객)은 누구인지?

- 사용자의 성격, 선호, 라이프스타일, 직업, 가치관 및 태도 등으로 사용자 정의

User needs/problem : 사용자에게 제공하고자 하는 UX는 무엇인지?

(Needs/Problem) 사용하는 가장 큰 이유는?

- 해당 제품서비스가 해결, 또는 제공하고자 하는 혁신적인 사용자니즈 정의

Context of use : 사용자는 어떤 상황에서 사용하게 되는지?

(Context of Use) 어떤 상황에서 사용하는지?

- 사용환경과 상황-시간, 장소, 또는 특정 이벤트 등 사용의 전후 맥락을 정의

Key-function : 제품서비스의 주요 기능은 무엇인지?

(Function) 어떤 기능 때문에 사용하는지?

- 사용자가 사용하게 될 제품서비스의 핵심 기능 정의

User task-flow : 사용자는 해당 기능을 어떤 방식으로 사용하게 되는지?

(User Task Flow) 그 기능을 어떻게 사용하는지?

- 사용자가 인터페이스와 인터랙션 방식 등을 실행하는데 있어서 하나의 목적을 달성해 나가는 경로나 과정

User value/benefit : 사용자가 최종적으로 얻게되는 UX 가치, 또는 편익은?

(Benefit/Value) 그래서 어떤 의미가 있는지?

- 사용자가 해당 제품의 기능과 서비스를 이용하는 가장 큰 이유(why)와 만족의 수준 정의


학습정리

UX 시나리오의 이해

 - UX 시나리오는 구체적인 미래 시점의 상황에서 사용자가 겪을 경험을 예상해보는 도구이다.

 - 제품서비스의 구체적인 콘텐츠와 기능, 무엇보다 사용자 경험의 속성과 흐름을 파악할 수 있다.

UX 시나리오의 유형과 장단점

 - 페르소나(Persona) 기법 : 페르소나는 사용자를 집중해서 분석하도록 해준다.

 - 유저 스토리(User story) : 사용자 리서치의 이해도 향상에 도움을 주는 도구이다.

 - 사용자 여정맵(Journey Map) : 시간의 흐름에 따른 사용자경험의 파악을 위한 도구이다.

UX 시나리오의 작성 방법론

 - 사용자 경험의 흐름 파악

 - UX 시나리오의 요소

 - UX 시나리오 작성 가이드(6단계)


8강 사용자분석 방법론


1. 사용자의 정의와 특성의 이해

- 사용자(User) 정의

사용자, 과연 그들은 누구인가?

- 사용자(user)는 어떤 목표와 의도를 가지고 특정 컴퓨터나 시스템(모바일 기기)등을 사용하며 능동적이고 가변적인 욕구를 가지는 주체다.

사용자는 어떤 욕구의 소유자인가? (인간의 본질적 욕구 측면)

Ex. 개인 프라이버시에 민감하며, 사회적 소속감을 중시

사용자가 궁극적으로 원하는 것은 무엇인가?(기능적 측면)

Ex. 자신의 개인정보를 친한 지인과만 안전하게 공유할 수 있는 자신만의 공개 가능

- 사용자(User)의 종류

주사용자(primary users)

- 사용자분석의 주요 대상이 되는 사용자 그룹을 말하며, 특정 목적을 달성하기 위해 시스템이나 컴퓨터를 통해 스스로 정보처리를 하거나 기능을 이용하는 사람

부사용자(secondary users)

- 실제로 시스템을 사용하는 사람은 아니지만, 주사용자가 시스템을 어떻게 사용하는가에 영향을 주거나 받는 사람들

구매자로서 사용자(users as buyer)

- 실제로 시스템이나 기기를 구입하는 과정에서 결정권을 행사하는 집단

- 비즈니스환경에서는 구매자와 사용자 간에 매우 다른 목표, 특성 그리고 행동양식이 존재한다.

관리자로서 사용자(user as manager)

- 실제 사용자와는 다른, 조직 내에서 실질적으로 조직의 일을 관리하는 사람들

- 사용자(User)의 특성

행태적 특성(behavioral attributes)

- 상호작용성과 관련된 행태 : 자주(빈도), 정기적으로, 또는 집중해서 오랫동안, 일시적인 상호작용

- 정보와 관련된 행태 : 얼마나 많이, 얼마나 복잡한가에 대한 정보를 대하는 행태

- 기능과 관련된 행태 : 검색 기능, 이미지처리, 저장, 편집, 공유 기능 등에 관한 행태

개인적인 특성(personal attributes)

- 성격적인 특성

- 신체적인 특성

- 문화적 특성

- 동기적인 특성

사용자의 숙련 정도

- 초보자

- 중급자

- 숙련가

- 전문가


2. 사용자 분석 방법론

- 사용자분석(user analysis)의 목적과 중요성

사용자 분석은 왜 해야 하는가?

- 사용자의 욕구, 인지적 특성, 행동양식 및 상황을 고려해 제품/시스템/서비스 설계에 반영한다.

- 사용자로 하여금 학습 없이도 시스템에 대한 정보를 충분히 얻을 수 있고 쉽게 제품/기능을 사용할 수 있게 하기 위함이다.

사용자 분석 대상 '사용자의 어떤 특성을 어떻게 정리할까?'

- 사람 자체에 대한 사용자(user) 분석'

→ 보편적 인간 중심 -who, when, where

- 사람 행동에 대한 '사용자 행동과 경험(UX) 분석'

→ 특정 제품서비스 사용자 행태 중심 - how, what, why

사용자 분석의 중요성

- 사람이 생각하고 행동하는 과정은 복잡하고 이해하기 어렵다.

- 어떤 사용자를 위한 제품, 시스템을 개발할 것인지를 명확하게 파악해야 그 사용자들에게 최적의 경험을 제공하는 제품, 시스템을 개발할 확률이 높아진다.

- 사용자분석은 사용자 요구와 선호도를 파악하고 그 개발 제품서비스의 시장적합성을 높이는 절차이다.

- 사용자 분석 3단계 - 역할 모형을 중심으로

1단계 : 사용자 분석의 대상이 되는 조사주세를 선정하고 참여자들을 선정하는 단계

- 실제 사용자를 대표할 수 있는 사람, 조직 내 사용자와 가장 접촉이 많은 부서 관계자로 선정팀 구성

- 성별/연령별, 교육/소득수준, 지역적/문화적/언어적 특성, 취미 등 분석 대상 사용자 리스트 작성

- 사용자 선발 질문지 작성 - 해당 시스템이 성격에 알맞은 주제에 대한 구성원 모집 목적

- 사용자 분석 절차의 확정 - 사용행태, 숙련 정도, 개인적 특성을 확인 할 수 있는 적합한 방법 선정

2단계 : 선정된 사용자들을 대표하는 소수의 사람들을 대상으로 한 역할 모형(user role model)의 구조 선정

- FGI(Focus Group Interview) 기법을 활용한 조사 주제의 확정과 역할 모형 구조 선정

- 역할 모형 - 역할은 사용자와 시스템간의 관계에 초점 (욕구, 필요, 관심사항, 기대수준, 사용 행태 등)

- 한 사람이 특정 시스템에 여러 가지 역할을 수행, 또는 여러 사람이 한 시스템에 동일한 역할을 수행

- 정리 및 보고서 작성 → 역할 지도(role map)의 작성

3단계 : 실제 역할 모형에 들어가는 상세한 사용자의 프로파일을 파악하는 단계

- 사용 가치 프로파일 : 기능적 가치, 유희적 가치, 사회적 가치, 개인적 가치

- 사용성 속성 프로파일 : 효율성, 정확성, 일관성, 유연성, 의미성

- 감성 프로파일 : 정서와 미적 인상 및 개성

- 숙련도 프로파일 : 해당 분야 지식, 시스템 지식, 기기 지식 수중

- 사용 행태 프로파일 : 상호작용과 관련하여 사용 빈도와 강도, 복잡도

- 사용자 분석의 중요성

사용자 요구사항이나 필요성이 제대로 반영되지 않은 시스템 개발은 심각한 오류를 발생할 수 있다.

- 사용자가 아니면, (개발자 자신은) 실제 시스템을 사용한 과정에서 겪게 되는 문제점이나 시스템을 이용하는 궁극적인 목적 등을 알아낼 수 없다.

사용자 분석은 개발 초기 뿐만 아니라 제품, 시스템 개발의 전체 단계에 걸쳐 점진적이고 반복적으로 이루어야 한다.

- 그 이유는 시스템이 개발되어 감에 따라 사용자가 원하는 바와 사용자가 불편을 느끼는 점이 역동적으로 바뀌기 시작하면서 점점 더 자신이 원하는 사양과 불편한 점에 대해서 구체적으로 이야기 할 수 있기 때문이다.


3. 사용자 분석의 주요 기법

- 사용자 분석 도구와 기법

성공적인 사용자 연구를 위해서는 대상이 되는 사용자와 시스템의 목적, 상황을 명확히 한 뒤, 이에 따른 각 사용자 연구방법들의 장단점을 잘 이해하고 최적의 방법론을 선택해야 한다.

- 설문조사(questionnaire) / 서베이(*survey)

- 가장 널리 사용되는 니즈 분석기법으로 대표적인 정량조사 기법

- 조사의 효율성을 위해 모집단을 대표하는 표적 집단을 추출하고 조사하는 표본조사

- 일지 연구(diary study)

- 일상생황에서 사용자에게 일정 형식의 일지를 제공하고,

- 사용자 스스로 수행하는 일이나 생각, 감정 등을 카메라 등의 매체로 기록

- 장시간 연구 가능하고, 시각적 정보를 쉽게 얻을 수 있다.

-  단, 사용자 동기에 따라 얻을 수 있는 정보가 크게 달라지는 단점(인터뷰 보완)

- 포커스 그룹 인터뷰(FGI)

- 사용자가 경험한 내용을 포커스 그룹 인터뷰를 통해 개방적 토의를 진행하고, 그 자료를 분석하는 질적 조사기법

- FGI의 장점은 저비용으로 대상으로 부터 필요한 정보를 빠르게 얻을 수 있다.

- 또한 그룹 내 시너지 효과도 얻을 수 있다.

- 다만, 대상자 수가 적어 대표성이 떨어지고 사회적 조정(moderation) 능력에 좌우되는 면이 있다.

- 라이프스타일 분석(AIO 분석)

- 시장 세분화를 위한 클러스터링(clustering)기법의 일종

- 소비자의 생활양식에 의한 시장세분화를 하기 위한 방법으로, 소비자 생활양식은 AIO(Activity, Interest, Opinion)의 척도로 측정된다.

- 사용자가 어떤 시간을 보내고(A), 어떤 일을 중시하며(I), 어떤 견해를 갖고 있는가(O)를 척도로 나타내어 수치화한다.

- 사장에 대한 풍부한 정보를 주는 반면 세분화의 경계가 모호해 측정이 어려울 수 있다는 단점이 있다.

- 시나리오 분석(scenario analysis)

- 미래에 나타날 수 있는 여러 가지 모습들을 일관성과 논리성을 갖춘 상태에서 제시하는 것 (Michael Porter, 1985)

- 이 기법은 아이디어의 발상 및 기회 포착에서부터 완제품의 사용 환경, 기술, 목적에 이르기까지 디자인 프로세스 전반에 걸쳐 적용이 가능한 미래예측기법

- 시나리오 플롯을 구성할 때 대안적인 미래들이 분기하기 시작하는 시점에서 줄거리를 결정하는 것

- 귀납적 방법과 연역적 방법으로 구성할 수 있다.

- 관찰법(observation) / 에쓰로그래피(ethnography)

- 특정한 실험체계 내의 제한된 이슈로는 사용자의 무의식에 잠재된 니즈(latent needs) 도출에 한계가 있음. ( Ex: 호순 효과 )

- 관찰을 통해 인간과 인간 행동에 영향을 미치는 주위의 환경 요소들을 고려해 객관적인 관점에서 정상적인 접근이 가능하다.

- 로그 분석(Log analysis)

- 웹사이트나 모바일앱, 디지털기기의 사용자의 사용기록에 대한 분석이다.

- 방문자수와 페이지 뷰수, 쿠기 값 분석 등으로 사용자 정보를 분석하는 방법

- 개별 사용자의 행동들은 로그를 통해 기록하고 그 로그 분석을 통해 사용자의 행동 패턴 등을 분석이 가능하다.

- 로그파일, 코드 삽입(ASP), 통계 등을 이용한 로그 분석이 가능하다.


학습정리

사용자의 정의와 특성의 이해

 - 사용자는 어떤 목표와 의도를 가지고 특정 컴퓨터나 시스템 등을 사용하며 능동적이고 가변적인 욕구를 가지는 주체다

    사용자의 종류 : 주 사용자, 부 사용자, 구매자, 관리자

    사용자 특성 : 행태적 특성, 개인적인 특성, 숙련정도에 따른 특성

사용자 분석 방법론

 - 사용자분석은 사용자 요구와 선호도를 파악하고 개발 제품서비스의 시장 적합성을 높이는 절차이다.

 - 사용자 분석은 개발 초기 뿐만 아니라 제품, 시스템 개발의 전체 단계에 걸쳐 점진적이고 반복적으로 이루어야 한다.

사용자 분석의 주요 기법

 - 성공적인 사용자 연구를 위해서는 대상이 되는 사용자와 시스템의 목적, 상황을 명확히 한 뒤, 이에 따른 각 사용자 연구방법들의 장단점을 잘 이해하고 최적의 방법론을 선택해야 한다.


9강 페르소나와 사용자모델링 방법론


1. 사용자 모델링의 이해

- 사용자 모델링(user modeling)

정의

사용자 모델링은 실제 시스템 개발에 부합하는 사용자 모형(Model)을 제작하여, 특성을 시스템의 개발 목적에 따라 '사용자의 행동을 체계적으로 파악해 나가는 과정'이다.

사용자 분석 vs 사용자 모델링의 관계

사용자 분석이 사용자의 니즈를 전반적으로 조사하는 것이라면, 사용자 모델링은 그 추려진 분석 내용을 '시스템에 구현하고 구체화시키는 과정'이다.

- 사용자 모형(model) 구분

인지적 모형(cognitive model)

사용자가 어떻게 시스템을 이해하고, 사용 과정을 어떻게 배우고, 실제로 어떻게 사용하는지와 관련된 모형이다.

역할 모형(user role model)

사용자와 시스템 간의 상호 역할관계에 초점을 둔다. ( 욕구, 필요, 기대, 관심, 행태 등의 집합)

사회기술 모형(socio-technical model)

기술적인 요소가 동시에 고려된 사회적 맥락, 또는 서비스 생태계를 이해하는 것을 목표로 한다.


2, 멘탈 모델의 정의

- UI가 사용자의 멘탈모델과 맞지 않는다!?

멘탈모델(Mental Model)이란 사람들이 자기 자신, 다른 사람, 환경, 자신이 상호작용하는 사물들에 대해 갖는 모형이다. 사람들은 경험, 훈련, 지시를 통해 멘탈모델을 형성한다.

- 멘탈 모델링 과정

사용자의 사용에 관련된 행동 패턴과 태스크 분석을 통해 UI 설계 지침으로 활용

1. 사용자 인터뷰하기 - 사용자는 어떻게 행동하는가? 에 대한 사용자 진술의 수집

2. 사용자 행동 추출하기 - 사용 목적에 다른 행동의 양상과 속성, 절차 등을 추출

3. 행동 패턴 찾기 - 개별 행동들의 패턴화된 특징 도출

- 멘탈 모델의 역할

멘탈 모델을 만든다는 것은?

- 멘탈 모델은 사람들의 행동 동기, 사고 과정뿐만 아니라 그들이 행동하는 감성적, 철학적 배경에 대해서도 깊이 이해하는 데 효과적인 방법이다.

- 멘탈 모델은 사용자가 이용하는 서비스의 목적, 기능, 방법 등 다양한 이슈들에 대해서 사용자들이 경험하거나 하게 될 많은 상황을 규명하고 분류하는데 효과적인 방법이다.


3. 사용자모델링과 페르소나 작성 방법론

- 페르소나(persona)의 정의

어원 : 그리스의 고대극에서 배우들이 쓰던 가면을 일컫는다.

사용자 모델링에서 페르소나의 정의

- 어떤 제품 혹은 서비스를 사용할 만한 목표 인구 집단 안에 있는 '다양한 사용자 유형들을 대표하는 가상의 인물을 구체화하는 것'을 말한다.

사용자 모델링에서 페르소나의 역할

- 목표 사용자 그룹들의 이해를 돕는 역할

- 제품과 시스템이 얼마나 적합할지, 만족도를 향상시키도록 유도하는 가이드 역할

- 사람의 개성을 부여함으로써 보다 인간적인 접근을 하고 동감을 느끼는 것이 가능

- 사용자 요구분석 → 페르소나(가상의 사용자) → 사용자 시나리오(기능 정의) → 구체화/개발(UI, 인터랙션)

- 페르소나의 장점

- 페르소나를 사용하면 사용자를 인간의 얼굴을 가진 한 개인적인격체로서 보다 인간적으로 가깝게 이해할 수 있다.

- 가상의 인물이지만 실제 사용자들이 필요하고 느낄만한 것에 대해보다 쉽게 이해하고 접근할 수 있게 된다.

- 페르소나는 마케팅, 디자인, 판매 등 다양한 개발 조직 간에 사용자 이해를 위한 상호소통의 도구로서 유용하게 이용할 수 있다.

- 페르소나의 활용 지침

- 페르소나는 사용자를 상세히 묘사한 것으로 사용자 유형 프로필을 보여 준다.

- 페르소나는 일반적으로 80% 정도의 사용자를 커버할 수 있는 3~5명의 대표 사용자를 대상으로 구성한다.

- 페르소나는 디자인 개발 결과물에 대한 평가척도로, 페르소나의 이물자체는 가상이지만 실제 사용자들에게서 얻어진 자료를 바탕으로 만들어져야 한다.

- 페르소나 구성요소

- 기본 사항 : 사진, 이름, 개인 설명 등의 몰입을 도와주는 요소들

- 목표 : 경험적 목표, 궁극적 목표, 인생의 목표

- 계기/동기 : 제품과 서비스를 사용하게 된 주된 이유

- 태도/관점 : 제품과 서비스를 바라보는 생각과 관점

- 행태의 흐름 : 사용 내역(얼마나 자주)

- 환경 : 라이프스타일

- 숙련도 : 기술 활용 능력

- 불만족도 : 기존 제품서비스 사용경험의 문제점

- 니즈 : 기대하고 바라는 바

- 페르소나 작성 프로세스

↓ 사용자 컨텍스트 분석(context Analysis) 및 요구사항(requirement Analysis) 분석

↓ 주요 행동 패턴으로부터 전형적인 특성들을 결정

↓ 맵핑법을 통해 인터뷰 대상자를 특성에 매치하고 패턴을 도출

↓ 주요 패턴으로부터 '페르소나'를 결정하고 '페르소나' 목적을 정의

↓ '페르소나를 정교하게 다듬고 실질적 모델을 완성

- 페르소나 작성 시 주안점

- 사용자 설문이나 사용 후기의 양식을 통해 얻은 자료로 사용자의 과거 경험을 파악, 이를 통해 니즈를 분석하고 최종적으로 가상의 사용자를 설정한다.

- 사용자 분석을 통해 얻은 정성, 정량 조사 자료를 기반으로 만들어지는 것이기 때문에 신뢰성 있는 리서치가 진행되어야 한다.

- 사실에 기반을 둔 사용자 조사 자료를 통해 얻을 신뢰할 수 있는 데이터라는 사실을 늘 인지하고 있어야 한다.

- 최대한 다양한 요구사항을 고려한 제품, 서비스에 대해 하나 이상의 페르소나가 존재한다는 사실을 충분히 인지한다.


학습정리

사용자 모델링의 이해

 - 시스템의 개발 목적에 따라 사용자의 행동을 체계적으로 파악해 나가는 과정이다.

 - 사용자 모델링은 사용자 분석 내용을 시스템에 구현하고 구체화시키는 과정이다.

 - 사용자 모형(model)구분 : 인지적 모형, 역할 모형, 사회기술 모형

멘탈 모델의 이해와 활용

 - 사람들의 행동 동기, 사고 과정뿐만 아니라 그들이 행동하는 감성적, 철학적 배경에 대해서도 깊이 이해하는 데 효과적인 방법이다.

 - 사람들이 하는 행동에 대해 그들과 이야기하고, 패턴을 찾고, 그 패턴을 모두 포괄하는 하나의 모델로 정리하는 일

페르소나의 작성

 - 목표 대상의 인구학적 연구에서 만들어진 데이터에 사람의 개성을 부여함으로써 보다 인간적인 접근을 하고 동감을 느끼는 것이 가능하도록 하여 목표 대상에 보다 집중하는데 도움이 된다.


10강 UX기획 및 컨셉메이킹 방법론


1. UX 기획 및 디자인 전략 기초

- UX 기획과 전략의 기본 지식

사용자경험(UX)디자인이란?

- UX Design은 실제 사용자의 컨텍스트와 니즈를 읽고, 그것을 제품/서비스로 만들어내는 '방법론'이다.

- UX의 핵심은 '사용자에게 어떤 가치를 제공할까'를 고민하는 '가치중심적 사고'를 기반으로 제품서비스를 디자인/설계한다.

UX 목표 : 사용자를 위한 디자인

- UX는 보기 좋은 시각물을 만드는 것이 아니라, 풍부한 사용자 경험을 제공하는게 목표이다.

- 양질의 사용자경험을 제공하기 위해서는 사용자를 깊이있게 이해하는 것이 필요하다.

- 사용자를 이해하는 것은 특정한 컨텍스트에서 사용자들이 인지적/감성적/행위적 특성을 발견하는 일이다.

- UX의 가장 중요한 것은 사용자의 니즈의 도출과 욕구충족이다.

UX 기획의 기본 요소

- 사용자 맥락(User Context)

사용자의 제품서비스의 사용상황(시간, 장소)과 사용 전후의 전반적인 맥락

- 사용자 니즈(User Needs)

UX 대상(제품/시스템/서비스)으로 부터 특정한 만족감을 얻으려는 사용자들의 기대

- 사용 동기(User Motives)

사용자들의 행동을 불러일으키는 직접적인 발화제

- 사용자 태도(User Attitude)

UX 대상에 대해 갖는 개인의 취향과 선호, 선험적인 믿음과 정보

- 사용자 행위(User Behavior)

UX 대상을 사용하는 과정에서 드러나느 반복적인 행동패턴

사용의 경험 가치

실용성, 용이성, 효율성, 느낌

사용성의 극대화

사용자 인터페이스(UI), 효과성, 효율성, 만족도


2. UX 컨셉 도출과 디자인프로세스의 이해

- 컨셉 모델(Concept Model)

- 머리속의 생각들을 가시화 시키는 기초작업 : "아이디어 + 기획"의 시각화

    "서비스와 기능이 어떤 구조로 형성되는지 그려내는 시각화의 초기 단계의 방법론이다.

- UX 기획에 있어 컨셉모델의 역할

- 사용자분석과 사용 모델을 바탕으로 실제 사용자경험의 컨셉모델을 만들어 개별 경험 요소들이 어떻게 디자인에 반영될 지에 대한 방향을 잡아 준다.

- 기획 초기에 컨셉 모델을 그려놓고 시작하면 협업자간 커뮤니케이션에 큰 도움이 된다.

- UX 기획 및 디자인프로세스의 이해

- 비즈니스 전략

비즈니스 목표와 비전의 이해, 브랜드전략, 시장/경쟁사 분석 등

- UX 리서치와 디자인전략 수립

사용자분석, 요구사항 도출, 페르소나, 사용자 인터뷰 등

- UX 디자인 컨셉

사용자 테스트, 아이데이션, 컨셉모델 등

- UX 디자인 개발 수행

스토리보드, 와이어프레임, 키스크린, UI개발, 사용자테스트 등


3. 프로토타이핑(prototyping)

- 프로토타이핑의 목적

프로토타입의 개념

- 프로토타입은 시제품이 나오기 전 제품의 원형을 의미한다.

- 제품, 또는 시스템의 미완성 버전 또는 중요한 기능들이 포함되어 있는 시스템의 초기 모델로 활용된다.

- 프로토타입은 사용자의 모든 요구사항이 정확하게 반영될 때까지 계속해서 개선/보완된다.

프로토타입의 목적 및 장점

- 프로토타입핑의 장점은 최종 사용자가 초기 모델을 사용하면서 평가할 수 있어, 시제품의 개선 보완할 부분의 파악이 용이하다는 점이다.

- 프로토타입은 개발자와 사용자의 의사소통의 채널이고, 언제든지 변경이 가능한 유연성을 갖고 있다.

- 디자인, 개발팀 간 시제품 디자인 검토 및 협업을 도와 주고 UI 설계 시 발생되는 여러 개발이슈에 대한 의사결정에 도움을 준다.

- 개발 주기의 단축과 사용자의 요구사항을 정확히 파악해 사용성의 만족도를 향상시킬 수 있다.

- 프로토타이핑 방법론

저수준 프로토타이핑(Low-fidelity prototyping)

- 저수준 프로토타이핑은 빠른 시간 안에 프로토타입 제작이 필요한 경우에 사용되는 방법

- 주로 페이퍼 프로토타이핑(paper prototyping) 기법을 사용

- 초기 아이디어 구현 단계에서, 사용자의 반응을 확인하고 사용자로 부터 요구사항을 빠르게 파악하기 위한 목적

고수준 프로토타이핑(High-fidelity prototyping)

- 디자인의 시제품, 애플리케이션의 베타 버전 등의 최종 완성물과 동일한 프로토타입을 제작

- 제품, 시스템 전체 기능과 서비스, 디자인 평가 보다는 발견하지 못한 작은 문제점을 수정하기 위한 목적

수평적 프로토타이핑(Horizontal prototyping)

- 다양한 기능을 반영하여 최종 제품서비스를 전반적으로 예상해 볼 수 있음.

- 세부적인 상세한 기능 정보 설계가 아닌 인터페이스의 표층만을 사용하기 때문에, 프로토타입의 크기가 작고 메뉴의 하위에 대한 작업은 진행되지 않은 상태의 프로토타이핑

수직적 프로토타이핑(Vertical prototyping)

- 제품과 시스템의 많은 기능 중, 주요 기능만을 선별해 세부 기능까지 상세하게 구현하는 방법

- 인터페이스의 몇 가지 경로만 완전히 실행되게 만들고 나머지 경로는 포함되지 않음

- 주요 기능 메뉴의 모든 하위 동작이 실행되기 때문에 사용자가 실제로 사용할 수 있도록 제작함.

- 프로토타이핑의 과정(5단계)

1단계 : 사용자 요구사항 분석

2단계 : 프로토타입 설계/스케치

3단계 : 프로토타입 개발

4단계 : 사용자 평가(수정/보완 반복)

5단계 : 프로토타입 정제


학습정리

UX 기획 및 디자인 전략 기초

 - UX 목표 : 사용자를 위한 디자인

 - UX Design은 사용자를 이해하는 '방법론'이다.

 - UX의 핵심은 '사용자에게 어떤 가치를 제공할까'를 고민하는 '가치중심적 사고'를 기반으로 제품서비스를 디자인/설계한다.

UX 컨셉 도출과 디자인프로세스의 이해

 - 컨셉 모델(Concept Model) : 아이디어와 기획을 시각화하는 작업

 - UX기획 및 디자인프로세스의 이해

 - 비즈니스 전략 → UX 리서치와 디자인전략 수립 → UX디자인 컨셉 → UX 디자인 수행

프로토타이핑

 - 개발 주기의 단축 과 사용자의 요구사항을 정확히 파악해 사용성의 만족도를 향상시킬 수 있다.

 - 프로토타이핑 유형 : 고/저수준 프로토타이핑, 수평/수직적 프로토타이핑


11강 UI 스토리보드 작성과 UI 상세설계 가이드


1. UI 스토리보드의 정의와 목적

- 스토리보드(Storyboard)의 이해

Storyboard란, UX구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험을 미리 보기 위한 방법론이다.

- UI 스토리보드의 목적

모바일앱에 필요한 기능 조각들 간 관계의 설계

- 앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립하는 과정

- 실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정


2. UI 스토리보드의 구성요소

- 스토리보드(Storyboard)의 활용

UX 스토리보드의 작성 프로세스

- 사용자 시나리오를 시각화하면서 평가하는 과정을 거친다

- 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다.

- 개발자와 사용자 간의 피드백을 받으면 스토리보드를 재정비할 수 있다

UX Concept → 기능 → 순서 → 관계 → 구조 → 설계 → 연결 → 검증 → 디자인 개발         

- UI 스토리보드 작성 프로세스

UX 스토리보드의 구성요소

- Feature list : UX concept/UX Needs의 구현에 필요한 기능 리스트

- User Task-flow : 해당 기능수행과 사용자의 행위 매핑 및 흐름도

- Information Architecture(IA) : 정보의 구조화와 위계관계망(우선순위)

- Wireframe : 해당기능 구현을 위한 인터페이스 요소의 배치와 화면 구조

- Workflow : 여러 개의 와이어프레임 또는 개별 기능 간 화면 전환 흐름도


3. UI 상세 화면 설계(Skeleton) 방법론

UI 상세 화면 설계 프로세스

Feature List → Task Flow → Process Diagram → IA → Wire-frame → Work-flow

UI feature 리스트 작성 단계

- UI 구현에 수반되는 앱시스템, 서비스, 장치 등 인터페이스 Feature 목록 나열하고 앱 개발에 필요한 기능들을 추출하고 우선순위를 정의하는 단계

→ 사용자의 니즈를 충족시키기 위한 앱의 기능들을 나열한다.

→ 우선순위 설정 방법에 따라 기술된 기능의 우선순위를 정한다.

→ 기능간의 포함관계를 고려하여 삭제 및 추가한다.

→ 정의된 기능들에 대해 우선순위를 설정한다. 

User Task-Flow 작성 단계

- 기능수행을 위한 사용자의 행위 순서(흐름)로 나열하고 검증하는 단계

(각 페이지마다 가지고 있는 기능을 그리면 된다)

Process Diagram 작성 단계

- 각 기능들 사이 관계(조건과 실행)를 정립하여 구조화하는 단계

(각 페이지들과의 관계를 Yes/No로 프로세스 흐름대로 표시한다.)

IA(Information Architecture) 구조화 단계

- 각 기능들을 정보의 위계와 관계망으로 구조화하기

(기업 조직도처럼 기능별로 조직도를 그린다)

Wireframe 설계 단계

- 해당기능 구현을 위한 인터페이스와 실제 화면에 그려보기

(각 화면을 그림으로 그려보는 것이다.)

Workflow 설계 단계

- 화면전환 및 화면 간 상호작용 및 시뮬레이션 해보기

(Wireframe으로 만들어낸 설계를 화면전화이 발생시 어떤 기능을 가지는지 작성하는 것이다.)


학습정리

UI 스토리보드의 정의와 목적

 - UX구현에 수반되는 사용자와 테스크, 인터페이스 간 상호작용을 시각화하여,

 - 개발자/디자이너와의 의사소통을 돕는 도구이자

 - 완성해야 할 앱서비스와 예상되는 사용자경험을 미리 보기 위한 방법론이다.

UI 스토리보드의 구성요소

 - 스토리보드는 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다.

 - UX 스토리보드의 구성요소 :

    Feature list, User Task-flow, Information Architecture(IA), Workflow

UI 상세 화면 설계(Skeleton) 방법론

 - UI 상세 화면 설계 프로세스

    1) UI feature 리스트 작성 단계

    2) User Task-Flow 작성 단계

    3) Process Diagram 작성 단계

    4) IA(Information Architecture) 구조화 단계

    5) Wireframe 설계 단계

    6) Workflow 설계 단계


12강 UI 디자인 패턴과 UI 가이드문서 작성


1. UI 디자인 패턴과 적용 가이드

- 접근성과 항해성 관련 UI 패턴

사용자가 인터페이스를 사용하면서 경헝하게 되는 기능 및 이벤트/컨텐츠의 방위(orientation)와 경로(path)의 인지와 탐색을 위한 UI 패턴

- Side Menu(drawer)

- Action Bar(Android)

- Dropdown Navigation

- Dash board

- Pop-over Navigation

- Side Menu(drawer)

- 메뉴(이벤트) 호출/컨텍스트 유지

- 여러 가지 기능을 화면 내 배치하지 않고, 좌우 Side Menu로 숨겨진 공간에 배치하여 화면 내 구성요소 단순화

- 장점 : 화면 내 공간 효율성 각 기능 간 context 분리가 명확

- 단점 : 다른 기능 수행 시 현재 화면 유지가 어려움

- Action Bar(Android)

- 접근성 향상

- 전체 페이지 내 공통된 2~3개의 기능을 항상 제공하면서 접근이 자주 있는 기능의 배치

- 장점 : 모든 페이지에서 일관되게 제공되는 형태를 통해 주요기능에 대한 접근성 확보/공간 효율

- 단점 : 상단 바에 너무 많은 기능이 제시되면 혼잡도 증가

- Dropdown Navigation

- 접근성/공간 절약

- 메뉴들을 숨겼다가 펼쳐서 해당 메뉴 선택하여 이동하는 경우, 세부 카테고리가 위에서 아래로 펼쳐지는 구조

- 장점 : 각 기능/메뉴 간 전환이 쉽고 빠름. 3D 효과와 함께 제시함으로써 시각적으로 쉽게 인지 가능

- 단점 : 각 기능간 타이틀 바를 표시하므로 공간 활용 비효율적, 3D 효과로 인해 인지적 부담 유발 가능

- Dash board

- 카테고리 커스텀

- 사용자 관련 데이터를 가공하고 개인화하여 보여줄 때, 복수의 기능 카테고리를 한 페이지 안에 표시

- 장점 : 주로 아이콘과 함께 표시되어 어떤 컨텐츠를 담고 있는지 직관적으로 확인할 수 있음

- 단점 : Dash Board 내 제시 가능한 카테고리 개수가 제한적임(스크롤로 보완 가능)

- Pop-over Navigation

- navi-컨텍스트 유지

- 메뉴 개수가 4~5 이상이고 페이지간 전환시 Navi-context유지(머물러 있는)가 필요할 때, 버튼을 눌렀을 때 메뉴나 기능이 화면 위에 오버레이(overlay) 형태로 표시

- 장점 : 화면 위에 이동 가능한 메뉴나 접근 가능한 기능들을 제시 가능

- 단점 : 메뉴 제공 시 화면의 일부를 덮을 수 있음

- 학습성 관련 UI 패턴

처음 사용자, 또는 초급 사용자를 위해 시각적 언어와 익숙한 사용성을 제공하여 학습성을 높이기 위한 UI 패턴

- Guide Text

- Coach Mark

- Guide Text

- 데이터 입력 방식의 학습성

- 사용자가 처음 페이지에 진입하여 데이터가 없을 때, 또는 데이터 입력 필드에서 해당 필드 내 입력될 데이터를 텍스트로 안내

- 장점 : 해당 영역에서 필요한 설명을 그 안에서 설명해주므로 직관적이고, 사용자의 행동을 유도할 수 있음

- 단점 : 텍스트 양이 너무 많아질 경우 화면이 복잡해질 수 있음

- Coach Mark

- 학습성/특정 피쳐

- 앱 실행 후 처음 접하는 기능과 인터렉션 등을 좀더 자세히 페이지 상에서 설명

- 장점 : 직접 인터랙션을 따라 하게 유도할 수도 있음

- 단점 : 모든 사용자에게 제공하여 번거로울 수 있음

- 공간 효율성 관련 UI 패턴

단위화면(기능) 구조의 컴포넌트화를 통해 접근성을 높이고 최대한 화면 공간 구성의 효율성을 확보

- Compose Screens

- Contextual Hovering Menu

- Card UI

- Compose Screens

- 접근성/멀티 이벤트

- 메시지를 작성하는 화면으로 키보드 상단에 수행 가능한 액션들을 제공하여 추가 기능에 대한 접근성을 높임

- 장점 : 텍스트 입력 외에 추가적인 기능도 페이지 전환 없이 바로 수행이 가능하고, 추가 기능을 강조할 수 있음

- 단점 : 화면의 절반을 차지하는 키보드 위에 추가로 1줄을 더 차지하므로 공간 활용이 비효율적.

- Contextual Hovering Menu

- 접근성/멀티 이벤트

- 모든 페이지에서 수시로 접근해야 하는 기능이 있을 경우, 화면 낸 상시로 떠있는 형태의 메뉴 아이콘 제공

- 장점 : 수시로 접근해야 하는 기능을 할당하여 모든 페이지에서 접근성을 높임

- 단점 : 화면 내 항상 일부 영역을 차지하므로, 해당 영역에 이미지나 주요 정보를 가릴 수 있음

- Card UI

- 유연한 레이아웃

- 다양한 컨텐츠를 카드 형태로 나열하여 보여줌

- 장점 : 컨텐츠의 개수가 늘어나도 정렬/그룹/확장 등을 통해 레이아웃을 유동적으로 대응할 수 있음

- 단점 : 텍스트가 위주인 컨텐츠에는 적당하지 않음


2. OS 별 앱 UI 구조와 특성

- iOS : Human Interface Guideline

컨텐츠 중심(Defer to content)

- 사용자가 컨텐츠를 이해하고 상호작용 하는 것을 도와줘야 하는 반면, 컨텐츠에 집중하지 못하도록 방해해서는 안된다.

- 전체 화면을 최대한 활용

- 각종 UI 요소는 최대한 절제, 사용자가 컨텐츠에 집중할 수 있도록 함

- 반투명 컨텐츠 레이어 뒤에 현재 작업의 힌트를 제공해서 문맥(context) 유지

시각적 명료성(Provide Clarity)

- 글꼴은 읽기 쉽게, 아이콘은 이해하기 쉽게, 장식적인 요소는 절제

- 여백을 적극적으로 활용

- 색 사용을 절제하여 컨텐츠 강조, 키 컬러를 통해 주요 기능 강조

- 자동으로 자간, 행간을 조정하는 시스템 폰트 활용

정보와 시각의 계층 구조 활용(Depth for Communication)

- 상호작용을 위한 정보와 시각의 계층 구조 활용, 눈으로 보여지는 요소들은 층 구성(layered)으로 이루어져 사용자의 이해를 돕고 재미를 추가한다.

- 정보를 별도 레이어로 표시하여 작업 문맥(context) 유지

- 상위 레이어를 통해 폴더를 표현하고 폴더 내 컨텐츠와 스크린을 분리

- 카테고리 구분을 레이어 형태로 표현

- Android : Human Interface Guideline

사용자를 매혹하기(Enchat Me)

- 애니메이션, 사운드 효과 등을 통해 사용자를 자극하거나 사용자가 좀 더 원하는 기능을 맞춤 기능으로 제공

- 표면의 미적 요소나 애니메이션, 사운드 효과를 통해 사용자를 자극

- 사용자가 직접 터치하고 조작할 수 있는 형태의 버튼을 제공

- 주요 기능을 저해하지 않는 범위 내에서 맞춤 기능 제공

- 사용자가 매번 선택하도록 요구하기보다, 이전 선택을 기반으로쉽게 접근하도록 제시

사용자 생활을 단순하게 만들기(Simplify My Life)

- 텍스트보다는 사진으로 정보를 전달하고, 너무 복잡한 기능은 뒤에 숨겨두어 앱 사용 방식을 단순화

- 가능한 간단한 단어로 이루어진 짧은 문구를 사용

- 기능을 시각적으로 단순하게 만들기보다 눈에 띄게 만들어서 기능적 차이를 알아볼 수 있게 하고, 같은 방식으로 작동하도록 제공 

- 현재 필요하지 않은 옵션은 숨기고 작업 진행 상황에 맞게 옵션을 표시

- 정말 중요한 태스크를 제외하고는 작업을 중단하는 일은 최소화

사용자를 놀라게 만들기(Make Me Amazing)

- 복잡한 태스크를 쉽게 완료할 수 있도록 세분화하고 명료한 피드백을 제공하거나, 복잡한 기능을 손쉽게 활용할 수 있도록 간편한 방법으로 제공

- 사용자가 자기 탓으로 느끼지 않도록 명확한 복구 지침을 제공

- 복잡한 태스크를 쉽게 완료할 수 있도록 여러 단계로 나누고, 미묘한 피드백이라도 제공

- 초보자들이 하기 힘든 기능은 단축키와 같이 쉽게 접근할 수 있는 형태로 제공

- 화면 내 중요한 기능을 쉽게 찾고 수행할 수 있도록 제공


3. UI 설계 문서의 작성 방법론

- UX/UI 개발 프로세스의 이해

UX/UI 기획 → UI 설계문서 → GUI 디자인 → GUI 가이드라인 → Coding 개발

- UX/UI 기획의 주요 산출물

사용자요구 분석( User Need Analysis)

사용자분석 리서치 → 페르소나 작성 → 사용성 테스트

정보/컨텐츠 개발전략 문서(Contents Strategy)

벤치마킹 → 컨셉모델 → (정보)컨텐츠 인벤토리/IA 문서

- UI 설계문서(UI document)

UI 설계문서의 개념과 목적

- UX 기획 설계를 토대로 해당 프로젝트의 실물 개발에 필요한 이미지 리소스, 텍스트 크기, 기타 컴포넌트의 속성 및 위치 등 UI 개발을 위한 일종의 설계도면과 같다

- 디자인을 개발하기 위한 설명서, 즉 개발자와 디자인 실무자를 연결해주는 일종의 협업 도구이기 때문에 개발자가 쉽고 원활히 알아볼 수 있도록 문서를 작성하는 것이 중요하다.

UI 설계문서의 구조와구성요소

- 프로젝트 정의/목적, 기본 규칙(Basic Rule), 세부 화면 정의, 수정보완 업데이트 히스토리 등

- 주요 내용 : 태스크 플로우차트, 와이어프레임, IA, 키스크린, 스토리보드 등


학습정리

UI 디자인 패턴과 적용 가이드

 - 접근성과 항해성 관련 UI 패턴

 - 학습성 관련 UI 패턴

 - 공간 효율성 관련 UI 패턴

OS 별 앱 UI 구조와 특성

 - iOS : 컨텐츠 중심, 시각적 명료성, 정보와 시각의 계층 구조

 - Android : 사용자를 매혹하기, 단순하게 만들기, 사용자를 놀라게 만들기

UI 설계 문서의 작성 방법론

 - UX/UI 기획의 주요 산출물 : 사용자 요구분석, 정보/컨텐츠 개발전략 문서, UI 설계문서

 - UI 설계문서는 UX기획을 토대로 해당 프로젝트의 실물 개발에 위한 일종의 설계도면과 같다.




'Legend 개발자 > T아카데미' 카테고리의 다른 글

Spring Framework  (0) 2017.09.07
모바일 GUI 디자인  (0) 2017.09.05
jQuery (JavaScript)  (0) 2017.09.02
컴퓨터 알고리즘 중급  (0) 2017.08.31
JavaScript  (0) 2017.08.30
Posted by 전설의아이
|

Project

Project 2017. 9. 3. 16:12

1. 일정

날짜

주제

해야할 일 

9월4일(월)~ 9월 14일(목) 

1차 자료수집 

아이콘, 폰트, 이용약관,  아이템 선정, 로그인 양식

9월 15일(금)

아이템 선정 

  

9월 18일(월) ~ 9월 29(금)

2차 자료수집

관련 아이템 위주 자료 수집 

10월 10일(화) or 11일(수)

발표작 선정 

 수집된 아이템 중에 발표작 선정 

10월 11일(수) ~ 10월 19일(목)

3차 자료수집

데이터베이스 위주 자료 수집 

10월 11일(수) ~ 10월 13일(금)

front단 base 코딩

 HTML5, CSS 코딩 

10월 16일(월) ~ 10월 19일(목)

front단 UI/UX 작업

홈페이지 1차 완료

10월 11일(수) ~ 10월 13일(금)

back단 DB 설계

개념, 논리 데이터베이스 구축

10월 16일(월) ~ 10월 19일(목)

back단 DB 코딩

물리 데이터베이스 구축

10월 20일(금) 

중간점검 

 중간점검 

10월 23일(월) ~ 10월 27일(금)

JSP 코딩

MVC모델 도입, 홈페이지 최종완료, DB연결

10월 30일(월) ~ 11월 2일(목)

발표준비

PPT/Frezi 발표자

11월 3일(금)

최종점검 

 최종점검 

[붉은 색으로 칠한 4일은 꼭 볼수있으면 봐요]


2. 개발환경

Language : HTML5, CSS3, Java, JavaScript, jQuery, Node.js, json

DB : MYsql, SQL Developer, 

IDE : Eclipse, Aptana, PowerPoint, Android Studio

Library : Maven Repository, 

WAS Server : Apache Tomcat

Operating System : Window 10

[개발환경 관련 아이콘 다 받으면 발표PPT 만들 때 도움 될 듯]


3. 방향

- 웹 위주로 만들 것 

px size

컴퓨터 : min-width : 1025px

태블릿 : min-width : 768px ~ max-width : 1024px

핸드폰 : max-width : 767px  

- 아이콘 design.google.com/icons/ 내에서 뽑아서 사용

- 컬러 

1. Adobe Capture CC를 통해서 색을 뽑아 배색 작업을 진행한다.

2. https://www.google.com/design/spec/style/color.html 에 들어가서 아래의 머티리얼 컬러 계획을 통해 진행한다.

 머티리얼 컬러 계획 : 자신의 프로젝트에 적합한 컬러를 선택하거나, 만약 선택하지 못했다면 제공되는 컬러 내에서 컬러를 선택하는 것도 추천한다. 컬러는 메인 컬러(500)로 1개 선택 후, 2개의 메인의 서브 컬러 (예에서는 (700), (800)) 선택, 2팔레트에서 1개의 엑센트 컬러를 선택하면 된다.

- 폰트 

Noto Sans CJK KR 폰트를 활용한다. (Google에서 만든 머티리얼 디자인 한글 폰트)

- 디자인 스타일 가이드

GRID (Landing Page, Portal)

COLOR PALETTE (#000000~#FFFFFF)

TYPOGRAPHY (Headers, Body)

FORMS (Empty, Selected, Typing, Select, Error, Success)

BUTTONS

AVATARS (Big / Middle / Small Size)

ICONS (Landing Page, Portal, Artists/Albums/Activity, Rank, Voting, Social Media)

UI ELEMENTS (Calendar, Slider/Tooltips, Pag nator, Tag-Tooltip,Drop Down Menu, Read more, Move/Hide)

ALERT/ERROR MESSAGES(Info파랑, Warning노랑, Error빨강, Success녹색)

LOGIN


- 크라우드 펀딩 : https://tumblbug.com/ (텀블벅)

- 사람들이 원하는 제품이 있으면 대량으로 구입을 해서 나누어주는 사이트 구매자들에게만 제공되는 암호키를 통해 물건 전달 집근처에서 가까운 편의점 또는 주유소 등에 사물함을 설치해 구매자들의 물품을 보관한다?


4. Good Qusetion

About UX/UI

- 이와 비슷한 웹이 있는지? 해당 웹을 사용하고 있는 사용자 경험은?

- 다른 웹과의 차별성은 무엇인지?


About GUI

- 컬러, 타이포그래피, 레이아웃은 어떠한가?


About Technology

- 어떤 개발언어를 사용할 것인가?


5. 참조 

design.google.com/icons/ 


6.이걸 따라해서 양식좀바꿔서 위 일정 끼워넣기

 

Posted by 전설의아이
|

티스토리툴바