난이도가 높은 디자인을 표현하는 것에 있어 어떤식으로 생각하는것과, jQuery 로 처리했던 상황을 설명합니다.

1. 표현하기 난해한 디자인에
대처하는 노하우 + @
박 재선 - cjxellos@nate.com

2. 안녕하세요
박 재선 입니다.
(저 곰 이모티콘 익..숙 하시죠..?)

3. 박재선
(27)
인천 남동구 구월동
(Cordial - IBM Notes and Domino)
UI Developer

4. * 하드코딩하는사람들 가입일 :
130316

5. * 좋아하는 것
- 재능기부
- 스터디
- 어반자카파

6. * 싫어하는 것
- 실내흡연
- 길가면서 흡연
- 노가다성 하드코딩
- “요즘애들은 ~~~~~ (극혐…)”

7. 자 그럼 이제 시작해볼까요?

8. 때는 2014년 03월 인덕원……

9. PL급 프리랜서의 계약이 얼마 남지않
은 상황에서 프리랜서 분이 계약 연장
의사가 없다고 하여 제가 대신 프로젝
트에 투입되었습니다.

10. 일정은 빠듯하고 해야할 일은 많았기 때문에 매
일 야근을 하였고, 막차타고 집에서도 일을 해
야했습니다.

11. 디자인 차장 曰 : PSD 올려놨으니 작업해주세요
~

12. - 리스트들은 4개가 고정이
라 빨간색으로 된 박스를
absolute;로 띄우고 높이
를 고정한 후 결과물 전달
.

13. 저는 탭 메뉴를 마크업
할 때 키보드로 컨트롤하
기 편하게 이런식으로 작
성합니다. 2뎁스를
(position: absolute;)로
띄웁니다.

14. 출처 : 나라디자인 (http://naradesign.net/open_content/lecture/wp/#section36)

15. 이런식으로 높이
를 고정한 상태로
작업물을 넘겼습
니다.

16. 별다른 얘기가 없길래 문제 없이 그냥 그렇
게 지나가는 줄 알았습니다.

17. 며칠 후 기획자와 고객사와의 미팅

18. 탭메뉴 리스트를 4개 고정이 아닌 몇 개가
나오더라도 상관없게끔 조치하세요.

19. absolute로 띄우
고 높이를 고정하
지 않으면 이런 화
면이 나오겠죠?

20. 자 그럼 이럴 땐 어떻게 해야할까요?
여러분들의 생각이 궁금합니다.

21. 저는 jQuery를 사용하여 문제를 해결하였습니다
.

22. ★ 전체적인 코드는 이러합니다.

26. 왜 이렇게 복잡하냐고요?
복잡하게 한 번 짜서 개수에 상관없이 자
동화시켜서 편하게 사용하려고요.

27. * 스크립트 코드 요약
1. absolute;로 띄워져있는 높이를 모두
구해서 배열에 저장한다.(Array[i][n])
* Array[i] == 버튼에 대한 Index(채소,
과채 등)
* Array[i][n] == i안에 있는 absolute
로 띄워져있는 높이값에 대한 Index

28. * 스크립트 코드 요약
1-2. 배열에 저장한 결과값.
* 채소 : a[0][329, 145, 122, 53]
* 과일 : a[1][168, 76]
* 과채 : a[2][53, 122]
* 축산 : a[3][168, 168]
* 곡물 : a[4][168, 168]
* 버섯 : a[5][168, 168]
* 관측속보 : a[6][1129]

29. * 스크립트 코드 요약
2. 클릭할 때 마다 배열의 인덱스를 찾는
다.
- ex : 축산버튼 안에있는 엽근채소를 클릭했을 경우 – a[3][1]
안에 저장되어있는 값을 참조

30. * 스크립트 코드 요약
3. 해당되는 배열의 인덱스를 찾은 후 그
값을 받아 버튼을 감싸고 있는 <div>에 높
이를 준다.

31. * 이해가 되셨다면,
(http://www.okdab.com/product/vegetableGardenDetail.do?
farmCropsSn=216)
이 페이지에 나온 높이가 모두 다른 탭메뉴도
만드실 수 있을거라 생각됩니다.

32. 이해가 잘 안되시죠? ᅲᅲ

33. 페이지 URL에 들어가셔서 소스를 보시면
나름 친절한 설명이 들어있습니다…….
(IE7에서도 작동하니 관심있으신 분은 한 번 봐주시면 되겠습니
다.)
★ 압축본 : http://890222.net/151205/151205.zip

34. 이 아코디언의 경우 경력이 얼마 되지도
않은 신입인 상태에서 진행한거라 어떻게
구현할 것인지에 대해 많은 생각을 하였습
니다.

35. * 느낀 점
- 시간이 조금 걸리더라도 효율적인 작업
을 할 수 있도록 생각하는 시간을 가지자.
- 평소에 UI에 대해 많이 생각하자.

36. 물론 충분한 시간이 주어진다는 가정하에
..

37. 하지만 상황이 보통 그렇지 않죠?
항상 시간은 없고.. 멘탈은 붕괴되고..

38. 평소에 많은 연구를 한다면,
어려운 디자인에 대해서도 당황하지 않
고 슬기롭게 대처하실 수 있으리라 생각됩

39. +@(플러스알파라 쓰고 발표가 너무 빨리 끝나면 당황할 것 같아
만든 페이지들………이라 읽는다…….)

40. * 진행중인 스터디
- 자바스크립트 토론형 스터디 진행 (2015.09
~ )
- HTML 스터디 진행 (재능기부 – 2015.09 ~ )
- HTML 스터디 진행예정 (2016.01 ~ )

41. * 어떻게 하면 스터디를 효율적으로 유
지할 수 있을까?

42. * 저는 현재 이렇게 하고 있습니다.
(운영자의 입장)

43. 1. 운영자는 “부처” 같은 마인드를 가져야 구성
원들을 이끌 수 있다.

44. 2. 너무 조급하게 스터디를 진행하지 않는다.

45. 3. 스터디의 목적이 뚜렷하여야 한다.

46. 4. 이탈자가 나오는 것은 어쩔 수 없는 현상이
다. 당황하지말라.

47. * 구성원

48. 1. 모임을 유지하느라 고생하는 운영자를 위해
서라도 50%만의 책임감이라도 가져주세요.

49. 2. 무단결석은 정말 매너 없는 행동 중에 하나
입니다. 늦잠을 자거나 사정이 생기면 꼭 연락
은 해주는 게 매너!

50. 3. 강의형 스터디인 경우 강의해주는 사람을 테
스트하지 말아주세요.

51. 4. 인내심.

52. 여러분
오늘 만나서 반가웠습니다.
많이 부족한 발표였지만,
끝까지 들어주셔서 감사합니다.

53. ㈜코디얼
박재선
서울특별시 마포구 양화로8길 16-4
http://www.cordial.co.kr
Tel. 02-336-3076 / Fax. 02-336-5127
© 2015 Cordial. All rights reserved.
Thank you *