UI 디자인은 사용자 인터페이스(User Interface)를 말한다.
즉, 프로그램을 이용해서 컴퓨터에 내용을 입력하고 명령을 내릴 때 사용자가 눈과 손이 쉽게 움직일 수 있도록 메뉴나 버튼을 배치하는작업이다.

 

홈페이지 제작 시 간혹 이러한 관리자페이지를 디자인해야하는 경우가 있다.
보통 관리자페이지는 웹기획자가 관리자기능 기획 후 스토리보드로 화면설계하여 들어가는데
한 두명의 관리자만 보는 간단한 페이지야 디자인없이 담당 프로그래머가 화면설계만 보고 바로 시스템이 연동되도록 코딩할수도 있지만
거대 쇼핑몰의 SCM같이 복잡하고 사용자들이 많은 경우는 기능이 많이 들어가는 만큼 필연적으로 UI디자인을 하고 웹사이트의 컨셉에 맞춰 전체적인 색깔과 버튼, 아이콘까지도 전부 제작해야한다.

 

가장 좋은 UI디자인은 역시 사용자의 입장에서 사용이 편리한 디자인이 아닐까 싶다.

미(美)를 위한 시각적인 요소보다 이 위치쯤에 당연히 버튼이 있어야 할거라고 생각되는 부분에 버튼을 위치시키는것. 

그러기 위해서는 본인이 제작할 사이트와 유사한 홈페이지를 직접적으로 사용해보면서 편리한점과 불편한점을 실제로 경험해 보는것이 가장 큰 도움이 된다.

 

 

작년에 지마켓과 옥션이 통합되면서 리뉴얼된 ESM plus는 초반에 상단부분이 노란색으로 배치되어 흡사 이마트몰의 분위기가 났으나 본인들도 제작하면서 뭔가를 느꼈는지 몇일 후 바로 변경되어 재밌었던 기억이 있다.

 

 

현재 ESM plus 메인페이지 (지마켓.옥션 판매자 관리페이지)

 

 

판매자들이 가장 많이 사용하게 되는 상품관리 페이지의 UI디자인.

기존 지마켓만을 관리할수있었던 GSM이 옥션의 기능을 추가하면서 사용자 편의를 위해 최대한 노력한 흔적이 보인다. 실재 사용해본 결과 상품등록이나 수정페이지를 3단계로 나누어 넘어가는것만 빼면 기존보다 꽤 편리한 부분이 많다. 현재 중간중간 업데이트도 끊임없이 이루어 지고 있고...

 

 

11번가 SCM메인 페이지

 

 

11번가 상품관리 페이지

 

 

인터파크 SCM메인 페이지

 

 

인터파크 상품관리 페이지

 

 

 

필자가 오픈마켓 및 종합몰까지 거의 10개 사이트를 넘게 사용해본 결과 한 사이트만 제대로 다룰 줄 알면 나머지 사이트는 사용방법이 거의 비슷하기 때문에 처음해보는 작업도 전혀 무리가 없다.

이는 기획자들이 사용자들의 편의를 위해 기존 사이트에서 크게 벗어나지 않는 인터페이스를 제작하기 때문인데 나만의 사이트를 만든답시고 디자인만을 우선시하여 이러한 것들을 무시한다면 결코 좋은 UI디자인이라 볼 수 없는 것이다.

 

그렇지만 웹디자이너로서 매우 큰 회사에 들어가지 않는이상 위와같이 복잡한 관리자 페이지를 만들 경험은 쉽지않다.

보통 개인 쇼핑몰이나 단순한 홈페이지의 회원관리정도의 페이지를 아래와 같이 디자인할때가 많은데 그때 사용되는 버튼이나 유용한 미니 아이콘들을 모아봤다.

 

 

 

포토샵,일러스트,엑셀,파워포인트,한글 등의 미니아이콘들과 수정,삭제,추가,보기,체크박스등의 버튼들인데 간단한 관리자페이지에서는 디자인에 크게 구애받지 않으므로 유용하게 사용할 수 있을 것이다.

 

 

 

관리자페이지.zip

 

 

 

 

 

 
 
 
 
Posted by 두여자 Y&S

댓글을 달아 주세요

  1. dahee

    정말 유용하게 사용할 수 있을 것 같아요
    감사합니다 ^ -^~

    2013.07.11 16:52 [ ADDR : EDIT/ DEL : REPLY ]
  2. 감사합니다.

    2013.08.02 15:59 [ ADDR : EDIT/ DEL : REPLY ]
  3. gooood

    어째저째 흘러흘러 왔습니다 ㅋ 잘쓸께요 덥석받아갑니다.

    2013.09.26 17:06 [ ADDR : EDIT/ DEL : REPLY ]
  4. siilver

    잘쓸게요 감사합니다

    2014.03.25 12:05 [ ADDR : EDIT/ DEL : REPLY ]
  5. 안녕하세요. 델리군이라고 합니다.
    포스팅 잘보았습니다. 자료 감사합니다.
    한가지 문의 드릴점은 올려주신 자료중 아이콘에 대해서만 공유를 하고자하는데요...
    제가 사용하는 블로그가 네이버블로그라서요.. 스크랩기능이나 퍼가기 기능이 따로 없는지 해서요~
    아니면 아이콘 자료만 옮겨가고 출처를 남기는 방법으로 사용을 해도 될런지요?
    최근 자료 무단펌에 대해서 민감하신것으로 보여 조심스레 문의 드려봅니다^^

    2014.09.17 14:59 [ ADDR : EDIT/ DEL : REPLY ]
    • 티스토리는 스크랩이나 퍼가기 기능이 따로 없는걸로 알고있습니다.

      포스팅을 따로 올리고싶다는 말씀이시죠?
      아이콘 화면만 캡쳐해서 올리시고 다운로드 받을수있는 경로를 이쪽으로 링크걸어주시는건 상관없지만 그 외에는 그냥 개인적으로 사용해주셨으면 합니다.

      2014.09.18 16:42 신고 [ ADDR : EDIT/ DEL ]
  6. sato

    초보인 제가 배울 게 진짜 많은 곳이네요 ㅎ
    감사히 받아가겠습니다 ^^

    2014.09.18 15:09 [ ADDR : EDIT/ DEL : REPLY ]
  7. 초보기획자

    감사합니다. 잘 쓰겠습니다. ^^

    2017.01.12 15:04 [ ADDR : EDIT/ DEL : REPLY ]