기획/프로젝트툴 분석

|  놀이터라 생각하고 마음껏 떠들어요! ^^


네이버 디자인 스튜디오 UI요소

 

디자인 스튜디오에서 UI요소는 이미지, 선, 텍스트 등 시각적으로 보이는 것을 의미합니다. 예를 들어 네이버 로그인 메뉴에서  UI요소는 텍스트, 아이디와 비밀번호 입력하는 텍스트 필드, 로그인 버튼입니다. 이번 시간은 UI요소는 어떤 게 있는지 알아 볼까 합니다.

 

UI요소

 

디자인 스튜디오에서 요소는 크게 UI요소와 기능요소 2가지로 구분됩니다. 그 중에 UI요소는 <화면설계> 탭의 리본 메뉴를 클릭하면 디자인스튜디오에서 사용 가능한  UI 요소를 확인할 수 있습니다. 22가지의 요소를 이용하여 화면설계서를 작성할 수 있습니다.

 

                             1.jpg

 

UI요소 특징

UI요소 중 디자인스튜디오에서 자주 사용하는 요소들 입니다.  화면설계서 작성시 자주 사용하는 요소 위주로 특징을 살펴볼까 합니다.         

 

1. 텍스트(TEXT)                                                              

     2.jpg

 

카테고리 및 제목 등 화면에 텍스트를 배치할 때 사용합니다.

텍스트 전체 또는 일부만 선택해 서식을 지정이 가능합니다.

 

4.jpg

 

 

   

2. 텍스트 입력란(Text Field)                                           

      1.jpg

 

검색창에 검색어 입력등과 같은 사용자로부터 텍스트를 입력받을때 사용합니다. 줄바꿈을 할 수 없습니다.

 

2.jpg

 

 

 

 

 

3. 버튼(button)                                                              

     5.jpg

 

저장버튼, 확인버튼 등 화면에서 버튼으로 구성된 UI요소를 배치할 때 사용합니다.

 

6.jpg

 

 

 

 

 

5. 라디오 버튼(Radio button)                                        

      1.jpg

 

 

여러 항목 중 하나만 선택해야 할 때 사용합니다.

 

5.jpg

 

 

   

6. 탭 메뉴(tab menu)                                                     

     3.jpg

 

같은 영역 안에서 선택한 탭에 따라 내용이 바뀌는 탭 메뉴를 만들 때 사용합니다.

 

4.jpg

 

 

 

 

 

 

    

7. 목록상자(List box)                                                       

     1.jpg

 

여러 항목을 펼침 목록으로 볼 수 있는 목록 상자를 만들 때 사용합니다.

 

3.jpg

 

 

    
4. 텍스트영역(Text Area)                                               
     2.jpg

 

댓글 입력란이나 게시판 글쓰기 영역과 같이 줄바꿈이 있는 긴 내용을 입력받을 때 사용합니다.

 

4.jpg

 

 

     

파워포인트 파일에서 요소를 설명할 때는 화면 요소마다 번호를 매기고 별도 공간에 설명을 붙이지만 디자인 스튜디오에서는 화면에 요소를 삽입하며 자동으로 요소에 대한 설명도 동시에 확인할 수 있게 도와줍니다.

요소의 특징별로 사용하는 부분이 다르기 때문에 정확한 목적에 맞는 요소를 사용하시길 바랍니다.