웹시트(WebSheet)

안녕하세요. 웹시트 관리자 입니다.

간단하게 문의하고 싶으신 내용이 있다면 아래 댓글을 남겨주시면 저희가 확인하여 답변 드리도록 하겠습니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

이번글은 노리고 웹시트에서 제공되는 반응형에 대해서 입니다.

반응형이란 PC보는 화면을 테블릿이나 모바일등 화면 사이즈가 다른 경우에도 사이즈에 맞게 조정되어 보여지는 기능을 말합니다.

현재 노리고 웹시트의 경우에는 기능들이 다양하다보면 화면이 작은 모바일화면에서는 약간에 불편함이 있지만

기본적으로 적은 모바일 화면에서 이런 복작한 기능을 사용하지 않을 것이라 생각합니다.

하지만 적은 모바일 화면에서도 실제 기능은 모두 이용 가능하도록 구성 되어 있습니다.

위 이미지는 캘럭시 S10에서 보는 화면을 캡쳐한 것입니다.

조회 항목 부분이 조금 보기 불편하겠지만 나머지 기능 사용에는 전혀 불편함이 없습니다.

어느정도 사이즈가 있는 테블릿 화면은 모두 사용하는데 지장이 없습니다.

물론 각 업체의 요청에 따라 조장은 가능합니다.

이점 참고 부탁드립니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

이번 글에 이야기드릴 기능은 개인화 입니다.

개인화 란?

개인화 기능은 생각보다 모르고 있으신 분들이 많이 있으신거 같습니다.

저희 웹시트의 경우 엑셀과 형태가 비슷한 형태를 띄고 있습니다.

위 이미지의 붉은색 테두리 부분을 헤더라고 표현하고 있는데요.

이 헤더의 항목을 접속한 사용자마다 다르게 보고 싶은 경우들이 있습니다.

접속한 사용자마다 특정 헤더 항목을 숨긴다거나 좀 더 길게 표현한다거나 조정을 한 후에 현재 상태를 저장해놓고 이후 해당 메뉴로 돌아오게되면 설정 후 저장 형태로 표현되는 걸 저희는 개인화라고 표현하고 있습니다.

헤더 이동 및 숨김

특정 헤더 항목을 클릭 한 상태에서 이동해보겠습니다.(마우스 드레그)

저는  '언어팩 값' 항목을 선택 후 이동해보겠습니다.

등록일 뒷쪽으로 마우스를 이동하면 위 이미지처럼 등록일 항목 뒷부분에 화살표 표시가 나면서 해당 위치에 이동될 것처럼 미리 표시가 됩니다.

마우스 클릭을 놓면 해당 위치로 컬럼이 이동되는 걸 확인 하실 수 있습니다.

'등록자' 항목을 숨기기 위해서는 '등록자' 항목에 마우스 우클릭을 하면 위 이미지처럼 팝업이 열립니다.

팝업 메뉴중에 '컬럼 숨기기' 컬럼을 선택합니다.

해당 항목이 사라지는 걸 확인 하실수 있습니다.

해당 항목은 보이지 않도록 숨김 처리 한것 이므로 너무 걱정 하지 않으셔도 됩니다.

숨겨진 헤더를 다시 보이게 하기 위해서는 헤더 항목중 아무곳에서 마우스 우클릭을 하면 팝업이 열립니다.

팝업에서 컬럼 숨기기 취소 버튼을 클릭하면 숨김 헤더를 다시보이게 설정 할 수 있습니다.

위 이미지처럼 숨겨진 헤더가 다시 보여지는 걸 확인 하실수 있습니다.

헤더 크기 조정

마우스 포인터를 위 이미지의 붉은색 테두리 위치로 이동하면 마우스 포인터의 모양이 바뀌는걸 확인 할 수 있는데요.

마우스 좌클릭 후 이동(드래그) 마우스 좌클릭을 놓게 되면 해당하는 위치까지 '등록자' 컬럼이 커지는걸 확인 할 수 있습니다.

개인화 저장

헤더를 이동하거나 숨김 또는 헤더 사이즈를 조정 한 후에 이 설정을 이후에도 계속 동일하게 유지하기 위해서는 개인화 저장을 하셔야 합니다

헤더 아무 항목에서 마우스 우클릭을 하면 위 이미지처럼 팝업이 열리는데요.

팝업에서 개인화 저장을 하게되면 이후에 해당 메뉴로 이동하면 마지막에 설정한 형태를 계속 유지하게 됩니다.

개인화 삭제 기능도 있는데요. 이건 최초 개발되었을때 형태로 돌아가는 것입니다.

이후 다시 원하는 형태로 설정 후 개인화 저장으로 다시 설정 할 수 있습니다.

개인화 팝업

각 헤더에 우클릭을 하지 않고도 설정 할 수 있는 방법 있습니다.

각 화면에 오른족 상다에 사람 모양의 아이콘이 존재 합니다.

해당 버튼을 클릭해보겠습니다.

위 이미지처럼 팝업이 하나 열리는데요.

이곳에서 컬럼의 넓이 숨김 여부 틀고정, 순서들을 설정 한번에 설정 할 수 있습니다

이후 아래 저장 버튼을 클릭하면 저장이 됩니다.

초기화는 개발당시 최초 형태로 돌리는 것입니다.

적용 버튼은 단순히 저장과는 관계없이 설정 형태로 보여지도록 설정만 해줍니다.

헤더 항목이 별로 없다면 크게 사용 할 일이 없지만 헤더가 많다거나 사용자별로 보여줘야 하는 형태가 다른 경우에 많이 사용되어 지는 기능입니다.

저희 노리고 웹시트에서는 각 화면에 기본적으로 제공되어 지는 기능으로 필요시 모든 화면에 적용 가능합니다.

이상 개인화 설명을 마치도록 하겠습니다.

감사합니다.

안낭하세요. 웹시트 관리자 입니다.

저희 웹시트가 엑셀처럼 입력이 간편하다고 강조 하고 있는데요.

이번 글에서는 그리드 편집 기능에 대하여 설명하면서 얼마나 엑셀과 입력 방식이 비슷한지 알아보셨으면 합니다.

위 화면은 각 기업에서 이해를 돕기 위해서 데모사이트에 구현된 제품 관리 화면입니다.

해당 화면에서 데이터 부분을 보시면 노란색 배경색으로 이루어진 셀이 있고 그렇지 않은 셀이 있는데요.

노란색 배경부분이 수정가능한 셀이고 그 나머지는 수정 불가능한 셀입니다.

* 수정

한 셀을 선택해서 엔터를 누르시거나 마우스 더블 클릭을 해보시면 수정 화면이 뜨게 됩니다.

엑셀을 아시는 분이라면 누구나 어떤 상황인지 이해하실수 있을겁니다.

해당 셀을 수정하기 위한 상태입니다.

해당 상태에서 내용을 입력하고 마우스로 다른 위치에 셀을 클릭해보세요

수정을 한 후에는 왼쪽에 수정을 했다는 표시의 아이콘이 표현되고 오른쪽 수정한 부분에 수정된 내용이 표현됩니다.

사용자 입력이 엑셀과 비슷하다는 걸 아실수 있습니다. 물론 셀을 선택하고 바로 입력하더라도 같은 결과를 보실수 있습니다.

* 추가

우측 상단에 (+) 버튼을 클릭하면 아래쪽에 빈행을 확인 하실수 있습니다.

해당 데이터 왼쪽에는 + 아이콘이 표현되어 행이 추가 되었음을 확인 하실 수 있습니다.

행이 추가되면 편집방법을 이용하여 내용을 편집하여 저장 하실수 있습니다.

* 삭제

왼쪽의 이미지 처럼 삭제하고자 하는 대상을 체크박스에 체크 처리합니다.

이후 (-) 버튼을 클릭하면 아래 X표시가 되는데요. 삭제를 할 대상으로 표시됩니다.

이후 저장 버튼을 이용하여 저장을 하면 최종 삭제 처리 됩니다.

* 복사 붙여 넣기

위 이미지 처럼 복사할 대상을 마우스 클릭 후 이용하여 블록을 설정한 후 컨트롤 + C 키입력을 하여 내용을 복사합니다.

붙여넣기 할 위치에 셀위치를 옮기고 컨트롤 + V 키를 입력하여 붙여넣기를 합니다.

보시는 것과 같이 엑셀에서 데이터를 복사하여 다른 위치에 붙여넣기를 아무 간편하게 하실 수 있습니다.

데이터 왼쪽부분에 수정 한 행에 대하여 표시가 되어 수정했는지 여부를 바로 확인 하실 수 있습니다.

* 엑셀 복사 붙여 넣기

엑셀에서 복사 할 내용을 컨트롤 + C를 이용하여 복사합니다.

그리드에 붙여넣기 할 셀을 선택 후 컨트롤 + V를 이용하여 붙여넣기합니다.

위 이미지처럼 간단하게 엑셀에 있는 내용을 복사 붙여넣기 할 수 있습니다.

반대로 그리드에 있는 내용을 복사하여 엑셀에 붙여도기 또한 가능하여 그리드내용을 엑셀로 가져와

작업 한 후 다시 그리드로 복사붙여넣기하는 등의 응용이 가능합니다.

보기에는 별거 아닌거 같지만 게시판 형태로 된 등록 화면과 비교한다면 정말 편하게 작업이 가능하고 프로그래밍된 화면이여서 데이터 정합성에도 효율적입니다.

한번 여러분도 테스트 해보십시요.

테스트 URL은 왼쪽 상단에 링크가 있으니 참고 부탁드립니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

이번 글에서는 프로필 화면에 대하여 설명드리겠습니다.

프로필 화면은 로그인한 유저의 개인 정보 및 즐겨찾기 정보를 수정 할수 있는 화면입니다.

프로필 화면에서는 일반, 암호 즐겨찾기 이렇게 3가지 탭 메뉴를 제공하고 있습니다.

일반 탭의 경우 유저 정보를 확인 및 수정 가능합니다.

기본적으로 이름이나 이메일 같은 항목을 제공하지만 업체별로 요청되는 항목을 추가 시켜 드릴 수 있습니다.

암호 탭에서는 로그인 사용자의 비밀번호를 변경 하실 수 있습니다.

즐겨찾기 탭은 기존에 설명드린 즐겨찾기 기능과 관련이 있는데요.

이곳에서 조회 및 삭제, 순서 조정을 할 수 있습니다.

프로필 화면에 필요로 하는 기능은 얼마든지 추가가 가능합니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

지난 글은 그리드 자체 기능에 대하여 설명을 드렸는데요.

이번 글은 그리드와 연계되어 작동하는 버튼들에 대하여 설명 드리겠습니다.

위 이미지 중 붉은색 박스 부분을 보시면 버튼들이 보이는 데요.

각종 버튼들과 각 업체별 필요로 하는 버튼을이 추가될 화면 들입니다.

이번글은 기본적으로 제공되는 버튼들만 설명드릴 것입니다.

왼쪽부터 차례대로 간단하게 설명드리겠습니다.

1. 조회 : 조회버튼은 클린시 데이터를 조회가 되고 그리드에 표현됩니다.

               조회 버튼 왼쪽 부분에 조회 조건이 표현되는데 조건은 사용하여 필요한 정보를 조회 하 실 수 있습니다.

2. 추가(+) : 추가 버튼은 클릭 시 그리드에 행이 하나 추가되면서 필요한 정보를 추가로 등록 하실수 있습니다.

                   이때 중요한건은 추가버튼을 클릭해서 데이터를 입력했다면 반듯이 저장 버튼을 클릭 하여 저장을 

                   하셔야 합니다.

3. 삭제(-) : 삭제 버튼은 클릭 시 그리드에 선택된 데이터가 삭제 대상으로 표시하게 되고 저장 시 해당 데이터가 삭제

                  됩니다.

                   이때 중요한 것은 삭제 대상 데이터의 왼쪽 부분에 체크 박스를 클릭하고 삭제 버튼을 클릭하셔야 삭제

                   대상이 됩니다.

4. 저장 : 삭제 버튼은 클릭 시 수정한 정보, 추가, 삭제 대상을 모두 한번에 저장합니다.

              그리드 왼쪽에 수정, 추가, 삭제 대상을 아이콘으로 표현이 됩니다. 

5. 엑셀 다운로드 : 다운로드 버튼 클릭 시 그리드에 조회된 데이터가 엑셀파일 형태로 다운로드 됩니다.

6. 엑셀 업로드 : 업로드 버튼 클릭 시 그리드에 대상 데이터가 표현되고 저장 버튼 클릭 시 저장이 됩니다.

7. 개인화 : 개인화 버튼 클릭 시 그리드 상태를 설정하고 저장 할 수 있는 팝업이 뜹니다.

개인화 란?

  - 개인화는 그리드의 헤더의 순서, 가로 사이즈, 숨김여부 틀고정 여부의 정보를 각 유저별로 설정하여 저장하고 저장 후에는 개인화 적용한 화면은 다시 들어갔을때 내가 설정한 형태를 그대로 유지하여 보여주는 걸 말합니다.

위 개인화 팝업의 경우 넓이, 숨김 여부, 틀고정여부, 순서를 설정하고 저장 할 수 있습니다.

1. 초기화 : 초기화 버튼 클릭 시 개발자가 최초 세팅항 방식으로 되돌아 갑니다. 초기화 시 기존 개인화 정보는 삭제 됩니다.

2. 적용 : 적용 버튼 클릭 시 설정한 개인화를 현재 화면의 그리드에 적용합니다. 저장은 되지안기 때문에 1회성으로 처리 됩니다.

3. 저장 : 저장 버튼 클릭 시 설정한 개인화가 저장됩니다. 이후 해당 메뉴를 재방문 하여도 설정이 그대로 유지 됩니다.

4. 닫기 : 닫기 버튼 클릭 시 아무런 작업 없이 팝업이 닫힙니다.

지금까지 말씀 드린 기능들은 웹시트에서 기본적으로 제공되어지는 기능들로 업체별 특별한 기능은 얼마든지 추가 가능합니다.

단 중요한 것은 그리드 시스템의 틀을 변경하여 기존에 게시판 같은 형태로 만든다면 그리드에서 제공되어지는 모든 기능은 작동되지 않음을 알아주셨으면 합니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

웹시트는 기본적으로 엑셀과 비슷한 화면을 제공하고 있습니다.

저희는 이걸 Data Grid라고 부고 있습니다. 개발쪽 분양에서는 대부분 그렇게 부르고 있지요.

이 Data Grid와 Data Grid에 추가된 기능들에 대해서 이야기 드리겠습니다.

간단하게 Data Grid를 그리드라고 부르도록 하겠습니다.

기본적인 그리드는 위 이미지의 붉은 테두리 부분을 말합니다.

이곳에서 방향키나 입력, 수정등 엑셀과 비슷한 느낀으로 자유자제로 처리 가능합니다.

아쉽게도 엑셀과 비슷하다고 하여 수식, 서식 같은 기능은 포함되어 있지 않습니다.

하지만 그리드만에 다양한 기능들이 제공 됩니다.

1. 정렬 기능

해더의 이름 부분을 클릭하면 위 이미지와 같은 화살표가 표시되면서 조회한 데이터를 정렬 할수 있습니다.

2. 컬럼 이동

이동 하려는 컬럼을 클릭하여 끌어와 원하는 위치로 이동하면 헤더 위아래에 화살표가 표가 표시됩니다.

해당 화살표가 이동 될 위치를 표시해주시니 원하는 위치가 된다고 하면 마우스 클릭을 풀면 해당 위치로 컬럼이 이동 되는걸 아실수 있습니다.

3. 컬럼 숨기기 / 숨기기 취소, 개인화 저장, 개인화삭제

헤더를 우클릭하면 4가지 기능을 제공합니다.

- 컬럼 숨기기 : 선택 한 컬럼을 숨기는 역할을 합니다.

- 컬럼 숨기기 취소 : 숨긴 컬럼 모두를 다시 보이게 합니다.

- 개인화 저장 : 컬럼을 숨기거나 보이게, 컬럼 사이즈 조정, 컬럼 정렬등을 저장하고 이후에 해당 메뉴로 돌아 왔을때 그대로 유지되도록 저장 합니다.

- 개인화 삭제 : 저장해 놓은 값을 삭제하고 처음 시스템이 제공하던 형태로 변경합니다.

4. 그리드 최대화

붉은색 부분의 버튼을 클리하면 해당 그리드가 최대화가 되어 큰 화면에서 작업 하실수 있습니다.

그리드에서 제공하는 기본 기능들이 다양합니다.

추후에도 고객의 니즈를 받아 계속적으로 업데이트 할 예정입니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

웹시트에서는 회사마다의 로고나 문구를 조정 할 수 있도록 준비되어져 있습니다.

그럼 사이트 관리 화면에서 무엇을 어떻게 수정 할 수 있는지 알아보도록 하겠습니다.

사이트 관리 메뉴는 시스템 관리 > 화면 관리 > 사이트 관리 에 위치해 있습니다.

사이트 관리에는 크게 3가지 기능을 제공합니다.(계속 적으로 업데이트 예정입니다.)

① 이름 : 이름 항목은 메인 화면 왼쪽 상단에 보여지는 화면입니다. 변경 시 해당 위치의 문구를 변경 할 수 있습니다.

② 로고 : 로고 항목은 이미지를 등록 하게 되어 있습니다. 등록 된 이미지는 로그인 화면 상단에 로그가 변경됩니다.

③ 룰DATA : 룰DATA 여러가지를 설정 할 수 있도록 기능을 확장한 상태인데요. 현재는 로그인 후 최초 화면을 어디로 

                    할 지를 설정하는 기능이 있습니다.(추후 기능을 추가할 예정 입니다.)

                   * [JSON] 버튼을 클릭하면 팝업이 열립니다.

                   * 열린 팝업에서 FIRST_PAGE 항목에 특정 화면에 이동하면 주소창에 표신된 URL을 복사해서 넣습니다.

                      (주위 : URL을 넣을때 도메인은 빼고 넣어주셔야 합니다.)

                   * 저장 후 로그인 할때 지정한 화면으로 최초 접속이 됩니다.

이렇게 사이트 관리 메뉴에 대해서 이야기 해보았는데요.

고객분을의 니즈를 수령하여 추후에도 계속 적으로 업데이트가 이루어질것 참고해주십시요.

감사합니다.

안녕하세요 웹시트관리자입니다.

이번 글에서는 웹시트에서 제공하고 사용자 관리와 각 사용자별 메뉴 권한을 설정하는 부분에 대하여 이야기해보겠습니다.

[사용자 관리]

위 이미지 왼쪽에 보시면 사용자 관리 메뉴 위치를 보실 수 있습니다.

사용자 관리 화면으로 이동하면 컨텐트 부분에 그리드 화면이 보입니다.

각 사용자의 정보를 볼 수 있는데요. 데모 사이트에서는 참고용으로 항목을 만들어둔 것이고 각 업체별로 항목을 구성할 수 있도록 지원하여 드릴 것입니다.

기본적으로 제공된 기능들을 이용하여 조회/추가/삭제/저장 기능을 이용하실 수 있습니다.

사용자 권한 관리와 권한 그룹 관리는 사용자별 메뉴 권한을 관리하는 화면입니다.

사용자 권한 관리 화면은 각 사용자별 사용가능한 메뉴를 설정하는 화면입니다.

상단은 기본 회원 리스트를 보실 수 있습니다.

리스트 왼쪽에 보면 동그라미 모양을 클릭하면 해당 사용자를 선택하는 것입니다.

사용사 선택을 하면 하단에 유저별 메뉴 권한 화면에 메뉴 리스트가 보이는 걸 아실 수 있습니다.

왼쪽 표시는 현재 등록된 모든 화면을 의미합니다.

오른쪽은 메뉴보기, 읽기, 저장, 생성, 수정, 삭제 항목들이 있는데요.

메뉴보기는 왼쪽 메뉴리스트에 보일 것인지를 체크로 처리할 수 있습니다.

나머지 읽기, 저장, 생성, 수정, 삭제 기능들은 각 화면에 필요시 개발에 적용 가능하도록 구현되어 있고

기본적으로는 해당 기능은 구형되어 있지 않습니다.

유저별 메뉴권한 옆에 적용 그룹 그룹이라는 탭이 있는데요. 클릭해 보시면 아래와 같이 보이실 겁니다.

유저별 메뉴 권한에서는 선택 유저의 메뉴 권한을 하나하나 부여했다고 하면

적용 그룹은 기존에 그룹 별로 권한을 미리 설정해 둔 권한을 한 번에 부여할 수 있는 기능입니다.

하여 미리 그룹별 메뉴권한을 설정하고 새로운 사용자가 추가된다면 간편하게 권한을 줄 수 있습니다.

권한 추가 방법 : 비적용 그룹의 적용하고 싶은 그룹을 체크박스로 체크 후 [<] 버튼 클릭 후 저장을 누르면 적용

권한 제거 방법 : 적용 그룹에서 제거하고 싶은 그룹을 체크박으로 선택 후 [>] 버튼 클릭 후 저장을 누르면 적용

아래에는 그룹 권한 설정하는 방법 이야기 드리겠습니다.

권한 그룹 관리는 메뉴 권한을 미리 특정 이름으로 설정하여 권한을 세팅한 후 특정 유저에게 해당 권한을 모두 부여할 수 있도록 한 기능입니다.

그룹권한 마스터 그리드에 그룹을 추가/수정/삭제가 가능합니다.

특정 그룹명을 선택하면 하단 그룹권한별 - 메뉴권한 탭에 현재 등록된 메뉴 리스트와 각 설정된 권한이 보입니다.

이 부분에서 메뉴별 권한을 설정하고 저장하시면 해당 그룹에 권한을 주게 됩니다.

저장하고 화면을 새로고침을 하게 되면 바로 적용이 됩니다.

그룹권한소속 - 유저(IN) 탭은 현재 선택된 그룹에 소속시킬 유저를 설정할 수 있습니다.

오른쪽 그룹 권한 - 유저(OUT)에 선택 안된 유저를 여러 데이터를 선택해서 한 번에 그룹 소속으로 넣을 수 있고 반대로 여러 그룹에 소속된 유저를 뺄 수 있습니다.

해당 기능들을 타 시스템에서 사용해 보신 분들이라면 금방 이해하시겠지만 잘 이해를 못 하시는 분들은 데모 사이트에서 여러 번 테스트를 해보시면 이해를 해보시면 좋을 거 같습니다.

감사합니다.

안녕하세요. 웹시트 관리자 입니다.

웹시트에서는 기본적으로 제공하는  기능들이 있는데 그중에 메뉴를 즐겨찾기해서 해당 메뉴로 빠르게 이동할수 있는 기능을 제공 하고 있습니다.

그럼 해당 메뉴에 대해서 이야기 해보도록 하겠습니다.

이미지에서 보시는 것과 같이 화면 왼쪽 메뉴리스트중 즐겨찾기 메뉴가 있는데요.

이 메뉴는 다른 메뉴들 중에 내가 자주 사용하는 메뉴를 즐겨찾기하면 즐겨찾기 메뉴에 추가되며 빠르게 메뉴를 이동할수 있습니다.

각 메뉴에 이동하면 메뉴 이름 왼쪽에 별모양 아이콘이 있는데요. 해당 아이콘을 클릭하면 안쪽이 비어 있는 별에서 색이 채워진 별로 변경됩니다. 

새로 고침을 하면 즐겨찾기 메뉴에 추가된것을 확인 하실 수 있습니다.

즐겨찾기에서 메뉴를 제거하고 싶다면 다시 노란색 별 아이콘을 클릭하면 다시 안쪽이 비어 있는 별이 됩니다.

그럼 다시 새로 고침을 하면 즐겨찾기 메뉴에서 사라진것을 확인 하실수 있습니다.

메뉴가 많아지면 사용자마다 자주자용하는 메뉴들이 달라지는데요. 해당 메뉴를 모아두고 업무에 임하신다면 업무 효율에 큰 도움이 될것 입니다.

감사합니다.