by
May 13. 2017
홈페이지 개선
끄적거리기
오늘은 금요일 밤
거의 6주 간, 잠재고객들만 뵙고 다니니 자리에 엉덩이 붙이고 앉아 코딩을 지긋이 잘 안 하게 되었다. 그러던 차에 2주 전에 만들어 놓은 landing page를 다시 열어봤다.
contact us 쪽에 전에 있던 form box 스타일이 html default여서 너무 멋이 없었다.
옛날 contact us새 정부 출범을 기념하여(응?) 새 단장을 하기로 했다. 인터넷을 뒤져 간단한 pure-form style을 찾아서 적용했는데 form을 중앙에 맞추느라 css와 20분 간 씨름을 했다. (진지하게 css 공부를 해야 하나 고민이 되게 만든다)
새로운 contact us씨름 끝에 form을 중앙에 잘 맞추고 너비까지 잘 조절했지만,
음... 뭔가 좀 그랬다.
뭐가 그랬냐면은, 아래와 같이 '보내기'를 누르면, 이게 비동기 ajax request로 날아가는데, 약간의 delay가 생긴다. 그러면 보내기를 누른 고객은 잠깐 동안 이게 잘 갔는지 안 갔는지 알 수가 없다.
그래서 spinner를 넣기로 했다.
인터넷을 뒤지니 내가 원하는 모양과 색깔의 gif spinner 이미지 파일을 generate 할 수 있어서 편했다.
또 한 20분 삽질 끝에 아래의 문구와 spinner를 구현할 수 있었다.
아래는 내 취향에 맞게 골라 download 받은 돌아가는 spinner
실제 구현은 아래와 같은 문구와 함께...
별 거 아니지만, 혼자 삽질하다가 그래도 좀 이쁘게 되니깐 뿌듯하다.
