Juho Yun
잠시만 기다려 주세요.
- 반응형
- 블루콤 클론코딩
- 맥시칸치킨 리디자인
- 적응형
- 기타
- UI디자인 팀 프로젝트
- 회사 내 프로젝트
- 무사키우기
- 게임
- 블록깨기
블루콤
#클론코딩 #반응형 #PCFirst #mediaQueries #웹접근성 #웹표준
pc - 1920px | mobile - 375px
반응형 웹페이지 클론코딩입니다.
문제 및 해결
· 처음 사용한 여러가지 JS 플러그인
스크롤을 위한 AOS js,슬라이더 Swiper js, 자연스러운 애니메이션을 위한 anime js를 사용하였습니다.
여러가지 스크립트를 사용을 하기 위해 자료를 찾아 플러그인을 사용할 때 어떤 식으로 동작하고 사용하는 지 공부를 할 수 있는 기회가 되었습니다.
· 애니메이션
하나의 웹사이트에 여러 애니메이션이 있어 수많은 난항을 겪었습니다.
css와 js를 적절히 사용하면서 제작을 해 나갔고, 어려운 부분은 자료를 찾아보면서 애니메이션을 제작을 할 수 있었습니다.
· Marquee
Marquee를 제작할 때 애니메이션이 끝나고 초기화 되는 부분이 맞지 않아 문제가 있었습니다.
js에서 마진값을 따로 계산하니 동작이 되는것으로 보였으나, 상황에 따라 맞지 않는 경우도 있었습니다. 이 부분은 이유를 정확히 찾을 수는 없었습니다.
DESIGN
- 한글 - Noto Sans KR
- 숫자, 영문 - Oswald
맥시칸치킨
#리디자인 #반응형 #mobileFirst #mediaQueries #웹접근성 #웹표준
pc - 1920px | tablet - 1024px | mobile - 375px
html과 css를 배우고 처음 작업한 홈페이지입니다. 레이아웃 수정 및 반응형 작업을 하였습니다.
문제 및 해결
· 첫 프로젝트
html과 css를 배우고 난 뒤의 첫 프로젝트 입니다.
프로젝트를 직접 진행함으로써 사이트를 제작할 때 여러 문제를 겪으며 어떠한 점을 신경을 써 줘야 하는지 배울 수 있었고, 다음 제작물에서는 문제를 겪은 부분에 대해서 더욱 고려를 하여 제작을 할 수 있게 되었습니다.
· 최대한의 모든 해상도 지원
적정 해상도에 최적화가 되어있습니다. 하지만 해당 해상도만 사용되는 것이 아니기 때문에 vw와 %를 이용하여 최대한의 해상도를 지원했습니다.
그러나, 현재 모바일의 경우 375px 아래로 내려가게 되면 레이아웃이 깨지게 됩니다. 이는 차차 공부해나가며 수정할 예정입니다.
· 이미지 문제
이미지 대입 당시 이미지를 원본 사이즈로 사용을 했었습니다. 그 결과, 사진은 뭉개지고 파일이 무거워 로딩 속도도 느려지게 되었습니다. 이에 포토샵에서 사이즈를 조절해서 사용하여 이미지는 뭉개졌으나 로딩을 줄일 수 있게 되었습니다.
또한, 메인 사진과 치킨 사진의 경우 "맥시칸 치킨" 원본 사이트에서 어울리는 사진을 구할 수가 없었고 이에 타 브랜드의 사진을 가져와 활용하게 되었습니다.
DESIGN
- 한글 - Noto Sans KR
- 숫자, 영문 - Roboto
맥시칸치킨의 주 컬러인 빨간색과 초록색으로 텍스트와 Footer를 장식했으며, 서브로 잘 튀겨진 치킨과 같은 노란색을 사용했습니다
현재 제품 중에 가장 인기가 많은 제품과 신제품을 상단에 위치시키고 그 다음 치킨을 종류별 분류한 리스트를 넣었습니다.
UI디자인 팀 프로젝트
팀명 : 일찍끝내조 / 팀원 : 윤주호(PL), 강혜린, 신다영
모바일 앱 '가자가자' UIUX Redesign
앱 소개 : 캠핑을 다니는 사용자들을 위한 캠핑 장소 소개
제작 기간 : 2021/06 - 2021/08
프로젝트 타임라인
- 앱 선정
- 앱 UI 강점 및 문제점 조사
- 벤치마킹 앱(땡큐캠핑, 캠핑지도, 캠핑링크) 강점 및 문제점 조사
- 타겟 선정
캠핑 앱을 사용하는 타겟층을 최근 통계를 통하여 선정
- 비전 설정
- 페르소나 설정
- UX FLOW
- IA
- 무드보드 작성
- 프로토타입
담당 업무
공동 작업
- 자료조사 및 아이디어 제시 - 메신저를 통하여 지속적인 자료 조사 및 아이디어를 제시. 어떠한 아이디어의 경우에도 존중하며, 아이디어를 모아 소거법으로 제거
- 피드백 - 각자 맡은 작업 시, 메신저를 이용하여 빠른 피드백을 함. 이를 통해 서로의 업무 능력이 상승
- 디자인 - 디자인 팀원의 피드백에 맞춰 작업. 프로토타입 제작과 스플래시 이미지 작업
개인 작업
프리젠테이션 진행 - 대본 작성 및 발표
팀장 업무 - 팀원 격려 및 의견을 중재하고 조합하여 정해진 시간에 프로젝트가 끝날 수 있도록 수행.
총평
- 팀원이 열정적으로 참여하여 어려운 작업임에도 불구, 무난하게 프로젝트를 완성.
- 디자인을 맡은 팀원이 팀의 디자인을 맞춰주며, 나 포함 다른 팀원이 자료 조사 및 아이디어 제시함으로써, 만족할 수 있는 프로젝트가 나옴.
- 해당 프로젝트를 통해 UI디자인을 이해하고 협업의 중요성을 깨달음
못한 점
디자인 능력의 부재로 인해 한 팀원에게 업무가 몰림. 이 부분에 부족함을 느껴 디자인에 대한 능력 증진을 할 것.
잘한 점
팀원의 의견을 청취하고 중재.
팀원들의 능력을 살려 업무를 나누고, 한쪽에 업무가 몰리지 않도록 조율
무사키우기
#매드소프트 #무사키우기 #게임
2022.05 ~ 2023.05
매드소프트 근무 당시 작업한 프로젝트입니다
직무 상세 내용
주요 역할 : 출시 및 유지 보수
2022.07 무사키우기 비공개 출시
2022.08 무사키우기 스토리&튜토리얼 작업, 정식 출시
2022.09 무사키우기 UI 전체 리메이크
2022.10 무사키우기 무사꾸미기 작업(커스터마이징) 및 유지 보수 업데이트
2023.02 무사키우기 환생 시스템 & 무한모드 업데이트
블록깨기
#JavaScript #pc
pc - 1920px
JavaScript를 공부하기 위해 제작한 블록깨기 게임입니다. pc 1920px에 최적화되어 있습니다.
문제 및 해결
· 첫 자바스크립트 제작
자바스크립트 캔버스를 이용한 첫 작업물입니다.
캔버스를 어떤 식으로 이용하는지 알 수 있었고, 여러 문제를 겪으며 어떠한 점을 신경을 써 줘야 하는지 배울 수 있었습니다. 다음 제작물에서는 문제를 겪은 부분에 대해서 더욱 고려를 하여 제작을 할 수 있게 되었습니다.
· 삼각함수를 이용한 공의 각도 설정
처음 제작하였을 때는 y값에 의해 부딪힐 경우 -1을 곱해줘 방향을 전환 하였습니다. 하지만 이 방식의 경우 각도를 크게 변경을 주기가 어려워 cos과 sin을 이용해 각도를 조절하기로 하였습니다.
그래서 cos과 sin에 현재 각을 넣어 각도를 조절하였으나, 아직 완전한 이해를 하지는 못하였습니다. 이에 부족한 부분이 있어, 추후엔 더 공부하여 실력을 증진시키도록 하겠습니다.
· 벽돌 충돌 문제
벽돌이 두개 이상 충돌할 경우, 각도가 두번 돌게 되어 벽돌을 뚫게 되는 버그가 있었습니다.
이에 boolean 변수를 하나 선언하여 벽돌 하나에 충돌할 경우 다른 벽돌에 충돌 판정이 나더라도 각도는 변환시키지 않도록 하였습니다. 그리고 벽이나 플레이어의 패들에 부딪힐 경우 boolean값은 false가 되어 벽돌에 부딪히면 각도가 변경되도록 하였습니다.