게시판편집마리홈 개발
검색폼 열기 목록으로 보기

이름 제목 내용

제목사용자 스킨의 제작 접근성
글쓴이 : 예뜨락
추천수 : 0 읽은수 : 86 스크랩 : 0
날짜 : 2020-08-31 14:34:24

관련 링크 파일 다운로드 읽은 사람 글자 크게 글자 작게
관련 링크 관련링크 : 0개
총 링크 클릭횟수 : 0

링크된 데이터가 없습니다

파일 다운로드 총 업로드 : 0
파일 다운로드 총 다운로드 횟수: 0

업로드된 데이터가 없습니다

읽은 사람이 글을 읽은 사람 : 86명
more
No8634.239.♡.572021.04.20 07:36
No85207.46.♡.1082021.04.16 21:32
No84104.227.♡.732021.04.16 19:44
No8366.249.♡.822021.04.15 08:34
No82158.175.♡.852021.04.14 04:28
No8152.116.♡.1402021.04.13 15:47
No80207.46.♡.472021.04.12 21:12
No7917.58.♡.722021.04.12 12:49
No7889.46.♡.192021.04.11 15:51
No7761.249.♡.1032021.04.09 23:37
No7661.249.♡.1012021.04.08 11:09
No75114.119.♡.1432021.04.07 18:09
No74100.26.♡.2552021.04.07 06:58
No73199.189.♡.1012021.04.06 00:00
No72161.97.♡.42021.03.30 00:27
No71181.177.♡.1242021.03.29 21:02
No7061.249.♡.1802021.03.25 20:19
No6966.249.♡.202021.03.21 13:17
No68114.119.♡.1272021.03.20 05:19
No6740.77.♡.332021.03.20 00:05
No6647.243.♡.562021.03.19 15:11
No6540.77.♡.92021.03.16 19:20
No64119.65.♡.2052021.03.12 00:10
No6381.209.♡.1452021.03.08 14:06
No6289.46.♡.342021.03.07 19:30
No6166.249.♡.262021.03.06 17:59
No60192.99.♡.972021.03.05 12:54
No5940.77.♡.02021.03.05 06:32
No58114.119.♡.1592021.03.02 21:00
No57103.221.♡.1452021.03.02 08:10
No5661.249.♡.1582021.02.24 19:18
No5540.77.♡.192021.02.19 20:51
No5461.249.♡.1572021.02.15 11:58
No5399.106.♡.402021.02.12 12:05
No52109.102.♡.612021.02.10 20:59
No51185.119.♡.1002021.02.09 13:01
No50185.119.♡.1022021.02.08 22:52
No49109.102.♡.52021.02.07 16:14
No4866.249.♡.702021.02.06 21:06
No4761.249.♡.1172021.02.06 14:22
No4661.249.♡.1632021.02.05 15:06
No45144.76.♡.1182021.02.02 19:55
No4451.161.♡.2292021.01.29 22:19
No4354.85.♡.02021.01.27 04:02
No4261.249.♡.2012021.01.25 09:44
No4152.237.♡.822021.01.22 16:02
No40104.245.♡.2342021.01.18 13:43
No39149.248.♡.2162021.01.16 06:08
No38216.18.♡.1942021.01.14 05:15
No3766.249.♡.42021.01.11 04:46
No3661.249.♡.1462021.01.09 08:41
No3517.58.♡.62021.01.06 14:57
No3466.249.♡.302021.01.04 16:38
No3366.249.♡.662020.12.27 05:44
No3266.249.♡.852020.12.26 15:26
No3161.249.♡.1562020.12.25 12:06
No3061.249.♡.1732020.12.24 14:07
No29110.232.♡.502020.12.10 11:08
No28115.140.♡.562020.12.06 12:31
No2766.249.♡.942020.12.02 14:13
No2661.249.♡.1942020.12.02 11:06
No2566.249.♡.692020.12.02 02:31
No2466.249.♡.1302020.11.27 17:27
No2313.209.♡.1412020.11.16 22:28
No2266.249.♡.1592020.11.16 18:02
No2117.58.♡.682020.11.07 20:24
No2061.249.♡.1052020.11.04 04:12
No1966.249.♡.1282020.11.02 12:57
No1866.249.♡.182020.10.20 22:14
No1761.249.♡.2152020.10.20 21:37
No16122.38.♡.512020.10.17 22:46
No15121.151.♡.1772020.10.17 21:39
No14223.33.♡.1892020.10.17 15:57
No1359.14.♡.1622020.10.17 12:39
No1217.58.♡.672020.10.15 09:00
No1161.249.♡.1922020.10.10 06:36
No1066.249.♡.1752020.10.09 07:29
No961.249.♡.1182020.10.06 21:26
No866.249.♡.282020.10.02 10:33
No761.249.♡.1052020.09.22 18:43
No661.249.♡.1132020.09.10 05:06
No561.249.♡.2142020.09.08 14:33
No45.255.♡.1562020.09.04 20:43
No3203.133.♡.532020.09.02 04:27
No2118.235.♡.1302020.08.31 20:19
No1예뜨락2020.08.31 14:34
PHP를 조금 다룰줄 아는 분들은 스킨을 뚝딱 뚝딱 만드는데 크게 문제가 되지는 않습니다
그런데 일반 유저 입장에서는 php에 대해 알지 못하면 접근하기가 힘이 듭니다
그걸 좀더 쉽게 일반 유저와 디자이너가 쓸수 있도록 접근한게 템플릿 형태의 게시판 코드이구요

지금은 과거의 유물인 제로보드4의 경우 일반 사용자의 스킨 공여도가 무척 높았습니다

그 이유는 시대적 호응도도 있었지만 단순한 템플릿 형태의 스킨 구조와 함께
html만 알아도 크게 손색없는 디자인과 결합해 결과물을 만들어 낼수 있었기에
초등학생도 스킨을 올리고 대부분 중고생과 같은 젊은 유저가 접근했기 때문 아닌가 생각해 봅니다

좀 더 쉬운 코드의 템플릿 형태를 가진 스킨이라면 일반 사용자의 제작 참여 호응도가 늘지 않을까
생각해 봅니다

그래서 아래와 같은 공상을 했구
생각의 전환을 갖고자 소개합니다

제가 생각하는 일반 사용자의 템플릿 스킨 구조는 온전한 html 구조입니다
사용자의 업데이트용 스킨 템플릿용 치환코드는
[name] , [date] 와 같은 기존 템플릿 구조가 아닌
html에서 지원하는 HTML data-* Attributes 를 활용하면 어떨까 싶습니다

완전한 html 구조여서 로컬에서 작업하고 디자인된 페이지를 바로 확인할 수 있고 수정할수 있기에
디자인의 접근성이 용이합니다

php에서는 data 속성을 치환해서 필요한 부분을 변환 한다면 사용 가능 합니다




1) <span>[name]</span> 과 같은 많이 사용되는 기존 템플릿 형식을 아래와 같이 사용합니다
<span data-templete-name>홍길동</span>

위의 구조는 바로 html로 열었을 때 확인 가능하니 디자인 하기가 용이 합니다
또한 html에서 지원하는 속성이니 문제의 여지가 없습니다
php에서는 str_replace, preg_replace, preg_match_all 같은 함수를 적절히 이용해서
스킨에서 필요한 만큼의 라인을 가져다 치환합니다
이부분을 위한 함수가 따로 있어야 합니다
data-templete-name 라는 속성을 가진 태그의 내용값인 "홍길동"을 필요한 1차 템플릿용 코드인 아래와 같이 변경합니다

2) <span data-templete-name>[name]</span> 이를 PHP에서는 기존 방식대로 치환하구요
중간에 한번의 치환 과정이 포함되어 있어 아무래도 속도가 떨어지므로 속도의 보장성을 위해

3)최종 치환된 템플릿을 따로 저장하고

4)저장된 템플릿 스킨이 있으면 그걸 가져다 치환하고
( [name] 부분의 치환 코드를 데이터 값으로 변경)
없으면 사용자가 올린 스킨을 가져와 템플릿화 합니다

좀 더 속도를 위한다면
해당 영역 혹은 해당 페이지를 파싱해서 저장하고 일정 시간마다 갱신하게 해주며

5)갱신된 파싱 페이지를 보여줍니다


정리하자면

1) <span data-templete-name>홍길동</span> 와 같은 데이터 속성을 통한 온전한 html 페이지 작성
2) 스킨에서 필요한 라인을 가져다 준비된 템플릿 코드로 변환
3) 2번을 최종 템플릿 스킨 파일로 저장
4) 최종 템플릿 스킨의 템플릿 코드를 기존 방식처럼 실질적인 디비 데이터 값으로 치환
5) 디비 접근을 줄이고 출력 속도를 높이고 싶다면 해당 페이지나 구역을 일정시간마다 파싱해서 리턴

단점으로는

여기에 필요한 기능은 자바스크립트의 돔 조작에서 innerHtml 같이 해당 돔 안의 내용을 그대로
가져오는 php의 돔 조작이 필요합니다 이 부분이 핵심 기능이며 프로그래머의 손길이 많이 갑니다


장점으로는

앞서 썼듯이 로컬에서 바로 작업중인 디자인을 바로 볼수 있으며
기존에 여러장으로 나뉘어서 최종 모습을 확인하기 어려웠던 형태를 ( head.html, body.html, foot.html )

하나의 온전한 html로 구성하기에 ( skin.html )
쉽게 디자인과 확장이 가능합니다



마리홈은 위와 같은 형식으로 최근글 스킨이 스킨화 되었습니다

게시물이 수정되었습니다 ( 2020년 08월 31일 15시 10분 54초 )

116.124.♡.155


글 쓰기 답글 쓰기 삭제 이전 목록


작성된 코멘트가 없습니다
필수사항

글 순서 글 제목 글쓴 사람 글쓴 날짜 읽은 수 추천 수
5 보안에 관련된 내용 예뜨락 2021/01/06 61 0
읽고 있는 곳 사용자 스킨의 제작 접근성 예뜨락 2020/08/31 86 0
3 게시판 아이디 변경시 주의 사항 예뜨락 2013/12/05 144 0
2 모듈 생성에 대한 고찰 예뜨락 2013/11/03 158 0
1 마리홈의 사이트 빌더화 1 예뜨락 2013/10/27 177 0
글 쓰기 처음 목록 검색폼 열기


이름 제목 내용


회원로그인

마리홈피마리홈피
↓ 현재 읽고 있는 곳
사이트 소개 | 개인정보처리방침 | 커뮤니티 운영규칙 | Layout design by 예뜨락