SlideShare a Scribd company logo
1 of 39
Download to read offline
XHTML 1.0 Strict를 적용한 국내 최초의 웹 표준 게시판
지금은 HTML5를 단계적으로 적용 중
BUT!
UI, UX 디자인 측면에선 변화가 없다 싫어요
예쁘지 못한 디자인
UX, UI의 불편함
사용자 감소
통일되지 않은 디자인
어려워요
복잡함
사용자 매뉴얼이 없어요
기능도 기능이지만, 사용하기가 불편해서 못쓰겠다!
예쁜 사용자 테마, 플러그인도 없고
근데 기본테마는 더 안예뻐. 나 안쓸래.
얘는 이렇게 생겼는데, 왜 다른거지?
있으나 업데이트 안 한지 오래.
프로그램에 내장되어 있는 건 봐도 무슨 말인지 모르겠어요.,
복잡 복잡 @_@
보기엔 간단한데 사용하기 어려워요.
UI, UX 디자인을
개편하면?
UI, UX 디자인을
개편하면?
사용자
외부디자인
통일되지 않은 디자인 + 제한적인 사용자 외부테마
(스크랩북은 사용자 테마설정지원이 없음)
담기, 신고기능이 게시물에만 존재할 뿐
신고내역과 담기 목록을 따로 확인할 수 없거나, 확인할 수 있는 방법이 복잡함.
0
글쓰기 폼의 길이가 넓은 GR BOARD,
스크롤에 미니사전과 설문조사가 가려짐에도 불구하고 하단에 위치.
-> 이용불편 + 이용빈도 낮아짐
0
샐럭트 옆에 전송버튼이 존재하지 않아,
자바스크립트를 지원하지 않는 환경에서 카테고리 변경 불가능.
+ 키보드 접근 불가능 -> 낮은 접근성
0
1. 웹 트랜드를 반영하지 못한 디자인
2. 기능적인 부분만 중시, 배치 접근성을 고려하지 않은 문
제
3. 기타 사용자 입장에서 발생하는 여러 문제들..
관리자
내부디자인
잠깐!
관리자 내부디자인이 개선이 중요한 이유는?
• 사용자 외부디자인은 사용자테마로 80% 이상 극복 가능하지만, 관리자 내부디자인은 불가능.
• 사이트 운영시, 관리가능이 복잡하고 어려우면 실질적으로 사용하기 편한 다른 프로그램을 이
용할 수 밖에 없음 -> 사용자 유출
간략해 보일 수 있으나, 정보가 한꺼번에 압축되어 있기 때문에
처음 설치시 초보자들에게 어려움과 혼란을 줄 수 있다.
00
GPL 라이선스 전문 내용을 볼 수 없다.
GR BOARD에 탑재된 다른 프로그램들의 라이선스를 확인할 수 없다.
과정과 ‘(현재)’ 표시로 위치를
알려주지만,
관리자정보 입력화면 에선 레이
아웃 을 유지하는게 아니라 기본
가입테마창만 띄어주기 때문에
혼란가능성이 큼.
00
어디는 이미지로고, 어디는 텍스
트 로고… 통일성이 없다!
게시판 관리자 권한을 가졌을 경우, 게시물 관리 화면.
재대로 디자인이 입혀지지 않았으며, 선택된 게시물 목록에서 별도로 잘못 선택한 게시물
의 체크박스 해제가 불가능함. (사용자 편의기능)
실제 사이트 운영할 때에 관리 디자인과 사이트디자인과의 괴리감 발생.
00
일자로 나열된 설정/정보들.
복잡함과 공간의 효율성이 떨어진다.
+
스크롤의 압박
00 현재 GR BOARD는 그룹에 대한 특별한 기
능이 없다.
굳이 그룹과 관리기능을 나눌 필요가 없다.
또한 메뉴의 길이가 늘어 복잡하게 된다.00
DB백업, 코드생성, GR BOARD 업데이트,
GR BOARD 삭제는 기본적인 관리기능에 속
하기 때문에 따로 통합하여 제공하는 것이 더
효율적이다.
00
관리자 첫 화면의 현재상황은 간단한 상황을 보여
줘야하는데도 불구하고 불필요한 정보가 많다.
또한 설정관련부분도 포함되어 있다.
오히려 관리자들은 사이트운영 (게시판/댓글)의 비중이 많기 때문에 최
근 게시물과 댓글 기록이 처음탭에 위치하는 것이 더 적절하다.
첫 화면에서 서브페이지 테마와 금지단어를 설정해야하는 이유가 뭘까?
오히려 관리메뉴의 신고 메뉴와 같이 따로 관리메뉴로 빠져야하거나 별도로 통합하
여 제공해야한다.
메뉴, 배치구성이 잘못됨.
1. GR BOARD의 특성을 파악하지 못함
(GR BOARD의 대부분의 사용자는 타 게시판에서 넘어옴 -> 데이터 변환을
별도의 복잡한 과정을 거쳐 진행해야 함.)
2. 사이트 운영중에 발생한 모든 오류를 한곳에서 보고 관리할 수 있는 기능이
없음.
3. (현재, 오류보고는 단순한 오류만 기록함 -> 로그인실패허용횟수의 초과와
신고기능은 관리자에게 쪽지로 보고함)
4. 아이콘, 기본디자인 통일성 부족
5. 고정된 관리자페이지 폭 -> 16:9의 넓은 해상도에서 불편함.
6. 웹 접근성 취약 (단순히 문법검사에만 적잡하도록 설계됨)
7. 텍스트로 된 불편한 도움말과 스프링노트의 매뉴얼과의 미 연동
8. 기타 관리자들이 느끼는 여러가지 문제점들
직접 느낀 여러가지 문제점들과 그동안 SIRINI.NET에
보고된 제안, 불편한점들을 목록화 하여 정리
+ 다른 프로그램들 벤치마킹
직접 기술적으로 해결 가
능한 문제
별도의 팀원들의 도움이
필요하거나 기술적으로
구현이 어려운 문제
보류하거나 도움을 요청
혹은 제외
계획한 틀에 맞춰 반영
SIRINI.NET (GR BOARD 공식사이트)를 통한
문제점/제안 수집
관리자페이지, 관리자페이지와 비슷한
모든 웹디자인/페이지 를 수집한 후 분석
수집한 정보들을 바탕으로 아이디어 스케치
작성
여러가지 시안 제작 + 수정
일부 확정된 내용들 HTML/CSS
코딩
서버 스크립트언어 (PHP) + Mysql 을 이용하
여 프로그램 기능 구현
적용 및 테스트
배포
다국어 지원과, 3단계의 설치유형 제공
GR BOARD 유입자 특성을 파악하여 많이 쓰이는 타 프로그램의 데이터 컨버터 프로그램을 내장.
탑재되어있지 않는 프로그램은 플러그인식으로 간단히 추가 가능
어려운 복구/이전 과정대신, 설치페이지에서 쉽게 복구/이전 가능함.
불필요한 자원낭비를 위해, 설치 후 관리자페이지에서 기능제거 가능
유형을 선택하면 페이지 이동 없이 동의창이 나타나므로
스크롤문제와 페이지 이동과정이 필요없음.
+ 자바스크립트를 지원하지 않는 환경에서도 접근가능.
00
GPL 라이선스와 GR BOARD에 사용된 프로그램의
저작권 확인 가능
기존의 관리자 계정생성시에 기본테마 가입창에서 별
도로 진행하던 것과 달리 UI를 통합하여 제공
00
설치과정과 전보다 명확한
진행단계 표시
기본 버튼디자인
기본 버튼디자인을 제공,
상황에 따른 버튼디자인으로 별도의 디자인필요 없이 의도하고자 한 기능 구현 가능.
버튼디자인 제시로, 개발시 통일성 유지 가능.
사이트 이름과 주소를 한번에 확인가능
-> GR BOARD를 이용하여 여러사이트를 운영하는 사람에게 혼란성 최소화시킴
다중 관리자 염두 + 클릭시 이
전 접속 IP주소와 시간 확인가
능
메뉴의 단순화 + 통폐합
깔끔한 픽토그램 사용으로 직
관적인 UI 구현
기존의 복잡한 현재화면을 대폭 축소/정리하여 가장 사용이 많은 필요한 정보들만 제공
-> 추후 사용자가 편집가능하게 할 예정
각 메뉴에 도움말 아이콘 배치
클릭시 스프링노트 매뉴얼로 이동
-> 최신업데이트에 따른 빨리 반영된
매뉴얼 제공 가능
모든 정보들을 한곳에서 편리하게 보고 관리하자!
페이스북 알림창에서 벤치마킹.
기존의 관리정보/오류/알림들을 모두 ★에서 다룸으로서,
여러단계를 거치지 않고 한번에 확인가능함.
쪽지(메모)에 별도의 필드를 추가/관리자를 구분하여 구현예
정.
톱늬바퀴 아이콘과 도움말 아이콘을 통해 관리자페이지 메뉴
의 배치와 색상(밤/오전모드)설정 제공,
SIRINI.NET 혹은 사용자메뉴얼에 쉽게 접근 가능.
기타 아직 구현되지 않은 기능들과
추가적으로 사용자들이 제기한 문제점 수정/반영
UX, UI 디자인의 향상
웹 접근성, 사용자 만족도 향상
여러 최적화 기법들로 인한 속도 향상
통합된 디자인으로 통일서 유지
더 쉬운 사용환경 제공
기타 추가로 발생할 여러가지 이점들…

More Related Content

What's hot

드래그홈2013표준제안서
드래그홈2013표준제안서드래그홈2013표준제안서
드래그홈2013표준제안서draghome
 
해외 대상 홈페이지 전략
해외 대상 홈페이지 전략해외 대상 홈페이지 전략
해외 대상 홈페이지 전략성혁 장
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기Hyeonmin Kim
 
2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서블로그코디
 
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트Atlassian 대한민국
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법Gihyo Joshua Jang
 
왜 워드프레스인가
왜 워드프레스인가왜 워드프레스인가
왜 워드프레스인가bh Kyung
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014draghome
 
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철Kichul Jung
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)송 준일
 

What's hot (12)

드래그홈2013표준제안서
드래그홈2013표준제안서드래그홈2013표준제안서
드래그홈2013표준제안서
 
해외 대상 홈페이지 전략
해외 대상 홈페이지 전략해외 대상 홈페이지 전략
해외 대상 홈페이지 전략
 
Sencha architect 사용기
Sencha architect 사용기Sencha architect 사용기
Sencha architect 사용기
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서2013 블로그코디 홈로그 소개서
2013 블로그코디 홈로그 소개서
 
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트
[AIS 2018] [Team Tools_Basic] Confluence는 어떻게 쓰나요 - 모우소프트
 
크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법크롬 개발자 도구 소개 및 사용법
크롬 개발자 도구 소개 및 사용법
 
Web micro blog
Web micro blogWeb micro blog
Web micro blog
 
왜 워드프레스인가
왜 워드프레스인가왜 워드프레스인가
왜 워드프레스인가
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014
 
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)
 

Viewers also liked

[오픈소스컨설팅]JBoss 5 Detail
[오픈소스컨설팅]JBoss 5 Detail[오픈소스컨설팅]JBoss 5 Detail
[오픈소스컨설팅]JBoss 5 DetailJi-Woong Choi
 
우리은행 서비스디자인
우리은행 서비스디자인우리은행 서비스디자인
우리은행 서비스디자인동일 김
 
NextGen Pos System 프로젝트 산출물
NextGen Pos System 프로젝트 산출물 NextGen Pos System 프로젝트 산출물
NextGen Pos System 프로젝트 산출물 은지 박
 
Universal design & web
Universal design & webUniversal design & web
Universal design & web선영 박
 
Jamin's portfolio for camp mobile_compact.version
Jamin's portfolio for camp mobile_compact.versionJamin's portfolio for camp mobile_compact.version
Jamin's portfolio for camp mobile_compact.versionJamin Park
 
Wearable ux 101 for UX Designer : Fundamental Info
Wearable ux 101 for UX Designer : Fundamental InfoWearable ux 101 for UX Designer : Fundamental Info
Wearable ux 101 for UX Designer : Fundamental InfoAndy Daeyol Na(나대열)
 
UXDS_Naver me UX 개선안 프로젝트_1차
UXDS_Naver me UX 개선안 프로젝트_1차UXDS_Naver me UX 개선안 프로젝트_1차
UXDS_Naver me UX 개선안 프로젝트_1차Yeji Cho
 
UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종Yeji Cho
 
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)keesung kim
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본sangyong lee
 
통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by RightbrainRightbrain UX1 Consulting group
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1Limepaper, Inc.
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인Donghoo Kim
 

Viewers also liked (13)

[오픈소스컨설팅]JBoss 5 Detail
[오픈소스컨설팅]JBoss 5 Detail[오픈소스컨설팅]JBoss 5 Detail
[오픈소스컨설팅]JBoss 5 Detail
 
우리은행 서비스디자인
우리은행 서비스디자인우리은행 서비스디자인
우리은행 서비스디자인
 
NextGen Pos System 프로젝트 산출물
NextGen Pos System 프로젝트 산출물 NextGen Pos System 프로젝트 산출물
NextGen Pos System 프로젝트 산출물
 
Universal design & web
Universal design & webUniversal design & web
Universal design & web
 
Jamin's portfolio for camp mobile_compact.version
Jamin's portfolio for camp mobile_compact.versionJamin's portfolio for camp mobile_compact.version
Jamin's portfolio for camp mobile_compact.version
 
Wearable ux 101 for UX Designer : Fundamental Info
Wearable ux 101 for UX Designer : Fundamental InfoWearable ux 101 for UX Designer : Fundamental Info
Wearable ux 101 for UX Designer : Fundamental Info
 
UXDS_Naver me UX 개선안 프로젝트_1차
UXDS_Naver me UX 개선안 프로젝트_1차UXDS_Naver me UX 개선안 프로젝트_1차
UXDS_Naver me UX 개선안 프로젝트_1차
 
UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종UXDS_Naver me UX 개선안 프로젝트_최종
UXDS_Naver me UX 개선안 프로젝트_최종
 
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)
스타트업에서의 UX Design / UX Design @Startup (@글로벌K스타트업, 2013)
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본
 
통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain통신서비스 온라인 채널 UX Research 사례 by Rightbrain
통신서비스 온라인 채널 UX Research 사례 by Rightbrain
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 

Similar to Gr board ui 개선 프로젝트

Sharepoint 대한 오해 몇가지
Sharepoint 대한 오해 몇가지Sharepoint 대한 오해 몇가지
Sharepoint 대한 오해 몇가지Seung-Jin Kim
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
[아꿈사/110903] 도메인주도설계 4장
[아꿈사/110903] 도메인주도설계 4장[아꿈사/110903] 도메인주도설계 4장
[아꿈사/110903] 도메인주도설계 4장sung ki choi
 
SpeedMIS v6 소개
SpeedMIS v6 소개SpeedMIS v6 소개
SpeedMIS v6 소개Wonbae Jung
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리봉조 김
 
기술적 변화를 이끌어가기
기술적 변화를 이끌어가기기술적 변화를 이끌어가기
기술적 변화를 이끌어가기Jaewoo Ahn
 
Website Development Planning
Website Development PlanningWebsite Development Planning
Website Development Planningnanobox
 
SJBoard Project Portfolio
SJBoard Project PortfolioSJBoard Project Portfolio
SJBoard Project PortfolioJuyoungKang7
 
Wildgoose 최종데모
Wildgoose 최종데모Wildgoose 최종데모
Wildgoose 최종데모KIM HEE JAE
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표Minho Lee
 
워드프레스 체험기
워드프레스 체험기워드프레스 체험기
워드프레스 체험기용화 지
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'ssuser4e0be8
 
JIRA 업무 생산성 향상 및 프로젝트 관리
JIRA 업무 생산성 향상 및 프로젝트 관리JIRA 업무 생산성 향상 및 프로젝트 관리
JIRA 업무 생산성 향상 및 프로젝트 관리KwangSeob Jeong
 
Usability design guideline
Usability design guidelineUsability design guideline
Usability design guidelineBilly Choi
 
킴스큐 rb 20 사용자영역 스크린샷 들
킴스큐 rb 20 사용자영역 스크린샷 들킴스큐 rb 20 사용자영역 스크린샷 들
킴스큐 rb 20 사용자영역 스크린샷 들Gitaek kwon
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)Youngbin Han
 
테스팅을위한선행조건 명세
테스팅을위한선행조건 명세테스팅을위한선행조건 명세
테스팅을위한선행조건 명세규동 최규동
 
스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글라한사 아
 

Similar to Gr board ui 개선 프로젝트 (20)

헬프원
헬프원헬프원
헬프원
 
Sharepoint 대한 오해 몇가지
Sharepoint 대한 오해 몇가지Sharepoint 대한 오해 몇가지
Sharepoint 대한 오해 몇가지
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
[아꿈사/110903] 도메인주도설계 4장
[아꿈사/110903] 도메인주도설계 4장[아꿈사/110903] 도메인주도설계 4장
[아꿈사/110903] 도메인주도설계 4장
 
SpeedMIS v6 소개
SpeedMIS v6 소개SpeedMIS v6 소개
SpeedMIS v6 소개
 
블로그코디 Bc town소개서
블로그코디 Bc town소개서블로그코디 Bc town소개서
블로그코디 Bc town소개서
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리
 
기술적 변화를 이끌어가기
기술적 변화를 이끌어가기기술적 변화를 이끌어가기
기술적 변화를 이끌어가기
 
Website Development Planning
Website Development PlanningWebsite Development Planning
Website Development Planning
 
SJBoard Project Portfolio
SJBoard Project PortfolioSJBoard Project Portfolio
SJBoard Project Portfolio
 
Wildgoose 최종데모
Wildgoose 최종데모Wildgoose 최종데모
Wildgoose 최종데모
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
 
워드프레스 체험기
워드프레스 체험기워드프레스 체험기
워드프레스 체험기
 
Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'Web develop UI/UX Tool 'SBUx'
Web develop UI/UX Tool 'SBUx'
 
JIRA 업무 생산성 향상 및 프로젝트 관리
JIRA 업무 생산성 향상 및 프로젝트 관리JIRA 업무 생산성 향상 및 프로젝트 관리
JIRA 업무 생산성 향상 및 프로젝트 관리
 
Usability design guideline
Usability design guidelineUsability design guideline
Usability design guideline
 
킴스큐 rb 20 사용자영역 스크린샷 들
킴스큐 rb 20 사용자영역 스크린샷 들킴스큐 rb 20 사용자영역 스크린샷 들
킴스큐 rb 20 사용자영역 스크린샷 들
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)
 
테스팅을위한선행조건 명세
테스팅을위한선행조건 명세테스팅을위한선행조건 명세
테스팅을위한선행조건 명세
 
스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글스프링시큐리티와 소셜연습 이해를 위한 글
스프링시큐리티와 소셜연습 이해를 위한 글
 

More from Guleum Lee

제주 오라게
제주 오라게제주 오라게
제주 오라게Guleum Lee
 
Funny food icon set
Funny food icon setFunny food icon set
Funny food icon setGuleum Lee
 
나를 그리다.
나를 그리다.나를 그리다.
나를 그리다.Guleum Lee
 
Handfuns 쇼핑몰 계획
Handfuns 쇼핑몰 계획Handfuns 쇼핑몰 계획
Handfuns 쇼핑몰 계획Guleum Lee
 
Handfun shop 개발 가이드
Handfun shop 개발 가이드Handfun shop 개발 가이드
Handfun shop 개발 가이드Guleum Lee
 

More from Guleum Lee (6)

제주 오라게
제주 오라게제주 오라게
제주 오라게
 
Funny food icon set
Funny food icon setFunny food icon set
Funny food icon set
 
나를 그리다.
나를 그리다.나를 그리다.
나를 그리다.
 
Handfuns 쇼핑몰 계획
Handfuns 쇼핑몰 계획Handfuns 쇼핑몰 계획
Handfuns 쇼핑몰 계획
 
Handfun shop 개발 가이드
Handfun shop 개발 가이드Handfun shop 개발 가이드
Handfun shop 개발 가이드
 
Enjoy PRAHA
Enjoy PRAHAEnjoy PRAHA
Enjoy PRAHA
 

Gr board ui 개선 프로젝트

  • 1.
  • 2.
  • 3.
  • 4. XHTML 1.0 Strict를 적용한 국내 최초의 웹 표준 게시판 지금은 HTML5를 단계적으로 적용 중 BUT! UI, UX 디자인 측면에선 변화가 없다 싫어요
  • 5. 예쁘지 못한 디자인 UX, UI의 불편함 사용자 감소 통일되지 않은 디자인 어려워요 복잡함 사용자 매뉴얼이 없어요 기능도 기능이지만, 사용하기가 불편해서 못쓰겠다! 예쁜 사용자 테마, 플러그인도 없고 근데 기본테마는 더 안예뻐. 나 안쓸래. 얘는 이렇게 생겼는데, 왜 다른거지? 있으나 업데이트 안 한지 오래. 프로그램에 내장되어 있는 건 봐도 무슨 말인지 모르겠어요., 복잡 복잡 @_@ 보기엔 간단한데 사용하기 어려워요.
  • 6. UI, UX 디자인을 개편하면? UI, UX 디자인을 개편하면?
  • 7.
  • 9. 통일되지 않은 디자인 + 제한적인 사용자 외부테마 (스크랩북은 사용자 테마설정지원이 없음)
  • 10. 담기, 신고기능이 게시물에만 존재할 뿐 신고내역과 담기 목록을 따로 확인할 수 없거나, 확인할 수 있는 방법이 복잡함. 0
  • 11. 글쓰기 폼의 길이가 넓은 GR BOARD, 스크롤에 미니사전과 설문조사가 가려짐에도 불구하고 하단에 위치. -> 이용불편 + 이용빈도 낮아짐 0
  • 12. 샐럭트 옆에 전송버튼이 존재하지 않아, 자바스크립트를 지원하지 않는 환경에서 카테고리 변경 불가능. + 키보드 접근 불가능 -> 낮은 접근성 0
  • 13. 1. 웹 트랜드를 반영하지 못한 디자인 2. 기능적인 부분만 중시, 배치 접근성을 고려하지 않은 문 제 3. 기타 사용자 입장에서 발생하는 여러 문제들..
  • 14. 관리자 내부디자인 잠깐! 관리자 내부디자인이 개선이 중요한 이유는? • 사용자 외부디자인은 사용자테마로 80% 이상 극복 가능하지만, 관리자 내부디자인은 불가능. • 사이트 운영시, 관리가능이 복잡하고 어려우면 실질적으로 사용하기 편한 다른 프로그램을 이 용할 수 밖에 없음 -> 사용자 유출
  • 15. 간략해 보일 수 있으나, 정보가 한꺼번에 압축되어 있기 때문에 처음 설치시 초보자들에게 어려움과 혼란을 줄 수 있다. 00 GPL 라이선스 전문 내용을 볼 수 없다. GR BOARD에 탑재된 다른 프로그램들의 라이선스를 확인할 수 없다. 과정과 ‘(현재)’ 표시로 위치를 알려주지만, 관리자정보 입력화면 에선 레이 아웃 을 유지하는게 아니라 기본 가입테마창만 띄어주기 때문에 혼란가능성이 큼. 00 어디는 이미지로고, 어디는 텍스 트 로고… 통일성이 없다!
  • 16. 게시판 관리자 권한을 가졌을 경우, 게시물 관리 화면. 재대로 디자인이 입혀지지 않았으며, 선택된 게시물 목록에서 별도로 잘못 선택한 게시물 의 체크박스 해제가 불가능함. (사용자 편의기능) 실제 사이트 운영할 때에 관리 디자인과 사이트디자인과의 괴리감 발생.
  • 17. 00 일자로 나열된 설정/정보들. 복잡함과 공간의 효율성이 떨어진다. + 스크롤의 압박
  • 18. 00 현재 GR BOARD는 그룹에 대한 특별한 기 능이 없다. 굳이 그룹과 관리기능을 나눌 필요가 없다. 또한 메뉴의 길이가 늘어 복잡하게 된다.00 DB백업, 코드생성, GR BOARD 업데이트, GR BOARD 삭제는 기본적인 관리기능에 속 하기 때문에 따로 통합하여 제공하는 것이 더 효율적이다.
  • 19. 00 관리자 첫 화면의 현재상황은 간단한 상황을 보여 줘야하는데도 불구하고 불필요한 정보가 많다. 또한 설정관련부분도 포함되어 있다. 오히려 관리자들은 사이트운영 (게시판/댓글)의 비중이 많기 때문에 최 근 게시물과 댓글 기록이 처음탭에 위치하는 것이 더 적절하다. 첫 화면에서 서브페이지 테마와 금지단어를 설정해야하는 이유가 뭘까? 오히려 관리메뉴의 신고 메뉴와 같이 따로 관리메뉴로 빠져야하거나 별도로 통합하 여 제공해야한다. 메뉴, 배치구성이 잘못됨.
  • 20. 1. GR BOARD의 특성을 파악하지 못함 (GR BOARD의 대부분의 사용자는 타 게시판에서 넘어옴 -> 데이터 변환을 별도의 복잡한 과정을 거쳐 진행해야 함.) 2. 사이트 운영중에 발생한 모든 오류를 한곳에서 보고 관리할 수 있는 기능이 없음. 3. (현재, 오류보고는 단순한 오류만 기록함 -> 로그인실패허용횟수의 초과와 신고기능은 관리자에게 쪽지로 보고함) 4. 아이콘, 기본디자인 통일성 부족 5. 고정된 관리자페이지 폭 -> 16:9의 넓은 해상도에서 불편함. 6. 웹 접근성 취약 (단순히 문법검사에만 적잡하도록 설계됨) 7. 텍스트로 된 불편한 도움말과 스프링노트의 매뉴얼과의 미 연동 8. 기타 관리자들이 느끼는 여러가지 문제점들
  • 21.
  • 22. 직접 느낀 여러가지 문제점들과 그동안 SIRINI.NET에 보고된 제안, 불편한점들을 목록화 하여 정리 + 다른 프로그램들 벤치마킹 직접 기술적으로 해결 가 능한 문제 별도의 팀원들의 도움이 필요하거나 기술적으로 구현이 어려운 문제 보류하거나 도움을 요청 혹은 제외 계획한 틀에 맞춰 반영
  • 23. SIRINI.NET (GR BOARD 공식사이트)를 통한 문제점/제안 수집
  • 24. 관리자페이지, 관리자페이지와 비슷한 모든 웹디자인/페이지 를 수집한 후 분석
  • 25. 수집한 정보들을 바탕으로 아이디어 스케치 작성
  • 27. 일부 확정된 내용들 HTML/CSS 코딩
  • 28. 서버 스크립트언어 (PHP) + Mysql 을 이용하 여 프로그램 기능 구현 적용 및 테스트 배포
  • 29.
  • 30. 다국어 지원과, 3단계의 설치유형 제공 GR BOARD 유입자 특성을 파악하여 많이 쓰이는 타 프로그램의 데이터 컨버터 프로그램을 내장. 탑재되어있지 않는 프로그램은 플러그인식으로 간단히 추가 가능 어려운 복구/이전 과정대신, 설치페이지에서 쉽게 복구/이전 가능함. 불필요한 자원낭비를 위해, 설치 후 관리자페이지에서 기능제거 가능
  • 31. 유형을 선택하면 페이지 이동 없이 동의창이 나타나므로 스크롤문제와 페이지 이동과정이 필요없음. + 자바스크립트를 지원하지 않는 환경에서도 접근가능. 00 GPL 라이선스와 GR BOARD에 사용된 프로그램의 저작권 확인 가능
  • 32. 기존의 관리자 계정생성시에 기본테마 가입창에서 별 도로 진행하던 것과 달리 UI를 통합하여 제공 00 설치과정과 전보다 명확한 진행단계 표시
  • 33. 기본 버튼디자인 기본 버튼디자인을 제공, 상황에 따른 버튼디자인으로 별도의 디자인필요 없이 의도하고자 한 기능 구현 가능. 버튼디자인 제시로, 개발시 통일성 유지 가능.
  • 34.
  • 35. 사이트 이름과 주소를 한번에 확인가능 -> GR BOARD를 이용하여 여러사이트를 운영하는 사람에게 혼란성 최소화시킴 다중 관리자 염두 + 클릭시 이 전 접속 IP주소와 시간 확인가 능 메뉴의 단순화 + 통폐합 깔끔한 픽토그램 사용으로 직 관적인 UI 구현 기존의 복잡한 현재화면을 대폭 축소/정리하여 가장 사용이 많은 필요한 정보들만 제공 -> 추후 사용자가 편집가능하게 할 예정 각 메뉴에 도움말 아이콘 배치 클릭시 스프링노트 매뉴얼로 이동 -> 최신업데이트에 따른 빨리 반영된 매뉴얼 제공 가능
  • 36. 모든 정보들을 한곳에서 편리하게 보고 관리하자! 페이스북 알림창에서 벤치마킹. 기존의 관리정보/오류/알림들을 모두 ★에서 다룸으로서, 여러단계를 거치지 않고 한번에 확인가능함. 쪽지(메모)에 별도의 필드를 추가/관리자를 구분하여 구현예 정. 톱늬바퀴 아이콘과 도움말 아이콘을 통해 관리자페이지 메뉴 의 배치와 색상(밤/오전모드)설정 제공, SIRINI.NET 혹은 사용자메뉴얼에 쉽게 접근 가능.
  • 37. 기타 아직 구현되지 않은 기능들과 추가적으로 사용자들이 제기한 문제점 수정/반영
  • 38.
  • 39. UX, UI 디자인의 향상 웹 접근성, 사용자 만족도 향상 여러 최적화 기법들로 인한 속도 향상 통합된 디자인으로 통일서 유지 더 쉬운 사용환경 제공 기타 추가로 발생할 여러가지 이점들…