[2팀 HCRP] 웹&앱 모바일 개편 이슈 공유.

안녕하세요 표준개발2팀 황혜경입니다.



 


웹표준개발2팀은 현재 각 파견지에 있기 때문에 내팀 같은내팀 아닌내팀 같은 2팀이랍니다.


그런 2팀이 한자리에 모여 HCRP를 진행하였는데요.



지난 8 20일 진행된 HCRP를 통해 얻은 의견을 정리하였습니다


 


HCRP?



하이브랩만의 코드 리뷰 프로그램으로 서로의 코드를 리뷰하며의견을 통해 코드 개선 및 역량발전을 위한 프로그램입니다.



 


이번 HCRP에 발표주제는 모바일 웹&앱 개편을 진행하며 발생된 이슈입니다.

 

목차.

1.     그라데이션 그래프 그리기.



2.     유동적인 이미지 비율.



3.     컨텐츠 상하정렬.

 

1.  그라데이션 그래프 그리기

많은 쇼핑웹에서 보여지는 UI 중 수량을 편하게 보여주는 효과로 그래프를 사용하는데요.




이번 개편에서는 라운드 그라데이션 그래프를 표현했습니다.

구현방식

in_l 왼쪽 기준으로 오른쪽 영역을 채우는 첫번째 이미지.

in_r 오른쪽 기준으로 왼쪽 영역을 채우는 두번째 이미지.

 

 main_graph1.png

%25252525EA%25252525B5%25252525AC%25252525ED%2525252598%2525252584%25252525EB%25252525B0%25252525A9%25252525EC%252525258B%252525259D

 

이미지 hover하면 구현됨.

붉은 영역보이지 않는 부분. 하얀 영역
실제 노출되는 부분.

 

이슈발생

단색이미지일경우 이슈가 없지만 그라데이션이기 때문에 정확한 색상 표현이 안됨.

 main_graph2.png

 

 

해결방안

in_rote 전체 채워진 이미지를 제작하여

첫번째 이미지가 회전을 180도 절반을 돌았을때
그라데이션 이미지가 오른쪽 이미지의 회전률에 따라
함께 회전하면 그라데이션이 표현됨.

 

회전값 구하는 방식. -> 왼쪽 이미지 회전 값 + 오른쪽 이미지 회전 값 = 전체 이미지 회전 값.

 

bg_graph_in.png

main_graph3.png

 

 

테스트 코드

두개의 이미지로만 구현하였을때.

%252525252525252525EB%25252525252525252591%25252525252525252590%252525252525252525EA%252525252525252525B0%2525252525252525259C%25252525252525252520%252525252525252525EC%2525252525252525259D%252525252525252525B4%252525252525252525EB%252525252525252525AF%252525252525252525B8%252525252525252525EC%252525252525252525A7%25252525252525252580%252525252525252525EB%252525252525252525A1%2525252525252525259C%25252525252525252520%252525252525252525EA%252525252525252525B5%252525252525252525AC%252525252525252525ED%25252525252525252598%25252525252525252584

세개의 이미지로 구현하였을때.

%25252525252525252525EC%2525252525252525252584%25252525252525252525B8%25252525252525252525EA%25252525252525252525B0%252525252525252525259C%2525252525252525252520%25252525252525252525EC%252525252525252525259D%25252525252525252525B4%25252525252525252525EB%25252525252525252525AF%25252525252525252525B8%25252525252525252525EC%25252525252525252525A7%2525252525252525252580%25252525252525252525EB%25252525252525252525A1%252525252525252525259C%2525252525252525252520%25252525252525252525EA%25252525252525252525B5%25252525252525252525AC%25252525252525252525ED%2525252525252525252598%2525252525252525252584

2. 유동적인 이미지 비율

 

데이터 이미지는 정비율이며기기별로 화면과 이미지가 리사이즈가 되어야 하는 경우입니다.

실제 적용된 CSS 코드

padding-top 속성으로 부모의 width 값을 상속받아 자신의 height 값을 지정함.

자신의 자식 태그는 높이에 영향을 안받도록 position:absolute .

 

장점.

데이터 이미지의 크기가 유동적일 경우 사용데이터 이미지의 비율이 다르기 때문에 이 방법을 사용함.

 

blank.gif

 

의견1

이미지를 기준으로 노출영역을 margin으로 처리

 

장점.

이미지를 기준하여 유동적인 화면에 적합.

blank.gif

 

 

의견2

 

vw속성

크로스 테스트 필요

<meta name=”viewport” > viewport 를 기반으로 하는 새로운 css 단위

정확한 속성 설명은 아래 url 참고.

http://caniuse.com/#search=vw
http://css-tricks.com/viewport-sized-typography/

 

main_img4.png

 

3. 컨텐츠 상하정렬.

높이값이 유동적이며 박스 안 컨텐츠가 상하로 자동정렬하는 방식입니다.

 
실제 적용된 CSS 코드
Table 속성
 
 tabelcell.gif 

tabelcell_css.gif

 

 

의견1

모바일 버젼  

:before 선택자 사용하여 상하 정렬.

blank.gif

IE7 PC 대응 버젼 

:before 선택자는 inline태그(span, strong…. 사용.

대신 inline 태그 사용어쩔수 없이 block 태그를 사용할 시 핵 사용하여야 함. 

blank.gif

의견2

모바일 버젼

-webkit-box css 속성 사용하여 상하 정렬.

blank.gif

 


간단한 TIP

1. 자동완성 레이어 높이값지정하기

텍스트 입력시 레이어가 열리는 UI.

부모에 height 값과 동일하게 position top 값 지정.
부모의 relative를 기준으로 자식영역의 높이값 계산하여 top 지정.
높이값이 변경될경우 top 을 재 지정필요하여 개선함.

 

blank.gif

 

2. 우측 말줄임

float  overflow를 이용하여 말줄임처리.

주의float 속성을 가진 태그가 먼저 위치해야함.

blank.gif

 

마치며…

HCRP를 통해 코드퀄리티를 높일수 있었던 좋은 시간이였습니다. 

다음 HCRP 도 기대가 되네요~ 다음에 뵈요 2팀  


감사합니다.

Comments are closed.

Post Navigation