Portfolio (208) 썸네일형 리스트형 sopang 기획 - 기획서 Excel - views 뷰 레이아웃2 잡아본 화면별 레이아웃으로 본격적으로 frontend코딩을 시작했다. backend 코딩에 영향이 가지않도록 bootstrap을 이용해 빠르게 구현하기로 했고, 아이콘은 fontawesome을 이용했다. 반응형으로 구현하려던 계획은 아쉽지만 욕심으로 판단되어 접어두기로 했다. 반응형코딩 + 크로스브라우징 테스트 + 모바일 갤럭시/아이폰 테스트 + 카카오앱 테스트 까지가 그동안 반응형 구현시 나의 루틴이였는데 이미 충분히 경험이 있고, 구현할 수 있는것을 sopang에 집어넣기에는 같은 시간대비 sopang 외 다른 프로젝트를 수행하거나 경험하지 못할 것이라고 생각했다. sopang은 pc화면으로만 구현되며, 아래와 같이 구현됬다. 회원가입, 로그인 페이지 메인페이지 리스트와 상세페이지 마이페이지 관리자 .. sopang 기획 - 기획서 Excel - views 뷰 레이아웃1 뷰를 결정 짓기전에, 우선 쿠팡에 방문하여 소팡에 쓰일 레이아웃들을 살펴봤다. 개발에 집중된 프로젝트이다보니 코드에 대한 경험과 완성도를 우선순위로 결정했고, 디자인과 세부화면/추가화면 등에 자칫 욕심을 부리거나 화려해지지않도록 다스려가며 벤치마킹/기획 했던것같다. https://www.coupang.com/ COUPANG 쿠팡은 로켓배송 www.coupang.com 쓰일 화면들을 골라내고 쿠팡의 소스들을 일부 다운받아 css가 깨지지않도록 일부 수정을 한 뒤, 조금씩 편집을 하고 여러 코드와 레이아웃들을 감소화하며 소팡의 무드를 잡아가기로 했다. 무드를 잡아보기로한 본래 목적에만 사용되고 버려질 코드임을 이해하며 우선 디자인에 영향을 주는 이미지들을 모두 placeholder 이미지를 활용하여 간섭이 .. sopang 기획 - 기획서 Excel - sitemap 사이트맵 화면별 기능/상세기능을 파악하는데 코드를 따라가고 DB, 화면을 따라가다 보니 마음이 앞섰는지 체계적인 분석이 되지않았다. 사이트맵을 먼저 작성하고, 차분히 하나씩 하나씩 들여다보기로 했다. 기획과 분석을 거듭하며 사이트맵이 계속 변경될것이라고 예상했고, figma로 보다 자유로운 편집과 보수가 쉽도록 작성했다. https://www.figma.com/file/OEGpMFT0mOPdF3v9z3Cw7X/2023?node-id=0%3A1&t=JH4VMhk2AMthjwc0-1 Figma Created with FigJam www.figma.com 완성된 사이트맵은 엑셀파일에 캡쳐본으로 첨부되었다. sopang 기획 - 브랜드 sopang은 제작중인 개인포트폴리오 / 해당블로그와 같은 무드를 가지길 바랬고 컨셉을 잡을 때 개인포트폴리오/블로그를 제작할때 figma로 작성했던 파일을 참고했다. http://xn--bh3bm9fory.com/ stylseheet xn--bh3bm9fory.com https://www.figma.com/file/OEGpMFT0mOPdF3v9z3Cw7X/2023?node-id=0%3A1&t=JH4VMhk2AMthjwc0-1 Figma Created with FigJam www.figma.com sopang 기획 - 기획서 Excel - Tool/FrameWokr/DB 우선 전체적인 툴과 프레임워크를 정리했다. pom.xml에 기술된 프레임워크/라이브러리를 정리하고 검색하며 기능을 알아봤다. 예제 소스 DB를 열람하기 위해 Eclipse exerd를 install하고 확인/사용법을 익혔다. https://standout.tistory.com/320 이클립스 exerd 설치, exerd 파일 깨짐 exerd, db를 시각적으로 보여주며 테이블 생성을 편하게 한다. https://www.exerd.com/down.do#a3 eXERD eXERD 3.X eXERD v2.X 평가판 다운로드 이클립스 플러그인으로 설치 eXERD 3.X eXERD SAM Edition 평가판/기업용 평가 standout.tistory.com https://standout.tistory.com/3.. sopang 기획 - 기획스케줄 처음이라 쉽지않을것을 예상해 2주의 시간을 들여 기획서를 만들 계획을 세웠다. 절반 이상의 시간을 샘플예제 코드를 분석하고 이해가 되지않으면 기획서 제작기간을 줄여서라도 이해하는것에 시간을 들이기로 했다. 기획서는 크게 엑셀과 ppt로 나누었으며, 이중 ppt는 기획서발표에도 이용된다. ppt 샘플은 미리 만들어놨었기에 크게 신경쓰지않았고, https://standout.tistory.com/276 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 Pretendard 1. 깔끔한 2. 얇고 두꺼움이 분명한 3. 한글일때 예쁜 폰트 https://sanghee.tistory.com/125 PPT 폰트추천 Pretendard 프리텐다드 폰트 다운/설치 https://cactus.tistory.c.. sopang 기획 - 카테고리/상품 포폴 기본 프로젝트로 쇼핑몰이 있는데 경력이 아닌 개인 작업물이기에 뭔가 만들면 취업 이후 노출되지않는 프로젝트가 될 것같았다. 쇼핑몰 프로젝트의 상품목록들은 개발에 큰 영향을 끼치지않음으로 반년내내 공부한 기록이자 추억으로 의미있게 만들어 보기로 했다. 카테고리, 4개 학원에 내 자리에 있는, 수강내내 나와 함께한 물품들로 채워지게 될 것이다. 디지털 DAVEN 크리스탈 3.0 풀 아크릴 윈도우 raean ARKCELL 22인치 모니터 22FF75 QSENN GPK1200 기계식 개발자키보드 QSENN M4500 블랙 USB 유선마우스 G986 갤럭시 s20+ 플러스 퍼플 도서 [NCS학습모듈] 화면 구현 자바 웹을 다루는 기술 Do it! 자바 프로그래밍 입문 Do it! 자바스크립트 + 제이쿼리 입.. 길벗 bookshop 띄우기 길벗에서 가져온 bookshop을 브라우저에 띄워보자. https://github.com/gilbutITbook/006895 GitHub - gilbutITbook/006895: 자바 웹을 다루는 기슬_예제 소스 자바 웹을 다루는 기슬_예제 소스. Contribute to gilbutITbook/006895 development by creating an account on GitHub. github.com 필요한 소스는 bookshop 소스코드와 이미지/sql 자료가 들어있는 pro31 폴더. https://github.com/gilbutITbook/006895/tree/master/bookShop01 https://github.com/gilbutITbook/006895/tree/master/pro31.. 이전 1 ··· 23 24 25 26 다음
