3 Reasons Why You Should Hire Me

피드백을 적극 수용합니다.

행동에 따르는 결과를 예측하고 움직입니다.

새로운 기술과 업무에 빠르게 적응합니다.




Phone : 010 - 9658 - 4521
Email :  ashgale@naver.com




Project - CJ for Mobile and Laptop

* 링크는 GNB 메뉴에만 걸려있습니다.






ISSUE01
- Issue -
명도가 비슷하게 반복되는 아티클이 많아서 유저의 집중과 흥미가 떨어진다는 피드백을 받았습니다.
- Solution -
아티클 간의 Contrast에 변주가 있으면 좋겠다는 피드백을 수용하여 아티클 5,7 사이에 아티클 6을 추가하였습니다. 전략적으로 어두운 톤으로 배치하고 다른 아티클에 없는 레이아웃을 사용 하였습니다.
- Result -
index의 아티클들의 명도 순서가 중간-밝음-어두움-중간-밝음-중간-어두움-중간-어두움으로 구성되어 스크롤 시 화면이 분명하게 전환되는 효과가 생겼습니다.

ISSUE02
- Issue -
캐러셀 슬라이더의 내비게이션 버튼이 연동되는 에러가 발생하였습니다. 두번째, 세번째 슬라이더부터 보이는 상황이 나타날 수 있습니다.
- Solution -
스터디 동료에게 질문하고 해결방법을 얻었습니다. Swiper  Navigation Module에서 ‘el’ property를 개별 id로 지정해주니 해결되었습니다.
- Result -
각 캐러셀 슬라이더마다 의도한 첫 slide가 제대로 보이게 되었습니다.

ISSUE03
- Issue -
Fade up 애니메이션이 과해서 화면이 어지럽고 중요한 요소에 집중할 수 없다는 피드백을 받았습니다.
- Solution -
대부분의 element는 정적인 상태로  두고 상대적으로 중요하지 않거나 기능이 없는 텍스트, 이미지 컨텐츠에 모션을 주었습니다.
- Result -
화면의 어지러움이 개선되되고 컨텐츠에 집중할 수 있게 되었습니다. 

ISSUE04
- Issue -
로그인 페이지의 접근성과 가시성을 최대한 높히는 설계가 필요했습니다.
- Solution -
한 번에 로그인 페이지의 모든 기능들을 볼 수 있도록 login div의 height를 800px 이내로 설정했습니다. 연결된기능을 가진 input 끼리 6px 간격으로 타이트하게조정하였습니다.
- Result -
밀도 있는 레이아웃과 그룹핑으로 클릭/터치 이동 거리를 최소화할 수 있었습니다.

ISSUE05
- Issue -
FAQ 리스트가 동시에 토글되는 issue가 발생했습니다.
- Solution -
개발자 포럼을 통해 해결방법을 찾았습니다. $(this) 선택자를 이용하면 class 자체에 .click() 메서드를 사용했을때도 클릭한 해당 요소만 제어할수  있었습니다.
- Result -
개별 토글이 가능해졌습니다.

END










Project - CSLV for Mobile and Laptop

* 링크는 GNB 메뉴에만 걸려있습니다.





ISSUE01
- Issue -
아티클의 사이즈를 100vh로 설계하니 브라우저 크기에 따라 요소 위치가 변화하여 의도한 간격이 맞지 않았습니다.
- Solution -
vh대신 px단위를 사용하여 모든 height를 고정으로 픽스하였습니다.
- Result -
명확한 포지셔닝이 가능해졌습니다.

ISSUE02
- Issue -
베스트 아이템 article에서 브랜드 상품 구좌끼리의 그룹핑이 없어 보인다는 피드백을 받았습니다.
- Solution -
각 요소간의 간격을 좁히고 동일 카테고리에 background를 주었습니다. 큰 구좌와 작은 구좌 사이에는 라인을 넣어 구분되도록 하였습니다.
- Result -
요소 간의 관계 구분이 더욱 확실해졌습니다.

ISSUE03
- Issue -
리뷰 article에서 swiper infinite loop이 제대로 구동되지 않는 이슈가 있었습니다.
- Solution -
해외 포럼에서 유사한 케이스를 찾고, dupicated slide가 html 내에서 제대로 정의되지 않았을 경우 생기는 문제임을 찾고 마크업을 새로 작성하였습니다.
- Result -
의도대로 infinite loop이 구동되었습니다.

ISSUE04
- Issue -
카테고리 article에서 섹션 hover 시 contrast가 낮아지도록 하였는데 이미지의 시인성이 낮아졌습니다. 실제로 보고 있는 요소가 더 시인성이 낮은 것은 개발의도와도, 사용경험에도 일치하지 않습니다.
- Solution -
기존 filter: contrast를 삭제하고 brightness property를 넣었습니다.
- Result -
hover 요소를 강조하는 동시에 시인성을 올리는 효과가 생겼습니다.

END









My 10 rules for UX

1. 목적에 부합하는 UX/UI
아무리 멋진 디자인이라도 이용목적에 합치하지 않으면 좋은 디자인이라고 볼 수 없습니다.

2. 이용자 중심의 UX/UI
제작자 입장에서는 사용자의 관점을 지나치기 쉬우므로, 지속적으로 유저의 신발을 신어보려는 노력을 해야합니다.

3. 피드백 받는 UX/UI
특히나 UX/UI는 작가주의적 관점으로 접근해서는 안됩니다. 실제 사용하는 계층의 목소리를 계속해서 반영해야 합니다.

4. 살아 숨쉬며 변모하는 UX/UI
시대상황과 트렌드, 그리고 사람들의 의식수준을 반영해나가야 합니다.

5. 예상 가능할 정도로 직관적인 UX/UI
좋은 UI는 한두 번의 시도 이내로 기능을 파악하고 사용할 수 있어야합니다.

6. 일관적인 UX/UI
하나의 서비스 안에서 한 가지 형태의 UI는 동일한 UX를 제공해야 합니다.

7. 유니버셜 UX/UI
그 어떠한 상대적인 약자라도 서비스를 무리 없이 이용할 수 있도록 사용성 범위를 확장해나가야 합니다.

8. 안전한 UX/UI
사용자가 해를 입는 일이 없도록 위험 소인이 있는 부분을 미리 파악하고 최소한의 안전 장치와 확인 절차를 주어야합니다.

9. 미래를 생각하는 UX/UI
해당 UX/UI가 현재를 넘어, 미래에 어떤 가능성을 제시할지, 혹은 어떤 영향을 미칠지 고민해야 합니다.

10. 관대한 UX/UI
우리 모두는 실수할 수 있는 존재라는 점을 지각하고, 유저의 실수에 관대한 UX/UI를 설계해야 합니다.









My 5 rules for coding

1. 개발 목적에 부합하는 코딩

2. 협업에 적합한 코딩 : 간결하고 읽기쉽게

3. 재사용 가능한 코딩 : 쉬워보이는 코딩

4. 확장성 있는 코딩

5. 인간을 배려하는 코딩





Phone : 010 - 9658 - 4521
Email :  ashgale@naver.com