사용언어 : html5, css3, javascript, vue.js, npm, vuex 제작의도 외주가 들어와서 기획서를 보니 간단한 페이지 구현이 주였습니다. 그래서 크게 기능을 신경쓸 필요가 없었고 간단하게 vue로 제작하여 component만 교체해주면 된다고 생각을 하였고 오른쪽 메뉴바는 항상 고정이기 때문에 굳이 router나 href링크를 이용해서 페이지 천제를 다시 로드 할 필요가 없다고 판단을 내렸습니다. 개발 과정은 npm을 이용하여 vue 프로젝트를 생성하고 메인에 있는 슬라이더는 npm으로 swiper를 설치해 사용하였습니다. 추가 적으로 오시는 길 부분에 이미지를 삽입 하기보단 daum 지도를 활용하여 좀 더 편하게 확인 할 수 있도록 지도를 삽입 하였습니다. 나머지 부분은 간단한 이미지 로드였습니다. 오른쪽 메뉴를 클릭 하면 store에 currentpage라는 데이터를 하나 만들고 그 데이터가 변화함에 따라 component가 바뀌게 만들었습니다. 또, 대학교 리스트가 많은데 메인과 참가 대학 등에 여러곳에 표시되어야 하고, 이미지 클릭 시 해당 홈페이지로 이동하게 되야 해서 store에 대학교 리스트인 array를 만들고 대학 하나당 object를 만들어주어 불러와 사용 하였습니다. 해당 object에는 name, location, loccation_id, ai_id를 키 값으로 넣어주었고 추후에 추가 되는 대학교들이 있어서 단순하게 sort함수를 이용하여 정렬하여 보여주었습니다. 그리고 추가적으로 header부분에 페이지의 depth를 표시해줘야 했는데 하나의 템플릿을 사용하다보니 메뉴를 클릭할때 currentpage라는 변수를 object형식으로 넘겨 depth라는 키에 array를 넘겨 해당 depth를 적어서 넘겨주면 표시되는 형식으로 제작하였습니다. 링크 : http://mycollege.or.kr/ 추가 기사 : http://www.cctoday.co.kr/?mod=news&act=articleView&idxno=1149024

더보기

2017.04~2017.08 1. 메디톡 하이브리드 앱 프론트 개발 (jquery, javascript, ajax, socket.io, open API, html5 ,css) 세부 사항 1) 다음 지도 api를 이용하여 db데이터 연동(병원 위치), 주변병원, 키워드, 진료과목 상세 검색 마커표시, 하단 swiper리스트와 마커 리스너 연동 2) 채팅 페이지는 소켓을 이용한 채팅 개발(최적화를 위해 부분 로드), 실시간 데이터 부분 로드와 표시 처리와 noimg 처리 3) 채팅 뷰페이지 스크롤 시 마지막 key로 ajax 통신 하여 부분적 로드와 사용자 채팅 전송 시 페이지 포지션 처리 , 병원 자동 인사말 처리 4) 친구 리스트(관심 병원 리스트) 부분 로드 처리와 상세 표시 noimg 처리 5) 병원 상세 정보 ajax 데이터 최적화 로드, 해당 병원 위치 지도 마커 표시, 상단 이미지 swiper이용 처리 6) 회원가입 시 backend와 협업으로 문자 전송, 회원가입 ajax 처리 7) 주변병원, 추천병원 최적화 로드(lazyLoad 이용, 비동기 ajax) 8) 소켓을 이용한 친구 추가 삭제, 실시간 데이터 통신 부분로드 9) 소켓을 이용한 이벤트 신청과 문의 10) 마이페이지 부분 수정 가능 11) 병원 검색 최적화 로드 12) 이미지 ajax 전송을 이용하여 제휴문의 13) ajax를 이용한 아이디 비밀번호 찾기 기능 14) 병원에 대한 리뷰 남기기, 이미지base64 처리와 ajax통신, 텍스트와 별점 처리 (plugin), 텍스트 처리 저장후 병원 상세페이지에 부분로드 15) 리뷰 전체 보기 페이지의 데이터 최적화 셋팅 리뷰 하나당 이미지 최대 5개 구분하여 로드 클릭시 swiper페이지 셋팅, 별점 텍스트 해당 사용자 프로필 이미지, 닉네임 처리 16) 이벤트 스크랩기능 ajax 처리 17) 마이페이지의 신청한 이벤트 리스트와 스크랩한 이벤트 리스트 처리 2017.04~2017.08 2. 메디톡 웹 관리자 페이지 프론트앤드 개발(jquery, javascript, ajax, socket.io, open API ,html5, css) 1) 메디톡 관리자 페이지 로그인 처리 2) 병원 목록 페이징 처리, ajax, 3) 최고관리자 상단 추천병원 등록, 추천 병원 순서 sortable을 이용하여 변경,삭제 가능 4) 최고관리자는 병원 목록에서 원하는 병원 선택하여 key값을 중점으로 병원 데이터 수정가능 5) 새로운 병원 등록 처리, 다음 주소 api를 이용하여 주소값 셋팅, timepicker를 이용하여 업무시간 셋팅 6) 해당 병원 의료진 등록 이미지처리(미리보기 : base64 이용)와 이미지 등록, 나머지 데이터 등록 7) 병원 관리자 리스트 형식 최적화 처리 8) 병원 관리자 개정 생성 등록, 리스트 최적화 처리 9) 캐스트 목록 최적화 처리, 상단 추천 캐스트 sortable로 드래그로 순위 처리, 삭제 가능 , 리스트에서 캐스트 미리보기 가능 10) 캐스트 등록 부분은 제목, 소제목, 배경이미지, 썸네일 이미지, 캐스트 이미지와 텍스트 처리 데이터를 담아서 저장, 데이터 입력 도중 미리보기 기능(base64로 처리) 11) 캐스트 수정은 데이터를 받아 셋팅, 부분적으로 추가 사항은 base64방식을 이용하여 보여주고 기존 데이터는 get방식으로 요청 하여 사용자들이 볼 수 있음, 이하 추가 삭제 사항을 저장해두고 ajax 통신 12) 메디톡 앱 내에서 계정 신청을 하면 무료계정신청 메뉴에서 사업자 등록증, 병원명 등을 통해 병원 등록과 관리자 계정 생성 13) 웹용 채팅 개발 , socket.io를 이용하여 로그인 시 key로 구분하여 채팅 페이지를 빼서 채팅 리스트, 톡한 친구리스트 등 셋팅 과 해당 유저 데이터를 화면 오른쪽에 셋팅 , 최적화를 위하여 스크롤 시 해당 메시지의 마지막 key를 ajax 통신을 이용하여 페이징 처리 14) 소켓을 페이지마다 연결하여 실시간 메세지 웹 하단에 표시, 내용 표시, 카운트 처리 15) 병원의 검색 엔진을 위해 진료과목 셋팅을 위해 간소화된 병원 등록 페이지 처리 , swiper를 이용하여 키보드 키를 눌러 확인 처리, 해당 병원 이름에 매칭 되는 진료과목 체크 2017.08~2017.11(12) 픽(1차 프로토타입) 1) 검색 페이지 상단 todaypicker는 ajax 통신을 하여 데이터를 받아온뒤 swiper로 데이터 처리 2) 채팅 socket.io를 이용하여 유동적인 데이터 통신과 부분로드, 실시간 데이터 대응 3) 채팅 뷰페이지 최적화를 위하여 스크롤을 이용한 부분 페이징 로드, 이미지 전송 처리 4) 마이페이지 데이터 로드 5) 검색 엔진을 이용하여 키값으로 데이터 통신과 autocomplete를 이용하여 사용자 편의성을 증가시킴, 최적화 로드를 위하여 현재 사용자가 보고있는 탭만 로드하고 이동 시 로드 5) 썸네일 이미지 lazyload를 이용하여 로드 6) 피드 텍스트 검색 부분은 기존 검색 엔진을 이용하여 key값을 얻고 key값을 이용한 최적화 로드 7) 실시간 데이터(채팅, 태그)등 socket을 통해 카운트 표시, alert페이지에서 현재 시간과 비교하여 로드 8) 글쓰기 시 textarea에 @~ 매칭 되는 순간 ajax를 통해 써칭 되는 친구 목록 구현하고 등록 시 db에 저장 9) 피드 로드 시 현재 유저의 키값과 매칭하여 좋아요 표시 callback으로 처리 10) 좋아요 리스트 클릭 시 스크롤 페이징 처리 11) 해당 상품 장바구니 담기 기능, 담았을 때 실시간 count처리 다중 장바구니, 다중 구매 기능 12) 장바구니 담기, 구매 시 옵션 순차 처리 13) 장바구니 수정, 삭제 처리 14) 친구 팔로잉, 팔로우 실시간 데이터 변동 처리 15) 새로운 채팅, 나와의 채팅 예외사항 처리 변동 처리 16) 스크랩하기, 스크랩 수정, 스크랩 리스트 처리 , 스크랩 폴더 추가 삭제 기능 17) 안드로이드와 통신 하여 채팅 알림 설정 18) 배송 오픈 api를 이용해 판매자가 배송사, 송장번호를 입력하여 db에 저장하면 구매자는 배송 추적을 할 수 있게 배송 오픈 api를 이용해 배송 추적 2017.12~2017.1(2) 픽 (2차 프로토타입-정식 출시) -2차 프로토 타입은 1차 프로토타입과 달라진 점은 원페이지 하이브리드 앱에서 모든 페이지를 get으로 바뀌어서 개발했습니다. 이유는 모든 페이지를 불러와서 앱 속도 성능 이슈가 많아서 재작업을 하게 되었습니다. 달라진 점 : 모든 페이지를 원페이지에서 get으로 단일 페이지로 변경되었습니다. 이 부분에서 기본 피드부분에서 swiper api를 이용하여 동적 데이터를 셋팅 했는데 swiper는 정적 데이터에 틀을 잡는데 최적화가 되어있는 api여서 성능 이슈가 있었습니다. 그래서 제가 slider를 plugin 형태로 3가지 버젼으로 만들어서 성능 이슈를 최적화 했고, 새로 만든 slider는 javascript를 이용해 객체를 각각 생성 하는 방식으로 prototype을 이용해 객체를 생성하고 각각의 버전 (기본 한페이지씩 넘어가는 버전, 지정한 갯수만큼 보여지며 넘어가는 버전, 자유롭게 사용자의 터치에 반응하는버전)을 만들었습니다. 그리고 기존 프로토타입1차에서는 원페이지이기 때문에 채팅 데이터를 받아서 이용하는데 문제가 없었지만 모든 페이지를 떼고 나서는 데이터 이동이 어려워져 안드로이드 개발자 분과 협업 하여 안드로이드 핸들러를 이용해 데이터를 각각의 activity에 넘겨 줄 수 있는 형태로 작업 하였고 웹뷰 셋팅과 activity의 준비가 랜덤하여 보통은 페이지가 뜨면 소켓이 붙어있는 페이지에 요청하는 방식으로 만들었고 요청, 응답, 받음 식으로 만들었습니다. 나머지 부분은 기존 프로토타입과 비슷합니다.

더보기

1. 제우메디컬 명함, 봉투, 쇼핑백 디자인 업무 기간:2016년11월~2016년 12월초 역할:디자인부터 진행까지 전부 2. 제우메디컬 리뉴얼 홈페이지 제작 업무 기간:2016년12월 ~ 2017년 2월 역할:html, css, jquery, jquery-pugin, 포토샵 이미지작업, 일러스트 퍼블리싱 100%, 이미지 웹디 작업 100%

더보기