하룹코어 에듀센터

피시,태블릿,모바일 기기별로 반응형 최적화 맞춤별 디자인

포토샵 없이, jQuery나 자바스크립트 코딩없이 하룹코어만으로 배경디자인을 하는 방법

하룹코어로 병원 랜딩페이지제작 천만원 이상 절약하는방법

코딩없이 웹에서 바로 텍스트 변경 및 폰트까지 변경하는법

다양한 애니메이션 효과를 클릭 한번으로 적용시키십시오

애니메이션이란, 가끔 글씨가 위로 쓰르륵 하고 올라오거나, 이미지가 쓰르륵 하고 올라오거나, 또는 옆에서 튀어 나오거나 하는등에 기능이 개발되어진 병원 홈페이지들을 본적이 있으실것입니다. 바로 그 기능을 애니메이션이라고 부릅니다. 보통 이 애니메이션은 거의 대부분 제이쿼리라는 자바스크립트류의 언어로 개발되어지는데, 조금만 잘못 개발해도, 스크롤 상황에서 늦게 나오거나, 겹쳐서 나오거나, 다른 항목들이 같이 애니메이트 되거나 하는 현상등이 발생되어서, 애니메이션이 익숙하지 못한 개발자들은 개발시에 애니메이션을 최대한 피하려 하는 경향도 있습니다.

하지만 하룹코어를 이용하시면, 섹션, 텍스트, 이미지등 모든 부분에서 매우 쉽게 애니메이션 효과를 적용하실 수 있습니다. 애니메이션 효과를 적용하고 개발하려고 적게는 수십만원에 개발비를 지불하고 계시고 있진 않으신가요? 하룹코어는 이러한 다양한 애니메이션 적용 경우의 수를 딥러닝을 통해 인간이 해낼 수 없는 다양한 경우의 모든 셋팅 가지수를 입력해놓고, 고객분들께서 어떠한 셋팅 상황에서도 전부 작동되게끔 개발에 성공하였습니다.

아래는 각 항목별로 정말 기초적인 애니메이션을 작동시키게 하는 코드입니다.

$("button").click(function(){
  $("div").animate({left: '250px'});
}); 
$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
}); 
$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
}); 
$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});
$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 
$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 

저희는 0.1px별로 각각 세부적으로 조절하여, 가장 이상적인 최적의 애니메이션들을 수만번의 모델링으로 테스트하여 가장 이상적인 애니메이션 효과들을 적용하고, 바로 해당 코딩을 불러올 수 있도록 개발에 성공했습니다. 우선 불러올때는 Node.js 기술을 활용하여, 클래스를 변경해주고, 각 경우의 수로 코딩되어진 수많은 jQuery들의 functon을 불러올 수 있게끔 처리하였습니다.

애니메이션 기능을 개발하는것 자체는 그리 어렵지 않습니다. 위에 코드를 참고하여, 얼마든지 클래스나 아이디로 어렵지않게 적용할 수 있습니다. 하지만 어려운것은, 고객분들께서 하룹코어 이용시 각 셋팅하면서, 그것을 확인하셨을때 Ajax로 실시간으로 변경처리 하는것에는 서버에 너무 큰 무리가 있었고, 이것을 전부 Node.js 방식으로 변경을 해야했고, 각 클릭당 이 코딩들이 각 주요 데이터베이스 칼럼들을 자동으로 원격 업데이트 해줘야하는 부분이 어려운 부분들이였고, 이것을 요청하면 해드리자는 것은, 고객분들 입장에서 하룹코어에 그리 큰 메리트가 없게 되었기에, 저희는 한동안 이 애니메이션 자동 셋팅 기능에 엄청 많은 시간들을 할애 하였습니다. 그리고 마침내 완벽히 고객분들께서 실시간 변경후 해당 데이터들이 오류없이 전부 적용될 수있도록 개발에 성공하였고, 그리하여 하룹코어를 이용하시면 언제 어디서든지, 어떤 항목에서든지, 애니메이션을 실시간으로 적용하고 확인하실 수 있게 되었습니다.

하룹코어 원격 서버로 접속하시면, 섹션부터 각종 플러그인들까지도 전부 이 애니메이션 기능을 1초만에 바로 적용하실 수 있습니다. 그저 항목에서 고급설정으로 들어가셔서 애니메이션쪽을 클릭하고 원하시는 애니메이션을 선택하세요. 바로 실시간으로 적용된 예시를 확인하실 수도 있습니다.

하룹코어를 통해, 개발팀을 구축하는 병원이나, 웹에이전시에 엄청난 수정비용과 유지보수 비용을 지불하는 병원들이 실제로 매우 줄어들고 있습니다. 하룹코어를 통해 원장님 마음껏, 원하시는대로 홈페이지 및 랜딩페이지를 관리해보십시오.